開發React應用時，很少有人直接引入react的源JS文件，然後再開發。大家都是用webpack + es6來結合react開發前端應用。而webpack的使用又比較繁瑣，爲此官方提供了用於快速構建開發環境的腳手架工具Create React App。該腳手架將Webpack、Babel工具的配置進行了封裝。使用它創建的項目，開發者不需要對其進行任何的配置工作，從而使你可以專注於開發！
1、安裝
eate-react-app安裝起來簡單的要命，只需要一條命令！打開你的命令控件臺，輸入以下命令：
cnpm install -g create-react-app
通過-g可以將create-react-app安裝到全局環境中，這樣你就可以爲所欲爲的在任意路徑下玩耍它了。
查看安裝的版本號：
create-react-app -V
2、創建你的應用
輸入以下命令：
create-react-app my-app
這個時候會在你當前的路徑下創建一個名字爲 my-app的文件夾， my-app也就是你新創建的React應用。
注意：你的應用名字不要使用大寫，這樣做只要是爲了嚴謹性，因爲在Linux下是嚴格區分大小寫的。
3、運行你的應用
創建應用完畢後，接下來就可以運行它了，輸入以下命令：
cd my-app
npm start
運行後，它會主動打開你的瀏覽器，端口號默認爲3000。如圖：
打開my-app目錄，你會發現結構非常簡單清晰。
node_modules：存放的是安裝所需要的所有依賴模塊。
public：index.html爲你項目的入口 頁面。
src：你項目的源代碼，其中index.js是你的代碼入口。
package.json：項目中的基本信息都在這裏了，例如你的項目名稱、版本號、執行的命令、依賴的模塊項之類的。
所有的源碼都放到src目錄下了，其它雜七亂八的東西你都不用搭理它，你只管在該文件下靜靜開發即可。因爲其它的create-react-app都給你處理好了。
接下來我們可以打開index.js，你會發現它使用入了App.js。再打開App.js，修改render方法。將“Welcome to React”修改爲“歡迎來到React的世界做客！”。代碼如下：
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo"/>
<h1 className="App-title">歡迎來到React的世界做客！</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
當你保存文件後，你會發現你的瀏覽器也會實時進行更新，這是因爲Create React App具有熱更新的功能。如圖：
4、編譯你的應用
只需要一條命令即可將你的應用編譯爲開發環境中的代碼！
cnpm run build
編譯好的文件都會放到build目錄中。另外它還提供一個服務器，讓我們在本地也能看到線上生產環境類似的效果，是不是很方便，是不是有種馬上就想嘗試下的衝動？
若想編譯你的生產環境首先安裝pushstate-server用於將已經編譯好的項目進行部署：
cnpm install -g pushstate-server
然後就可以在本地查看你的效果啦
pushstate-server build
然後瀏覽器訪問http://127.0.0.1:9000/，就可以看到編譯後的測試項目啦！