成都這座城市真的很nice

React的官方文檔中，為了新的學習者能夠更加容易接受React，在最初的介紹中，告訴我們可以通過在js中引入React庫，并且在js中直接如下使用。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

但是我個人并不認同這樣的入門方式，因為在實踐中，我們幾乎不會這樣使用。

與Vue一樣，React同樣具有非常優(yōu)秀的構建工具，但是由于推廣方式的原因，知道Vue的同學，即使剛入門不久，都或多或少知道vue-cli，但是我想有很多知道React的新人，卻并不知道create-react-app。

作為最易上手的react腳手架，create-react-app并不需要花費太多時間就能夠掌握，大家只需要按照我接下來的步驟安裝需要的環(huán)境即可。當然，想要配置一個功能更強大，更適合實踐的腳手架，則還需要在此基礎上做更多的擴展與配置。這個我們在開發(fā)中慢慢完善。

1. 安裝node

從nodejs官方網站下載你的操作系統(tǒng)對應的node版本。和普通應用一樣安裝即可。

最好選擇穩(wěn)定版

該頁面會自動推薦更合適你電腦的node版本。點擊左側大按鈕，將會下載最新的穩(wěn)定版本。右側的大按鈕可能會有一些更新的，但還處于測試階段的新特性。因此我們通常選擇左側的下載。

node安裝的同時，npm也會一起被安裝。npm是一個js包管理工具，我們可以利用該工具下載我們需要的js庫。例如我們需要在項目中引入jQuery。那么可以直接這么干。

// 僅在當前項目安裝
> npm install jquery

// 全局安裝
> npm install jquery -g

安裝完成之后，通過查看node版本的方式確保node已經正常安裝。

node -v

由于網絡原因，當我們想要通過npm下載項目依賴包時，可能會很慢甚至直接無法下載，因此在使用時我們通常會使用淘寶NPM鏡像。

首先使用如下指令安裝cnpm，用以替換默認的npm

> npm install -g cnpm --registry=https://registry.npm.taobao.org

然后就可以使用cnpm來安裝想要的模塊了。

> cnpm install jquery

當然，現在更多的人更偏向于使用另外一個新的包管理工具yarn。在后續(xù)的教程中，我們可能也會使用到yarn而不使用npm。大家可以訪問yarn官方網站按照教程安裝yarn。

通常能夠使用npm安裝的模塊，都能夠使用yarn來安裝，他們的常用指令如下：

// 安裝模塊
> npm install lodash
> yarn add lodash

// 啟動項目
> npm start
> yarn start

// 構建項目
> npm run build
> yarn build

入門時只需要記住幾個簡單的即可，在這里不建議深究更多的指令，在學習過程中慢慢掌握即可。

2. 安裝一個好用的命令行工具

對于windows系統(tǒng)來說，我們可以直接使用系統(tǒng)自帶的cmd。但是cmd比較難用。因此我個人比較推薦大家安裝git，并通過git中的git.bash工具進行指令操作。

點擊下載git

git下載頁面

也是與安裝其他應用一樣，在電腦上安裝好git，找到git的安裝目錄，我們會發(fā)現有一個bash工具。雙擊它即可使用。

對于mac系統(tǒng)來說，使用起來則相對簡單，我們可以直接使用系統(tǒng)自帶的terminal工具即可。當然，也可以安裝更加好用的iTerm。

點擊下載iTerm

iTerm2下載頁面

通常我們在安裝好iTerm之后，會下載一個非常好用的集成補丁oh my zsh。它為我們使用指令提供了非常多的快捷操作與舒適的補全提示。

// 安裝oh my zsh
> curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh

對美觀有自己要求的同學可以選擇對應的主題。

oh my zsh主題選擇

3. 安裝 create-react-app

如果剛才我們的包管理工具(npm/yarn)已經安裝好，那么安裝create-react-app就比較簡單。

> yarn add create-react-app -g

添加-g表示全局安裝

接下來我們就可以使用create-react-app來創(chuàng)建項目啦。

4. 創(chuàng)建第一個react項目

找到一個你專門用來存放項目的目錄，例如我的目錄名字叫做develop。在命令行工具中進入到這個目錄，然后使用如下指令創(chuàng)建項目。

// 進入目錄
> cd develop

// 創(chuàng)建項目
> create-react-app first-react-app

創(chuàng)建完成之后，我們可以看到類似如下圖所示的界面。

具體的操作指令都已經告訴我們啦

// 進入項目
> cd firstapp

// 啟動項目
> yarn start

// 打包項目
> yarn build

// 暴露出項目的具體配置，以便于在此基礎上擴展/修改更多的配置
> yarn eject

進入并啟動項目，在瀏覽器中輸入http://localhost:3000，我們可以看到如下界面。

第一個react項目

注意關注這里的兩個地址

在命令行工具中，注意關注這里的提示。我們可以直接在電腦中輸入http://localhost:3000訪問項目。同時，我們也可以輸入http://192.168.0.101:3000訪問項目。如果你的手機與電腦處于同一局域網，我們也可以通過該地址在手機上訪問項目，這對于移動端開發(fā)的調試非常有用。

手機上訪問

5. 認識項目

打開項目，我們可以看到如下目錄。

項目結構

• node_modules

node_modules文件夾是項目所有依賴包的存放地址，除了在項目初始化時安裝的所必須的依賴包之外，我們后續(xù)通過yarn/npm安裝的包都存放在該目錄下。

• package.json 與 yarn.lock

項目的配置文件與依賴包的描述文件。目前我們暫時還不需要對他們有過多的了解。在未來如果你要學習webpack等構建工具時才會深入的了解他們。

• public

項目的入口文件。通常我們會將index.html存放在該目錄里。

• src

模塊與組件的存放目錄。在create-react-app創(chuàng)建的項目中，每一個單獨的文件都可以被看成一個模塊，例如單獨的image，單獨的css，單獨js等，而所有的組件都存放于src目錄中，其中index.js則是js的入口文件。

通常我們創(chuàng)建一個web頁面，則需要分別通過link與script標簽引入對應的css與js文件。但是在create-react-app的開發(fā)環(huán)境中，構建工具幫助我們自動完成了這些操作，我們只需要按照當前開發(fā)環(huán)境的簡單規(guī)則來組織自己的代碼即可。當我們通過yarn build打包項目之后，我們會看到html頁面則變成了我們熟知的樣子。