一、安裝

React的安裝包可以到官網下載，如果使用git也可在在git下載：

git install react -g;

下載完畢可以寫個小例子：

首先，在index.html頁面 插入2個外部檔案：

<script src="node_modules/react/dist/react.js"></script>
<script src="node_modules/react-dom/dist/react-dom.js"></script>

class HelloMessage extends Rect.Component{
   render(){
     return <div>你好，{this.props.name}</div>;   
     }
}
var mountNode = document.querySelector('#root');
ReactDOM.render(<HelloMessage name="青雲"/>,mountNode);
 

＊＊Babel的配置檔案是 .babelrc 存放在根目錄下。

      使用Babel的第一步就是配置這個檔案。

      該檔案用來設定轉碼規則和外掛，基本格式如下：

｛
"presets":[],
"plugins":[]
｝

    # ES2015轉碼規則
    $ npm install --save-dev babel-preset-es2015

    # react轉碼規則
    $ npm install --save-dev babel-preset-react

    # ES7不同階段語法提案的轉碼規則（共有4個階段），選裝一個
    $ npm install --save-dev babel-preset-stage-0
    $ npm install --save-dev babel-preset-stage-1
    $ npm install --save-dev babel-preset-stage-2
    $ npm install --save-dev babel-preset-stage-3
 

babel全域性安裝：

$ sudo npm install babel-cli -g 全域性安裝babel

1、在根目錄下新建.babelrc檔案，來設定轉碼規則；

{
  "presets":[
    "react"
  ]
}

$ babel example.js -o compiled.js

compiled.js是指定的輸出檔案所在路徑；

如果想要以後方便，不想每寫一個js檔案，就轉碼一次的話，可以進行整個目錄的轉碼：

$ babel src --out-dir lib

$ babel src -d lib

# --out-dir 或 -d 引數指定輸出目錄

拿上面截圖上的例子（圖1）來說:就是生成了一個a.js(或者lib/index.js);

如果上面的都正常顯示的話，好了，你可以開始繼續後面的使用了。