开始
首先确保自己已经安装好 node 环境或者 yarn 环境，并且最好已经为 npm 或 yarn 换好了源。
下面以 npm 为例。进入想要创建项目的目录，打开终端。输入：
npx create-react-app <name>
或：
npm install create-react-app -y #把脚手架安装在本地 create-my-app <name>
然后：
cd <name> npm start
JSX
react 中我们用标签来描述 js 的对象。它有些像 JavaScript，又有些像 XML，这种风格我们称为 JSX。
就像这样：
const element = <div>Hello, world!</div>;
然后我们用 ReactDOM 的 render 方法把 element 渲染到 DOM 树的 id 为 example 的节点上：
ReactDOM.render(
element,
document.getElementById('example')
);注意，JSX 中的多个子标签必须被一个闭合的父标签包裹，就像这样：
const element = <div> <h1>TITLE</h1> <div>hello~</div> </div>;
如果我们要往 JSX 中添加 JavaScript 代码，那么把代码用一对大括号包裹：
var x = 'xixi';
const element = <div>
<h1>TITLE</h1>
<div>hello~</div>
<div>{x}</div>
</div>;当然，我们还能这么用：
const element = <button onClick={ () => alert('Hi~') }></button> // onClick 绑定了一个 ES6箭头函数(本人暂时只会写 class-style 的 React，未来会补上 function + hooks)
React objects, props, state
React 的对象继承 React.Component 的接口，一般需要一个 render 方法来渲染对象本身。render 会在对象的 constructor 调用之后，以及对象每次调用 setState 方法之后被调用。
我们用类似 html 标签的方式把对象插入 DOM 树中，比如下面的代码，我们把<Hello Button /> 插入 DOM，在其闭合标签中用 name 来为其定义 props，并且在对象被点击的时候在 handleClick 里获取 this.props.name 来得到其 name 属性，显示在 alert 的对话框中。
在下面的代码中你可以看到：React 风格的 stylesheet，state、props的基础用法，以及 ES6的语法糖 var { a } = b，和 var a = b.a 等价。
class HelloButton extends React.Component {
constructor(props) {
super(props);
this.state = {
clicked: 0
};
this.myStyle = {
'height' : '40px',
'width' : '75px',
'positon' : 'relative',
'font-weight': 'bold',
'margin' : 'auto'
};
}
handleClick() {
alert('Hello! ' + this.props.name);
var { clicked } = this.state;
++clicked;
this.setState({
clicked: clicked
});
}
render() {
return (
<div>
<button onClick={ this.handleClick.bind(this)} style={this.myStyle}>
Click me
</button>
<div>
I've been clicked { this.state.clicked } times.
</div>
</div>
);
}
}
ReactDOM.render(
<React.StrictMode>
<HelloButton name='Jirachi' />
<App />
</React.StrictMode>,
document.getElementById('root')
);我们需要非常万分注意的一点是，setState 是异步（asynchronous）的，我们在调用 setState 后，对象的 state 并不会立刻刷新，如果我们要获取实时的信息，在 setState 的第二个参数中填入回调函数（callback function）即可。
像这样：
this.setState({
clicked: clicked
}, () = > alert(this.state.clicked));用数组来创建列表
var array = [1, 1, 4, 5, 1, 4];
array.map(items => <li>{items}</li>);之后 array 就会被转换成一个 JSX 对象了。如果我们要利用上索引，那么可以这样改动：
var array = [1, 1, 4, 5, 1, 4];
array.map((items, index) => {
return (
<li id={`${index}`}>{items}</li>
);
});用上面的知识做的一个 To-do list 小 demo：
代码：
https://github.com/Endsieg77/to-do-list
React 生命周期
React Hooks
基础 function hooks
// react.js 的 function hooks 定义方法如下：
function componentName() {
const [state, setterOfState] = useState(initialVal);
// 其中 state 是变量名，setterOfState 是一个函数。
// 用来修改 state 的值，initialValue 设置 state 的初值。
useEffect(
callback
, [triggers]);
// callback 为回调函数，触发条件是 triggers 发生改变，
// callback 可以有返回值，如果返回值是一个函数，那么函数将会在组件更新之前被调用。
// 这个函数我们一般称为清理函数（Cleanup Function）
// triggers 可以不用填，默认为所有 state 变量。
}Function Hooks 组件的生命周期：
组件挂载 –> 执行副作用 –> 组件更新 –> 执行清理函数 –> 执行副作用 –> 组件更新 –> 执行清理函数 –> 组件卸载
function hooks 的复用性
我们之所以逐步转向 function hooks，甚至未来的 React 可能考虑 deprecate class-style，有一个重要原因就是 function hooks 具有较强的可复用性。
考虑以下代码：
function useCount(number) {
const [color, setColor] = useState(0);
useEffect(() => {
setColor(number % 2);
});
return color;
}
function App() {
const [number, setNumber] = useState(0);
const [test, setTest] = useState('a');
const color = useCount(number);
const myStyle = {
'background-color': color ? 'red' : 'blue',
'color': 'aliceblue',
'cursor': 'pointer'
};
useEffect(() => {
document.title = `clicked ${number + test} times`
});
return (
<div>
<p>{`${number} ${test}`}</p>
<button style={myStyle} onClick={() => setNumber(number + 1)}>Click</button>
<button onClick={() => setTest(test + 'a')}>Change test</button>
</div>
);
}function hooks 的嵌套允许我们复用具有相似行为的组件，而在编写 class-style 的时候，即使是经验老道的 React User 也难以避免大量重复的逻辑（这一点我在写上面那个 To-Do List 的时候深有体会）。
