React篇: 建置React開發環境

intro

"本文章附有影片"。在之前的"開發環境&開發工具"，我們已經介紹過整個的環境的建置，從這裡開始，我們需要為因應React的開發而建立的另一個開發環境。但只有少部份的不同設定之處，其實整體來說步驟都是一樣的。

註: 本文章附有影片，影片網址在Youtube的這個網址。本文章同步放置於Github庫的這裡。

學習目標

  1. 安裝React編譯&執行環境
  2. 安裝React Developer Tools(瀏覽器擴充功能)
  3. 安裝與設定React開發工具
  4. 撰寫第一支React程式 - HelloWorld元件

下載&安裝軟體

  • Visual Studio Code: 程式碼編輯軟體，需要額外安裝擴充與設定。
  • Node: JS伺服器環境+npm(JS函式庫相依管理工具)
  • Chrome瀏覽器 + React Dev Tools套件: 瀏覽執行網頁與除錯用

安裝React編譯&執行環境

大部份之前都已經安裝過了，這裡的說明就會比較簡略。

Node.js與npm

Node.js是一套JavaScript語言的執行環境，不過它是執行在網站伺服器端的。我們在開發時，使用的測試執行環境會使用Node.js作為網站伺服器平台，有許多在開發上很方便的機制，例如熱載入(hot loader)，在程式碼如果有更動時會自動重新編譯打包，以及自動更新瀏覽器。

Node.js可以直接到Node.js官方網站下載安裝程式包，目前分LTS(長期支援)與目前最新的兩種版本，要學習與開發Node.js的話，選擇最新版本，如果只是要執行而已的話，選擇LTS版本即可。官網有提供Windows、Mac OS X與Linux作業系統平台的版本，下載後按一般的軟體安裝即可。

Node.js安裝程式中會附帶npm程式，這是一個專門用來管理JavaScript套件相依性的程式工具，我們等會要使用它來安裝開發時需要的相依套件。

註: 因為Node.js發佈與升級相當快速，而且目前又有兩種發佈版本，如果你是使用Mac OSX或Linux作業系統的話，可以使用nvm(Node Version Manager)管理工具來安裝，之後可以在電腦中裝各種不同的版本與管理切換。

Yarn

Yarn是Facebook最近推出的新專案，目的是提供更快速的套件安裝，Yarn工具目前在最新版本的React與React Native中都有支援。

Windows平台可以直接下載安裝程式進行安裝。

註: Windows平台要先安裝Node.js

macOS需要先安裝Homebrew，然後用下面的指令安裝。

brew update
brew install yarn

註: macOS的安裝過程，會同時檢查電腦上是不是有安裝Node，如果沒有裝會再加裝Node.js。

你需要另外把yarn指令加到命令列中的PATH環境變數中，先開啟命令列視窗(終端機)使用以下的指令開啟設定檔(需要輸入目前的使用者密碼):

sudo nano .bash_profile

最後加入以下這行:

export PATH="$PATH:`yarn global bin`"

按"Ctrl+X"然後按Y儲存，關閉後再重啟命令列視窗(終端機)，輸入以下的指令來檢測是不是已經安裝好了:

yarn --version

註: yarn的指令很少，目前並不能完全取代npm，而且指令與npm是有點不同的，例如安裝某幾個套件(模組)時是使用yarn add。指令可以參考這裡的文件。

建立React應用(Create React App)

2016年7月時Facebook發佈了一個可以簡單建立開發的React樣版文件(boilerplate)的工具 - Create React App。可以用它很快的建立一個開發React用的專案樣版文件。

一開始先在命令列程式中輸入以下的指令，安裝這個工具程式，這會裝到全域之中，代表在任何目錄中都可以使用這個工具程式:

npm install -g create-react-app

註: 如果npm install有權限的問題，請在前面加上sudo，即輸入sudo npm install

然後先切換到要用來開發的目錄中，再來輸入以下的指令，這樣子建立一個應用程式所存放的資料夾，例如my-app資料夾:

create-react-app my-app

註: 目錄的路徑中最好不要有中文。 註: 如果你的電腦已經有安裝好yarn，上面的指令輸入後會使用yarn來進行安裝，會比用npm來得快。

在建立過程中，它會安裝所需的各種套件，經過一段時間的安裝後，輸入以下的指令切換到my-app資料夾中，然後啟動網站伺服器:

cd my-app
npm start

註: 如果你的電腦已經有安裝好yarn，也可以使用yarn start。

此時用應該會自動打開預設瀏覽器，網址是http://localhost:3000，應該會看到有出現範例程式Welcome to React的畫面，代表你已正確安裝好React的測試用執行環境了。

註: 你也可以使用其他的樣版文件專案，例如react-static-boilerplate或react-boilerplate都還有在更新維護中。使用方式與上面說的類似，不過它們內附的套件內容應該是更多。

加入ESLint工具支援

開啟package.json，加入額外的eslintConfig區域，例如下面這樣:

"eslintConfig": {
    "extends": "react-app"
  }

官方建議要把eslint所需的套件整個安裝到全域之中，以免發生有套件找不到的情況:

npm install -g [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

最後測試看看ESLint工具有沒有正常在編輯工具中會檢查然後出現警告。

註: 如果你是使用Atom編輯器的話，除了上面的步驟外，在linter-eslint外掛中還需要勾選(開啟)Use global ESLint installation這個選項。請參考這裡的說明。

加入Flow工具支援

請先確定你的電腦已經有安裝過flow-bin套件了，而且你的開發工具VSC已經有裝好對應的外掛，如果像之前我們最前面的章節你已經安裝過，就不需要再安裝。安裝的指令如下:

npm install -g flow-bin

在根目錄新增一個.flowconfig檔案，然後在裡面加入以下的內容:

[ignore]
<PROJECT_ROOT>/node_modules/fbjs/.*

[libs]
./node_modules/fbjs/flow/lib

[options]
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable

module.name_mapper='^\(.*\)\.css$' -> 'react-scripts/config/jest/CSSStub'
module.name_mapper='^\(.*\)\.\(jpg\|png\|gif\|eot\|svg\|ttf\|woff\|woff2\|mp4\|webm\)$' -> 'react-scripts/config/jest/FileStub'

suppress_type=$FlowIssue
suppress_type=$FlowFixMe

最後測試看看Flow工具有沒有正常在編輯工具中會檢查然後出現警告。如果等很久都沒反應，請在命令列工具(終端機)中輸入以下的指令:

flow check

註: 在Windows下測試時，flow檢查有可能需要一點時間才會開始正常運作。請輸入上面的指令後看會不會出現檢查的結果。

create-react-app其中也有包含flow的設定檔，官網的文件是說明，可以在packages.json中的scripts區域加入下面這一行:

"flow": "flow"

然後用命令列工具執行flow檢查的指令:

npm run flow

如果你的編輯器的Flow工具一直檢查不出來，或是一直有問題，可以試試官網提供的輸入檢查的設定方式與指令。

eject專案(選項)

注意: 這是個一次性的指令，之後不能再復原回原先的專案結構。使用前請先看下面的說明。

create-react-app這個樣版文件，把所有的設定文件都藏在node_modules/react-scripts之中，有時候要作某些設定，或是加某個新的套件時，會非常的不方便。

當然因為create-react-app是設計給初學者使用的，如果你才剛開始學習，不需要花太多時間去設定這些套件，也不需要用什麼額外的套件，那直接使用就好了。畢竟對初學者來說，專心學習一開始的基礎語法是比較重要的，學這些webpack、eslint、babel的設定，實際上有些複雜也要花時間學，不要模糊了焦點。

create-react-app提供了eject(彈出)的指令，可以把所有的設定值移出到根目錄之中，但是這是一個一次性的指令，如果你用了這個指令後，整個專案就回不去原先的專案的結構，之後的裡面的套件有新的版本要升級時，就只能靠你手動來升級每個裡面的套件。聽起來會滿嚴重的？其實並不會，這個環境只是一個編譯&開發測試React應用的環境，與我們最早之前建置的那個樣版文件的環境並沒有差太遠，只是它是由React官方團隊所作的工具，有些地方會調整的比較好，所以才會使用它，要不然你如果有時間，也可以建一個自己專用的專案樣版文件。

要eject(彈出)用create-react-app建置的專案，可以用下面的指令:

npm run eject

註: 以create-react-app工具所建立的專案，官方有提供升級裡面套件的版本的方式，請參考這一篇文章的說明。

安裝React Developer Tools(瀏覽器擴充功能)

React Developer Tools主要是用來除錯用的，而且可以觀察React應用程式在網頁上執行的一些資訊。它是一個Google Chrome瀏覽器的擴充功能，用瀏覽器連線到React Developer Tools，然後進行安裝(按右上角的"加到CHROME")，最後在瀏覽器中確定有啟用它。

安裝與設定React開發工具

這裡使用的開發工具是Visual Studio Code，這是一套免費開放原始碼的編輯工具，你可以連到Visual Studio Code網站下載適合你的電腦作業系統的版本，然後安裝它。

Visual Studio Code編輯程式並不是那種一安裝好就有完整功能的工具，它需要要安裝額外不少的套件才能用來開發React。

註: 你也可以使用Sublime Text3、Atom或是WebStorm來開發，或是其他你熟悉的JavaScript程式語言開發工具。Facebook有另一套Nuclide開發工具，不過裡面的部份功能在Windows上還不支援。

撰寫第一支React程式

打開Atom編輯程式，把React樣版文件的解壓縮目錄加到目前工作的視窗，加入專案的目錄中。

點開樹狀目錄中的src資料夾，裡面有兩個程式碼檔案，一個是index.js，另一個是App.js。

index.js是我們React應用程式的根執行檔案。用滑鼠左鍵雙點擊把它打開來。裡面的程式碼很簡單，只有以下幾行:

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

把App.js這個檔案的內容清空，改輸入以下的程式碼:

App.js

import React, { Component } from 'react'
import HelloWorld from './HelloWorld'

class App extends Component {
  render() {
    return (
      <HelloWorld text="今天就開始學React!" />
    );
  }
}

export default App

然後新增一個HelloWorld.js檔案，裡面的內容如下:

HelloWorld.js

import React, { Component } from 'react'

class HelloWorld extends Component {
    render() {
        return <h1>{this.props.text}</h1>
    }
}

export default HelloWorld

開啟命令列視窗，切換到my-app目錄後，輸入npm start(或yarn start)啟動伺服器，然後用瀏覽器開啟http://localhost:3000(實際上會自動幫你開啟瀏覽器)，看能不能看到結果。

試著改變"今天就開始學React!"這行字，看網頁上的結果會不會也跟著改變。

如果你都能正確看到結果，那麼恭喜你進入React開發的大門！

影片

Day14

結論

本文很快地介紹建置React使用的開發環境，對比之前的用於ES6學習的開發環境與工具，其實都是大同小異的設定方式，唯一的差異是多Facebook最近所發佈的yarn與create-react-app工具。這兩個工具因為最近才推出，所以有些功能還是很新，可能裡面的設定還會再變動，濳在的問題也滿多的。初學者在使用時，記得還是不要花太時間在作設定的部份，有時候你可能會遇上還沒解決的問題。

下一章開始，我們要來介紹React的各種語法，以及重要的特性，這才是我們需要學的重點。工具的本身只是輔助，掌握重要的開發知識才是最重要的。

results matching ""

    No results matching ""