https://react.docschina.org/docs/hello-world.htmlReact教程
二、基本使用
webpack、Vue中的一、二搭建webpack环境
（1）安装
npm install --save react react-dom 安装
react：用于创建组件和虚拟DOM，包括组件的生命周期。
react-dom：将组件和虚拟DOM放到页面展示，ReactDOM.render()。
（2）导入包
接收的成员名称必须写为React和ReactDOM。
// index.js
import React from 'react'
import ReactDOM from 'react-dom'
（3）创建虚拟DOM元素
参数1：字符串，表示创建的标签名称；
参数2：对象（包括null），表示创建元素的属性节点；
参数(3~N)：子节点，包括其它虚拟DOM或文本子节点。
// index.js
const myh1 = React.createElement('h1', { title: '我是h1', id: 'myh1' }, '首页')
const mydiv = React.createElement('div', null, '外面的div', myh1) // 嵌套h1
/* <div>
'外面的div'
<h1 title="我是h1" id="myh1">首页</h1>
</div> */
上述方式繁琐，创建虚拟DOM元素最好的方式是写html代码，即JSX。
（4）渲染虚拟DOM元素
React元素都是不可变的，即当元素被创建后，无法改变其内容或属性，一个元素代表应用界面在某一时间点的样子。
参数1：要渲染的虚拟DOM对象
参数2：指定容器的DOM对象
// index.js
ReactDOM.render(mydiv, document.getElementById('app'))
（5）根DOM节点
使用React创建的虚拟DOM元素，会被渲染到这个指定的容器中。用React开发应用时一般只会定义一个根节点。
<!-- index.html -->
<div id="app"></div>
三、JSX简介
JSX，一种JavaScript的语法扩展，符合XML规范（比HTML严格）的JavaScript。推荐在React中使用JSX来描述用户界面。JSX不是模版语言，它完全是在JavaScript内部实现的，运行时转为React.createElement转为普通JS对象，不会直接把JSX渲染至页面上。
可以使用babel来转换JSX。webpack、Vue中的四搭建babel环境，npm install --save-dev @babel/preset-react，webpack.config.js中的test:/\.js$/改为test:/\.js|.jsx$/，.babelrc中增加"presets": ["@babel/preset-react"]。
注意：
（1）书写JSX时一般都会带上换行和缩进，增强代码的可读性。
（2）推荐在JSX代码的外面扩()，防止分号自动插入的bug。
（3）如果JSX标签是闭合式的，那么你需要在结尾处用/>。
（4）React DOM使用camelCase小驼峰命名来定义属性的名称，而不是使用HTML的属性名称，如class对应className，tabindex对应tabIndex，label的for属性对应htmlFor。
（5）注释。推荐使用{/* 注释 */}，对于{// 注释}后括号要换行
（6）创建DOM时，所有的节点必须有唯一的根元素。
编译JSX代码时，遇到<把它当作HTML代码去编译，遇到{}把其内部的代码当作普通JS代码去编译。
1、表达式
JSX本身就是一种表达式，因为编译后，JSX会被转化为普通的JavaScript对象。可以在if或for语句使用、赋值给变量、当作参数传入、作为返回值等。
JavaScript表达式：可以任意地在JSX中使用JavaScript表达式，表达式包含在{}中。如2+2，user.firstName，formatName(user)等。{}中可以包含数字、字符串、对象（函数）、JSX元素等，布尔值和undefined不在界面显示。
let a=10;
let str="Hello World!"
let flag=true;
let ud=undefined;
const h1=<h1>这是h1</h1>
const arr=[ //Warning: Each child in an array or iterator should have a unique "key" prop.
<h2>这是h2</h2>,
<h3>这是h3</h3>
]
ReactDOM.render(
<div>
{a+5}<hr />
{str}<hr />
{flag?'flag为真':'flag为假'}<hr />
{String(ud)}<hr />
{h1}<hr />
{arr}
</div>,
document.getElementById('app')
);
JSX属性：使用引号来定义以字符串为值的属性，或使用大括号来定义以JavaScript表达式为值的属性。
<div tabIndex="0"></div>
<img src={user.avatarUrl} />
例，将普通字符串数组，转为JSX数组。
const arrStr=["毛利兰","柯南"]
const arrJSX=arrStr.map(item=><h3>{item}</h3>) // Warning: Each child in an array or iterator should have a unique "key" prop.
2、防注入攻击
可以放心地在JSX中使用用户输入。React DOM在渲染之前默认会过滤所有传入的值，所有的内容在渲染之前都被转换成了字符串，有效防止XSS攻击。
const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;
四、组件
组件从概念上看像是函数，它可以接收任意的输入值（props），返回一个需要在页面上展示的React元素。
1、定义组件
组件名称必须以大写字母开头。
组件的返回值只能有一个根元素。
（1）使用JavaScript函数
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
（2）使用ES6 class
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
2、组件渲染
当React元素是用户自定义的组件，它会将JSX属性（也可以使用...传递一个对象，即多个JSX属性）作为单个对象传递给该组件，这个对象称为“props”。props是只读的。
// 通过属性传值
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
// 或传递对象
var obj={
name:"hsg",
age:25
}
ReactDOM.render(
<div>
<Welcome {...obj}></Welcome>
</div>,
document.getElementById('app')
);
3、组合与提取组件
组件可以在它的输出中引用其它组件，让我们用同一组件来抽象出任意层次的细节。在React应用中，按钮、表单、对话框、整个屏幕的内容等通常都被表示为组件。
可以将组件切分为更小的组件，便于复用。
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
4、将组件封装为.jsx文件
注意使用babel转换.jsx
// Welcome.jsx
import React from 'react'
export default function Welcome(props){
return <h1>Hello! {props.name}</h1>
}
// index.js
import Welcome from './components/Welcome.jsx' // 想省略.jsx需配置
五、State&生命周期
使用JS函数定义的组件，是无状态组件；使用class关键字定义的组件，是有状态组件。“有状态”即有私有数据（this.state） 和 生命周期函数，运行效率比无状态组件稍低。
1、
React中，把key添加给被forEach或map或for循环直接控制的元素