??得益于前端技術(shù)和開源的發(fā)展，前端生態(tài)日益豐富，有非常多的框架工具包，React 就是其中之一。React 本身也用到了其他的工具包。為了能高效的管理這些工具包之間的依賴關(guān)系，必須有個強有力的包管理工具。在前端社區(qū)中，Npm 是最主要的包管理工具，Npm 是 NodeJS 提供的。在開始 React 學習之前，我們需要先安裝 NodeJS。不需要害怕，我們并不需要學習 NodeJS，只需要掌握 Npm 幾個命令就夠了。
??安裝 NodeJS 很簡單，到 NodeJS 官網(wǎng)找到你需要平臺和版本下載安裝即可。筆者使用的是 ubuntu，使用的是協(xié)作的時候最新的 LTS 版本 v10.15.3。Windows 平臺可以直接通過鏈接 https://nodejs.org/dist/v10.15.3/node-v10.15.3-x64.msi 下載安裝。以下是幾個平臺的安裝命令參考。沒有提到的平臺，請打開 https://nodejs.org/en/download/ 下載。我們只需要用到最基本的 Npm 功能，對于 Npm 的版本沒有特殊的要求，選擇最新的 LTS 版本就好。
# Ubuntu
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs
# Debian, as root
curl -sL https://deb.nodesource.com/setup_10.x | bash -
apt-get install -y nodejs
# macOS
brew install node
??安裝完成后，可以用 node -v 命令和 npm -v命令驗證下是否安裝成功。
root@43910056a2ce:/data# node -v
v10.15.3
root@43910056a2ce:/data# npm -v
6.4.1
??因為 npm 安裝依賴是從國外服務(wù)器下載，受網(wǎng)絡(luò)影響大，可能出現(xiàn)異常，淘寶團隊做了一個 npm 鏡像 cnpm。cnpm 就是中國版的 npm，安裝命令如下。
#安裝 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
??React 提供了一個快速創(chuàng)建 React 工程的命令工具 create-react-app。下面我們通過 cnpm 工具來安裝 create-react-app。
cnpm install --global create-react-app
#cnpm install 是安裝命令，--global 參數(shù)告訴安裝命令將工具安裝到系統(tǒng)全局，安裝到系統(tǒng)全局的工具，可以直接在命令使用。
??后續(xù)在使用 create-react-app工具的時候，工具中還是有直接使用 npm 命令的地方，如果遇到命令執(zhí)行慢的情況，可以考慮直接配置 npm 鏡像指向 https://registry.npm.taobao.org。方法如下：
npm config set registry https://registry.npm.taobao.org
??現(xiàn)在需要安裝的依賴都完成了，可以開始 React 之旅了。我們先從一個示例工程開始，創(chuàng)建一個 helloworld 工程，命令如下：
#在當前目錄下創(chuàng)建 helloworld 工程
create-react-app helloworld
#進入工程目錄
cd helloworld
#啟動工程。create-react-app 創(chuàng)建的工程已經(jīng)包含了基礎(chǔ)示例頁面，是可以立即執(zhí)行的
npm start
??啟動命令會自動打開瀏覽器顯示工程的主頁。如果沒有自動打開，可以在瀏覽器中打開，默認的地址是 http://localhost:3000。如果默認的端口 3000 被占用，命令行會提示換一個端口。這個缺省創(chuàng)建的實例運行如圖：
??瀏覽器不要關(guān)閉，npm start 命令會一直檢測工程內(nèi)容，當工程內(nèi)容修改的時候，會立即編譯運行，瀏覽器也會自動刷新頁面，顯示最新的變更。
??項目的目錄結(jié)構(gòu)如下：
root@6ae880e801ea:/data/workspace/helloworld# tree -I node_modules
.
|-- README.md
|-- package.json
|-- public
| |-- favicon.ico
| |-- index.html
| `-- manifest.json
`-- src
|-- App.css
|-- App.js
|-- App.test.js
|-- index.css
|-- index.js
|-- logo.svg
`-- serviceWorker.js
??其中README.md 是通用的指導(dǎo)我們?nèi)绾芜\行、測試、構(gòu)建工程的簡要說明。package.json 是 NodeJS 管理項目依賴的配置文件，我們基本不用自己配置，所以可以暫時不用管這個文件。
public 目錄
favicon.ico 是網(wǎng)站 logo 縮略圖。index.html 是網(wǎng)站的入口主頁，可以根據(jù)自己的需要調(diào)整。manifest.json 文件是w3c的webapp規(guī)范，用來配置應(yīng)用的信息（比如應(yīng)用名稱、作者、icon 和描述），當用戶將應(yīng)用添加到桌面的時候，
會以這個文件中的內(nèi)容作為圖標和文字的顯示內(nèi)容。
src 目錄
App.js 是示例組件，App.css 是示例組件的樣式，App.test.js 則是示例組件的測試代碼。工程全部內(nèi)容就是這個示例組件，也就是上圖工程截圖顯示的內(nèi)容，我們暫時不用深入探究這個示例組件。
index.css 和 index.js 是主頁的樣式和代碼。代碼中除了引入依賴，只有兩行代碼，第一行是將組件 App 渲染到一個 id 為 root 的 DOM 元素。這是后面會講到的JSX 語法。第二行是和性能有關(guān)的，在性能章節(jié)再深入探討，這里可以不管，可以直接注釋掉。
logo.svg
網(wǎng)站 logo 矢量圖
serviceWorker.js
主要邏輯是用于在生產(chǎn)環(huán)境中為用戶在本地創(chuàng)建一個service worker 來緩存資源到本地，提升應(yīng)用的訪問速度，具體可以參考代碼文件中的注釋，等性能章節(jié)再深入探討。
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
??按照慣例，我們先來個 helloworld 試試。需要做的很簡單，只需要修改 src/index.js，用<H1>Hello World!</h1> 替換<App />，修改后的內(nèi)容如下：
ReactDOM.render(<h1>Hello World!</h1>, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
//serviceWorker.unregister();
??回到剛剛打開的頁面，會發(fā)現(xiàn)內(nèi)容自動刷新了（如果頁面已經(jīng)關(guān)閉，可以重新打開）。
