1. 安裝 Node，到node官網(wǎng)下載
2. 安裝 create react app：
npm install -g create-react-app
create react app是開始構(gòu)建新的 React 單頁面應(yīng)用的最佳途徑想罕。 它可以幫你配置開發(fā)環(huán)境该面，以便你可以使用最新的 JavaScript 特性木柬，還能提供很棒的開發(fā)體驗(yàn)馁蒂，并為生產(chǎn)環(huán)境優(yōu)化你的應(yīng)用饱亮。
3. 創(chuàng)建 react 項(xiàng)目：
create-react-app my-app
4. 運(yùn)行項(xiàng)目：
cd my-app
npm start
5. 安裝 React兆旬，我這里使用 npm 安裝 React：
npm init
npm install --save react react-dom
6. 安裝 babel 使用 ES6 和 JSX 。ES6 擁有一系列 JavaScript 新特性的標(biāo)準(zhǔn)隧出，能使你的開發(fā)更簡單。JSX 是與 React 搭配使用的 JavaScript 語言的擴(kuò)展阀捅。
npm install --save-dev babel-cli
安裝之后胀瞪，在 Webstorm 的 settings 中搜索 File Watcher，點(diǎn)擊右邊 “+”饲鄙，把 babel 添加上去凄诞，截圖如下：
Program ：如果是全局安裝 babel-cli 的，這里默認(rèn)就好了忍级。如果是項(xiàng)目安裝的帆谍，就要右邊的...到項(xiàng)目的node_modules文件夾中，找到.bin文件夾下面的babel文件轴咱，點(diǎn)ok就可以了
Arguments ：默認(rèn)為：$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets env
Output paths to refresh ：默認(rèn)為dist\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js:dist\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js.map
7. 安裝 Babel 其他庫：npm install babel-preset-env --save-dev
8. 在項(xiàng)目根目錄創(chuàng)建一個 .babelrc 文件汛蝙，里面的內(nèi)容根據(jù)自己的需要設(shè)置烈涮，官網(wǎng)上默認(rèn)填寫：{ "presets":["env"] }，有的網(wǎng)上教程推薦{"presets":["es2015"]}
9. 安裝 Webpack：
? ? npm install webpack --save-dev
10. 安裝并啟用webpack-dev-server
? ? webpack-dev-server 允許我們可以把本地項(xiàng)目跑在像 nginx 那樣的web服務(wù)器上窖剑，更重要的是我們可以在 package.json 文件內(nèi)定義 scripts坚洽，同時修改 webpack 的配置文件來達(dá)到類似 BrowserSync（即文件修改能被監(jiān)聽，并自動刷新瀏覽器）的效果西土！
