開發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/，就可以看到編譯後的測試專案啦！