特点

• 组件化，利用复用
• Virtual DOM，代码可读性强
  • 可以直接在js代码里写html标签
• 模块化，高内聚低耦合，便于测试

语法

• 组件名遵循驼峰命名法，首字母必须大写
• jsx语句里为标签添加class时，需要使用className替代
• 变量名用花括号{}包裹，不能加双引号
• style属性是一个对象

3个特殊的属性

• dangerouslySetInnerHTML
• ref 父组件引用子组件
• key 为列表元素设置唯一的key值，能够提升性能。
  • 如果key值一致，将不需要重新渲染

由于React有独特的diff算法来判断组件是否相同，如果相同，则不再渲染相同的组件，这样能够有效的节省资源和时间。因此，推荐遵循以下2条规则：

• 将相似的功能写到一个组件中
• 为列表元素设置唯一性的key属性

2个核心

• 组件属性 this.props.xxx
• 组件状态 this.state.xxx
  • getInitialState函数必须有返回值，可以是null或者一个对象
  • 访问state的方法：this.state.属性名

离线预编译

react编写的前端项目，在正式上线前，要使用工具将jsx格式的组件预编译成js代码。 react框架遵循es6的语法来写，需要安装babel命令行工具。

npm install --global babel-cli
npm install babel-preset-react
babel --presets react src --watch --out-dir build

使用npm创建react项目

npm init
npm install --save react react-dom babelify babel-preset-react
browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

有的情况下需要使用babel-preset-es2015，则需要使用
browserify -t [ babelify --presets [ es2015 react ] ] index.jsx -o bundle.js

实例

var  HelloWorld = React.createClass({
     render: function() {
          return <p className='name'>Hello, {this.props.name || 'world'}</p>
     }
});
ReactDOM.render(<HelloWorld name='zhangsan'></HelloWorld>, document.body);

集成Material UI遇到的问题

1) DatePicker组件不显示

解决方法：npm i react-tap-event-plugin