React入门教程-阮一峰

https://github.com/ruanyf/react-demos

http://www.ruanyifeng.com/blog/2015/03/react.html

为什么script的类型是text/babel？

因为React 独有的JSX 语法，跟JavaScript不兼容。凡是使用JSX 的地方，都要加上type="text/babel"。

上面的代码总共用到了三个库。。React、React-DOM。。而browser.js负责将jsx的语法转换

$ babel src --out-dir build

上面的命令可以将js进行语法转换，转码后的文件放在build目录下。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

上面的代码是将第一个参数的内容渲染到第二个参数所在的位置。

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);

四、组件

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。

 

感觉这个教程并不咋地。。因为最好的学习React的方法还是通过实例。。实战演练。

 

>>React Router 使用教程：http://www.ruanyifeng.com/blog/2016/05/react_router.html