原文來自：https://www.rails365.net/articles/kai-fa-react-ying-yong-zui-hao-jiao-shou-jia-create-react-app
介紹
在開發(fā)react應用時仿村，應該沒有人用傳統(tǒng)的方法引入react的源文件(js)闽撤，然后在html編輯吧。
大家都是用webpack + es6來結(jié)合react開發(fā)前端應用。
這個時候膳沽，我們可以手動使用npm來安裝各種插件，來從頭到尾自己搭建環(huán)境葡缰。
比如：
npm install react react-dom --save
npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-react --save
npm install babel webpack webpack-dev-server -g
雖然自己搭建的過程也是一個很好的學習過程遏插，但是有時候難免遇到各種問題，特別是初學者捞附，而且每次開發(fā)一個新應用巾乳，都要自己從頭搭建，未免太繁瑣鸟召。
于是胆绊，有人根據(jù)自己的經(jīng)驗和最佳實踐，開發(fā)了腳手架药版，避免開發(fā)過程中的重復造輪子和做無用功辑舷，從而節(jié)省開發(fā)時間。
類似這樣的腳手架槽片，我掃了網(wǎng)絡上比較多人用和關(guān)注的何缓，一共發(fā)現(xiàn)了三個，它們分別是：
它們的關(guān)注量都非常大还栓，截至寫這篇文章為止碌廓，在github上的star量是這樣的：
由此可見，使用這三個腳手架的人都相當多剩盒，最突出的是create-react-app谷婆。
它是后來居上，他的開發(fā)時間都晚于前兩個辽聊，但關(guān)注量卻比他們還大纪挎，而且他還是facebook官方開發(fā)的。
肯定是一個優(yōu)秀的產(chǎn)品跟匆。
下面來介紹一下它的特點异袄。
1.特點
它有好多好多的優(yōu)點，先從安裝使用說起玛臂。
2.1 簡單的安裝使用
create-react-app安裝起來實在是太簡單烤蜕，只需要一條命令，不像別的腳手架迹冤，還需要去clone整個腳手架的源碼讽营，再在那基礎(chǔ)上改。
npm install -g create-react-app
裝完之后泡徙，生成一個新的項目橱鹏，可以使用下面的命令：
create-react-app my-app
cd my-app/
創(chuàng)建了my-app目錄，這個時候，使用下面的命令就可以開始開發(fā)應用了蚀瘸。
npm start
默認情況下狡蝶，會在開發(fā)環(huán)境下啟動一個服務器，監(jiān)聽在3000端口贮勃，它會主動給你打開瀏覽器的贪惹，可以立刻就看到這個app的效果。
是不是很簡單寂嘉？
2.2 源碼結(jié)構(gòu)簡單清晰
在項目my-app
目錄中奏瞬，你會發(fā)現(xiàn)源碼非常清晰，沒有多余的文件泉孩。
]
真的很清爽硼端，所有的源碼你將放到src
目錄下，什么配置文件寓搬，各種亂七八糟都不用管珍昨，你只需要專注開發(fā)就好了，create-react-app都給你處理好了句喷。整個源碼簡單镣典，又小又清爽！管理起來也方便唾琼！
如果你使用過webpack-dev-server或webpack搭建過開發(fā)環(huán)境兄春，你就會發(fā)現(xiàn)，create-react-app的開發(fā)環(huán)境也有類似webpack-dev-server的--inline --hot自動刷新的功能锡溯。
什么意思呢赶舆？
就是一旦源碼文件，一更新祭饭，再保存之后芜茵，瀏覽器會自動刷新，讓你能實時查看效果倡蝙。
你總要探究一下是怎么回事九串，難道create-react-app也用上了webpack-dev-server?
翻看了一下源碼，沒有找到webpack.config.js文件悠咱，如果有使用webpack就應該有這個文件蒸辆，好奇怪征炼∥黾龋看了一下node_modules目錄，也沒找到webpack相關(guān)的東西谆奥。
]
先源頭入手眼坏，我是用npm start命令來運行項目的。就從package.json文件入手，它的內(nèi)容是這樣的：
]
看到了這行：
"start": "react-scripts start"
react-scripts又是什么宰译？在node_modules目錄中能找到它檐蚜，它果然依賴了好多工具，其中就包括'webpack'沿侈。
]
里面果然也有webpack的配置文件闯第，也有好多腳本文件。
原來它是facebook開發(fā)的一個管理create-react-app
服務的工具缀拭。
原來也是它讓整個源碼變得很整潔的咳短。
因為它隱藏了沒必要的文件，大多數(shù)人的配置都是差不多的蛛淋。
除此之外咙好，它還加入了eslint
的功能。讓你在開發(fā)過程中褐荷，更關(guān)注于代碼勾效，很不錯。
](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/photo/image/185/2016/260c700fcd1ddfd4649d2700192245b2.png)
2.3 線上編譯命令
這個是create-react-app
的一個大亮點叛甫，它能讓你的應用騙譯出在線上生產(chǎn)環(huán)境運行的代碼层宫，編譯出來的文件很小，且文件名還帶hash值合溺，方便我們做cache卒密，而且它還提供一個服務器，讓我們在本地也能看到線上生產(chǎn)環(huán)境類似的效果棠赛，真的超級方便哮奇。
只需一行命令：
npm run build
](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/photo/image/187/2016/568dde3650fb0f3c536f5abb88cdd666.png)
運行下面兩條命令，可以查看線上生產(chǎn)環(huán)境的運行效果睛约。
npm install -g pushstate-serverpushstate-server build
編譯好的文件都會放到build目錄中鼎俘。
](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/photo/image/186/2016/596d70f0425da4819a24dc81be10effd.png)
2.4 api開發(fā)
在開發(fā)react應用時，難免與服務器進行數(shù)據(jù)交互辩涝，就是要跟api打交道贸伐。
這個時候，有一個問題怔揩。
api存在的服務器可能是跟react應用完全分開的捉邢，而且，開發(fā)環(huán)境跟線上環(huán)境又不太一樣商膊。
比如伏伐，開發(fā)環(huán)境中，你的react應用是跑在3000端口的晕拆，可是api服務可能跑在3001端口藐翎，這個時候，你跟api服務器交互的時候，可能會使用fetch
或各種請求庫吝镣，比如jquery的ajax堤器。
這個時候可能會遇到CORS問題，畢竟端口不同末贾，而線上環(huán)境卻沒有這個問題闸溃，因為你都控制線上環(huán)境的react應用和api應用，跑在同一個端口上拱撵。
按照以往思路圈暗，解決的方法可能是用環(huán)境變量，比如：
const apiBaseUrl = process.env.NODE_ENV === 'development' ? 'localhost:3001' : '/'
但是這樣搞起來裕膀，還是有些復雜员串，然而，create-react-app
提供了一個超級簡單的方法昼扛，只需要在package.json
文件中寸齐，加一個配置項就可以了。
比如：
"proxy": "http://localhost:3001/",
至于你用的是http的何種請求庫抄谐，都是一樣的渺鹦，不用改任何代碼。這個選項蛹含，只對開發(fā)環(huán)境有效毅厚，線上環(huán)境還是保持react應用和api應用同一個端口。
有以上這么多的優(yōu)點浦箱，你還有理由不用嗎吸耿？
完結(jié)。
