ree2
什么是React？
React是一个JavaScript库 - 最受欢迎的库之一，在GitHub上有超过100,000颗星。
React不是一个框架（与Angular不同，它更加自以为是）。
React是一个由Facebook创建的开源项目
React用于在前端构建用户界面（UI）
React是MVC应用程序的视图层（模型视图控制器）
React最重要的一个方面是，您可以创建组件（类似于自定义，可重用的HTML元素），以快速有效地构建用户界面。React还使用状态和道具简化了数据的存储和处理方式
设置安装
此方法不是设置Reactd的流行方法，但是如果曾经使用过Jquery这样的库，它将会很熟悉且易于理解，而且如若你不熟悉webpack，Babel和nodejs，那么他是最简单的入门方法
首先再不是用脚手架模式开发时，我们要在index.html文件中映入三个CDN库
//React - React顶级API实列
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
//React DOM - 操作DOM的方法
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
//Babel - 一种JavaScript编译器，允许我们在旧浏览器中使用ES6 +，React中的组件都是一个对象class类
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
React基本写法：
在html中创建一个跟容器
<body>
<div id="app"></div>
</code>
注意：script标签类型一定要写"text/babel"，否则会报错误（只是正对非脚手架开发模式）。如下：（为了查询器简洁，后续贴出的js代码,会省略script标签对）
// 使用react来进行页面渲染需要进行下面的三步
<script type="text/babel">
//1.获取页面真实的容器元素
const Div = document.getElementById("app")
//2.创建dom元素
const cDiv = "<div>hello world</div>"
//3.将虚拟dom渲染到页面（类似vue，将内容渲染到绑定的容器中）
ReactDOM.render(cDiv,Div) //ReactDOM.render(类容,容器)。react固定方法
也可以这样写：
//1.创建dom元素
const cDiv = "<div>hello world</div>"
//2.将虚拟dom渲染到页面
ReactDOM.render(cDiv,document.getElementById("app"))
</script>
React JSX
React 使用 JSX 来替代常规的 JavaScript 创建dom元素
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX，但它有以下优点：
1.JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
2.它是类型安全的，在编译过程中就能发现错误。
3.使用 JSX 编写模板更加简单快速。
4.我们先看下以下代码：
1.原生js创建dom元素
//字符串拼接
const cDiv = "<div>hello world</div>"+
"<span></span>"
//模板字符串
const cDiv = `<div>hello world</div>
<span></span>`
2.React 传统的创建dom元素Dom
const cDiv = React.createElement("div",{className:"myclass"},"<span>React创建Dom</span>")
3.JSX创建dom元素
const cDiv = <div>
<div>hello world</div>
<span></span>
</div>
从上面创建dom元素的写法上看，jsx更像是书写原生html一样，不错，就是跟原生html写法一样，以前怎么写html的，在JSX语法中就怎么写，但是JSX中，有以下几点需要注意：
1.JSX中书写class属性，要写成className,因为在js代码块中calss是关键保留字
2.JSX中只存在一个根标签，书写多个标签时，一定要在外围包裹一层容器来作为唯一的根标签，类似于vue中templaten模板一样，只能有一个根标签.
JSX中 变量,表达式,注释 要放在{}中
const str = 12;
const cDiv = <div>
{//注释也要放在{}内
/* 注释也要放在{}内*/
}
<span>{str}</span>
<p>1+3*5+4={1+3*5+4}</p>
</div>
内联样式通过对象方式引入,jsx中是没有单位的：
const myStyle = {
background:"#800",
fontSize:30 // 没有单位
}
const str="今天天气";
const cDom =<div>
<span>{str}</span>
<p style={myStyle}>1+3*5+4={1+3*5+4}</p>
</div>
ReactDOM.render(cDom,document.getElementById("app"))
// 如果不用变量的形式传参，我们要放在{{}}里面,如下：
const cDom =<div>
<span>{str}</span>
<p style={{background:"#800",fontSize:30}}>1+3*5+4={1+3*5+4}</p>
</div>
ReactDOM.render(cDom,document.getElementById("app"))
jsx数组遍历渲染列表
const Arr = [
{name:"A"},
{name:"B"},
{name:"C"},
{name:"D"},
];
const vDom = ( // 用小括号包裹JSX代码，便于理解，表示此代码块属于vDom变量的，也可以不适用小括号，效果一样（建议使用小括号包裹）。
<ul>
{
Arr.map((item,index)=>{
console.log(item)
return <li key={index}>{item.name}</li>
})
}
</ul>
);
ReactDOM.render(vDom,document.getElementById("app"))
---------------------
作者：shenroom
来源：CSDN
原文：https://blog.csdn.net/qq_41772754/article/details/88927544
版权声明：本文为博主原创文章，转载请附上博文链接！