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