? ? ? ? ? ?React.js環(huán)境搭建，第一個react.js項目

? ? ? ? ?作為一個Android開發(fā)，一只想嘗試一下react.js的使用，最近項目都比較忙一直沒時間，還好項目已經(jīng)上線，新的版本還在規(guī)劃中，所有抽空學習了一下react.js，就是想寫篇文件記錄下搭建環(huán)境的過程，免得自己后面項目忙起來沒時間看忘記了，然后下次想學習的時候又要重新搭建換進，我想很多人都有這個情況吧，閑下來的時候學點東西，剛學一點項目來了一陣忙碌之后，想想全忘了，然后不得不又重新開始，這個時候不僅枯燥無聊，最重要的時候會打擊新鮮感，積極性。

話不多說，開始搭建環(huán)境。由于搭建react.js需要node.js環(huán)境，這里只作react.js環(huán)境搭建，關于node.js的安裝，自行搜索。

1，首先去定自己安裝了node.js，沒辦法，使用react.js的時候需要安裝很多的工具包這些包需要使用npm安裝，npm又是基于node.js的，所以。。。

首先確定自己安裝了node.js環(huán)境

2，隨便新建一個項目文件夾，比如我建的項目文件名稱是react_init。

3，使用cd命令進入react-init文件下面。

4，使用npm init初始化init，用于后面使用npm安裝各種react插件（插圖如下）

執(zhí)行npm init之后一值enter鍵，知道最后一步，此時查看當前所有在react_init文件夾下面會看到生成了一個package.json文件，這時候表示npm初始化完成，后面就可以使用npm命令安裝各種react.js需要的插件

5，開始使用npm命令安裝各種需要react.js的插件，下面的命令你可以一次性執(zhí)行，也可以一個一個執(zhí)行

npm install --save react react-dom?

npm install --save react babelify babel-preset-react

npm install babel-preset-es2015 --save

npm install webpack-dev-server —save

npm install wegpack —save

npm install babel-loader --save

命令太多了，不做解釋，需要了解具體安裝什么的，可以自行搜索

6，以上命令執(zhí)行之后你可以在react-init文件夾下面看到生成了一個

這是npm幫你自動生成的插件包，里面都是使用npm安裝的插件，用于統(tǒng)一管理，在你第一次執(zhí)行上面的任何一個命令的時候下面的軟件包就會自己生成，不僅可以在node_module下面查看你安裝了那些插件還可以在package.json

下面查看你安裝了多少插件包

5，關于react的插件基本上安裝完成，由于我們使用的webpack打包，所有我們還需要一個webpack的配置文件

webpack是一個打包react.js語法的文件生成瀏覽器可以認識es5的語法，其配置和功能的使用都相當負責，具體了解可以自行搜索。

上面截圖中的entry: "./js/index.js",? 表示輸入路徑，就是把當前路徑下的index.js的react.js代碼進行打包，生成可以被瀏覽器識別的js代碼，生成代碼之后自動輸出到

output: {

? path: __dirname + '/src/',

? filename: 'bundle.js'

}

當前目錄下面，文件名稱就是bundle.js。

7，這個生成的bundle.js就是可以被瀏覽器識別的es5的js代碼，新建一個html文件，引入bundle.js之后就可以打開你用react.js寫的代碼了。

8，有了webpack打包的之后，你就可以只關心自己的react.js的代碼了，不管你寫了多少組件化的react.js代碼，最后都被打包成這樣一個js文件，然后一次引入就可以了

9，下一節(jié)我說一下webpack的其他更好用的插件，可以直接監(jiān)視你的react.js文件的改變，自動生成改變之后的bundle.js文件，實時生成，實時預覽，非常的方便。