React - 初始化项目的步骤

1，使用 create-react-app 快速构建 React 开发环境

create-react-app 自动构建的项目是基于 Webpack + ES6

$ cnpm install -g create-create-app
$ create-react-app my-app
$ cd my-app
$ npm start

在浏览器中访问 http://localhost:3000/

2，JSX

React 使用 JSX 来替代常规的 javascript
JSX 的优点：

• JSX 的执行更快，因为它是在编译为 javascript 代码后进行优化
• 它的类型是安全的，在编译过程中就能发现错误
• 使用 JSX 编写模板更加简单快捷

可以在 JSX 中时候用 javasript 表达式，使用 {} ，但不能使用 if else 语句，使用conditional（三元运算）

var myStyle = {
    fontSize: 100,
    color: '#ff0000'
}
ReactDOM.render(
    /*标签外的注释不需要花括号，只能使用一个外层 div 包裹*/
    <div>
        <p>aaa</p>
        {/*这里是一个标签内的注释*/}
        <h1>{i== 1 ? 'True' : 'False'}</h1>
        <p style={myStyle}>外部样式</p>
        <p style={{fontSize: 12}}>内联样式</p>
    </div>,
    document.getElementById('example')
)

3，HTML 标签 和 React 组件

React 可以渲染 HTML 标签 或 React 组件
要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById)

渲染 React 组件，只需要创建一个大写字母开头

var MyComponent = React.createClass({/*...*/);
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'))

React 的 JSX 使用大、小写的约定来区分本地组件和 HTML 标签
注意：由于 JSX 就是 javascript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性

4，React State（状态）

React 把组件看成是一个状态机。通过与用户的交互，实现不同的状态，然后渲染UI，让用户界面和数据保持一致