//先安装 React
npm install react react-dom --save
//安装 React 项目生成工具
npm install -g create-react-app
npx create-react-app <app_name>
一个组件会接受名为 props 的参数，并通过名为 render的方法返回一个嵌套结构的视图。
render 返回的是你对你想要渲染内容的描述。React 会根据你的描述将对应的内容在屏幕上渲染出来。讲得更具体一点，render 返回的是一个 React 元素，是一种对渲染内容比较简洁的描述。大部分 React 开发者都会使用一种名为 JSX 的语法扩展来更方便地书写这种描述。比方说里面的 <div /> 会被编译为 React.createElement('div') 。
在 JSX 中你可以任意使用 JavaScript 表达式，只需要用一个大括号把表达式括起来。每一个 React 元素事实上都一个 JavaScript 对象，你可以在你的应用中把它当保存在变量中或者作为参数传递。
在 React 组件的构造方法 constructor 当中，你可以通过 this.state 为该组件设置自身的状态数据。
在使用 JavaScript classes 时，你必须调用 super(); 方法才能在继承父类的子类中正确获取到类型的 this 。
每当 this.setState 方法被触发时，组件都会开始准备更新，React 通过比较状态的变化来更新组件当中跟随数据改变了的内容。
**当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中的状态数据就能够更方便地交流共享了。**像这种提升组件状态的情形在重构 React 组件时经常会遇到。
因为每个组件的 state 都是它私有的，所以我们不可以直接在格子组件当中进行修改。
惯例的做法是，我们再通过 props 传递一个父组件当中的事件处理函数到子组件当中。
更进一步的，React 专门为像 Square 组件这种只有 render 方法的组件提供了一种更简便的定义组件的方法： 函数定义组件 。只需要简单写一个以 props 为参数的 function 返回 JSX 元素就搞定了。记得把所有的 this.props 替换成参数 props. 我们应用中的大部分简单组件都可以通过函数定义的方式来编写，并且 React 在将来还会对函数定义组件做出更多优化。
注意到我们在写代码的时候，在各个属性直接换了行，这样可以改善我们代码的可读性。并且我们在 JSX 元素的最外层套上了一小括号，以防止 JavaScript 代码在解析时自动在换行处添加分号。
思考：
- render 就是渲染函数，渲染不需要手动执行，当 state 数据变化时候就自动渲染（VM）？
- super() 的含义
Last modified on 2019-03-04