網上的教程有好多，在這里不一一列舉，我只介紹我今天安裝成功的步驟
首先，在安裝react之前要先配置好node
1.安裝node
在這里下載node的安裝包https://nodejs.org/en/download/ 。我下載的是.pkg文件，直接雙擊安裝就好
node —v命令檢驗是否安裝成功
npm -v用來檢測npm
2.通過npm使用react
國內使用 npm 速度很慢，你可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org $ npm config set registry https://registry.npm.taobao.org
一般這個時候就可以使用cnpm來進行操作，但是我的一直顯示命令未找到。所以我放棄了使用cnpm，繼續使用npm命令
給npm配置taobao鏡像的registry
npm config set registry https://registry.npm.taobao.org
然后直接用
npm install gulp less --save-dev
就是從taobao鏡像拿包了
3.兩種react開發環境構建
使用 create-react-app 快速構建 React 開發環境
create-react-app 是來自於 Facebook，通過該命令我們無需配置就能快速構建 React 開發環境。
create-react-app 自動創建的項目是基於 Webpack + ES6 。
執行以下命令創建項目：
$ cnpm install -g create-react-app $ create-react-app my-app $ cd my-app/ $ npm start
在瀏覽器打開http://localhost:3000/ 盜用菜鳥教程一張圖,因為我的已經更改了
項目的目錄結構如下
my-app/ README.md node_modules/ package.json .gitignore public/ favicon.ico index.html src/ App.css App.js App.test.js index.css index.js logo.svg
之后我們可以修改src/App.js 文件代碼來改變頁面樣式
reate-react-app 執行慢的解決方法：
在使用 create-react-app my-app 來創建一個新的React應用，在拉取各種資源時,往往會非常慢,一直卡在那：
fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch
可以看到資源還是使用了 npmjs.org，解決方法是換成淘寶的資源：
$ npm config set registry https://registry.npm.taobao.org
-- 配置后可通過下面方式來驗證是否成功
$ npm config get registry
npm start來啟動配置，那么自動會進入開發模式，此時熱替換是處於自動激活狀態
使用npm run build來編譯得到生產環境，此時代碼會被編譯到build目錄下，此時會自動將整個應用打包發布，它會自動使用Webpack控件進行優化與壓縮
使用 Webpack-React-Redux-Boilerplate快速構建 React 開發環境
其允許在一個項目中配置多個應用入口，同時支持開發模式、構建模式與庫構建模式。同時筆者習慣不將webpack配置文件分成單獨的dev與prod文件，而是合並到一個文件中。如果需要使用該模板，直接使用如下命令
git clone -b boilerplate https://github.com/wxyyxc1992/Webpack-React-Redux-Boilerplate/ # 克隆模板文件夾
sudo sh ./install.sh # 安裝運行所需要的依賴項
在執行時要注意，進入到包含install.sh的文件夾下面，否則第二句命令可能會出現找不到的問題，
得到的模本文件夾主要由以下構成
├── README.md ├── README.zh.md ├── dev-config : 配置文件入口 │ ├── apps.config.js : 應用配置文件 │ ├── dev.html : 開發模式下使用的HTML文件 │ ├── devServer.js : 開發服務器 │ ├── eslint.js : ESLint配置文件 │ ├── template.html : 構建模式下推薦的HTML模板文件 │ └── webpack.config.js : webpack配置文件 ├── install.sh ├── package.json └── src : 源代碼目錄 ├── count : 某個應用 │ ├── App.js │ ├── async_library.js │ ├── colors.js │ ├── count.html │ └── count.js ├── helloworld │ ├── App.css │ ├── App.js │ ├── helloworld.css │ ├── helloworld.html │ ├── helloworld.js │ └── logo.svg ├── library │ ├── foo.js │ ├── library.html │ └── library_portal.js └── vendors.js
其核心的關於應用的配置文件即apps.config.js，在模板項目中其配置為
module.exports = { apps: [ //HelloWorld { id: "helloworld", title: "HelloWorld", entry: { name: "helloworld", src: "./src/helloworld/helloworld.js" }, indexPage: "./src/helloworld/helloworld.html", compiled: true }, //Count { id: "count", title: "Count", entry: { name: "count", src: "./src/count/count.js" }, indexPage: "./src/count/count.html", compiled: true } ], //開發服務器配置 devServer: { appEntrySrc: "./src/helloworld/helloworld.js", //當前待調試的APP的編號 port: 3000 //監聽的Server端口 }, //如果是生成的依賴庫的配置項 library: { name: "library_portal",//依賴項入口名 entry: "./src/library/library_portal.js",//依賴庫的入口, library: "libraryName",//生成的掛載在全局依賴項下面的名稱 libraryTarget: "var"//掛載的全局變量名 } };
開發模式
開發模式下主要讀取apps.config.js中的devServer配置，主要是可以配置調試的入口JS文件與開發服務器監聽的端口號。開發模式下會自動使用dev.html作為默認的HTML文件傳輸到瀏覽器中展示，譬如在模板項目中是將helloworld項目作為當前正在開發的項目，切換到項目目錄下使用npm start，即可開啟開發模式，此時在瀏覽器內打開http://localhost:3000即可看到運行效果
構建模式
對於應用中存在的多應用入口，主要是在apps.config.js中的apps下進行配置的，一個典型的應用配置為: