我們可以直接在 codepen 中編寫 React 代碼，這是初始模板。該模板主要用于學習。
我更建議在本地搭建 React 開發(fā)環(huán)境，這與實踐更加接近。在初學時，我們可以通過 Create React App 創(chuàng)建項目。它是 React 初學者創(chuàng)建單頁應用的最佳方式。
在使用之前，請確保你的電腦上安裝了比較新版本的 Node.js 。
Node >= 10.16 和 npm >= 5.6
將新項目取名為 my-app，在命令行工具中，我們只需要執(zhí)行如下指令，就可以創(chuàng)建一個 React 項目
npx create-react-app my-app
具體的操作指令在命令行工具中已經(jīng)告訴了我們。
// 進入項目所在文件夾
cd my-app
// 啟動項目
yarn start
// 打包項目
yarn build
// 暴露出項目的具體配置，以便于在此基礎上擴展/修改更多配置
yarn eject
進入并啟動項目，在瀏覽器中輸入 http://localhost:3000，「通常該頁面會自動打開」，我們會看到如下界面。
注意關注命令行工具的提示。
我們可以直接在瀏覽器地址欄輸入 http://localhost:3000 訪問項目。
也可以輸入 http://192.168.2.107:3000 訪問項目。如果你的手機與電腦處于同一局域網(wǎng)中，我們也可以通過該地址在手機上訪問項目，這對于移動端開發(fā)的調(diào)試非常有用。
1
認識項目
package.json
項目的配置文件。在初學時我們只需要認識如下兩個重要的字段即可。
- dependencies
該項目的所有依賴包及其版本的描述。當我們在命令行工具中執(zhí)行如下指令時，依賴包會重新安裝
// 使用 npm
npm install
// 使用 yarn
yarn install
例如當前我們項目中，使用了 React ，在該字段下就會有如下配置
"react": "^17.0.2",
react 表示該依賴包的名稱，17.0.2 表示該依賴包的版本號。版本號之前我們看到有一個 ^ 符號。該符號表示在安裝依賴包時，會安裝當前包的最新版本。
這個細節(jié)在實踐中非常重要。一個大型項目中，依賴包比較多，如果某個依賴包更新之后產(chǎn)生了破壞性的更新，我們無法感知，當你重新安裝依賴包之后，有一定的風險導致之前的調(diào)好的功能出現(xiàn) bug。因此實踐中建議在項目創(chuàng)建之初刪除該符號，以確保依賴包版本穩(wěn)定。
- scripts
我們啟動項目時，使用的是 npm start。這里的指令就是從 scripts 字段中來的。我們可以在該字段中定義屬于我們自己的字段，例如，我們要區(qū)分不同環(huán)境時，可以自定義如下指令啟動項目
// 針對 dev 環(huán)境的啟動指令
"start:dev": "react-scripts start && node build.js dev",
// 針對 test 環(huán)境的啟動指令
"start:test": "react-scripts start && node build.js test"
然后配合自定義的 build.js 中分別處理不同的環(huán)境變量，我們就可以用 npm start:dev 啟動開發(fā)環(huán)境的項目，用 npm start:test 啟動測試環(huán)境的項目。
// 啟動開發(fā)環(huán)境的項目
npm start:dev
// 啟動測試環(huán)境的項目
npm start:test
node_modules
該文件夾是項目所有依賴包的存放地址。除了在項目初始化時安裝的所有依賴包之外，后續(xù)通過 yarn/npm 安裝的包都存放在該目錄下。
需要注意的是，當我們使用 git 管理項目時，該文件夾必須被忽略掉，我們應該在 .gitignore 中添加如下的配置
// .gitignore
/node_modules
我們不需要把該依賴包中的內(nèi)容上傳到 git 倉庫中，而應該在首次拉取 git 項目代碼之后，執(zhí)行 npm install 重新安裝依賴包。
public
項目的入口文件。通常我們會將 index.html 存放在該目錄中。構建工具會自動幫助我們補全一些邏輯，例如引入必要的 JavaScript 代碼。
對于 React 項目來說，index.html 中通常在初始情況下，只會提供如下代碼
<div id="root"></div>
項目的更多內(nèi)容，會通過 React 的 API 插入到該根節(jié)點中。例如
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
但是 React 邏輯都被打包在一個 JavaScript 文件中，頁面初始化時，需要等到該 JavaScript 文件加載完成之后才會執(zhí)行。在這個空檔時間頁面會出現(xiàn)白屏，因此為了填充這個白屏時間，我們可以在初始化時，往 root 根節(jié)點中寫入一些默認內(nèi)容：loading、骨架等
<div id="root">
<span>頁面加載中...</span>
</div>
src
所有的 React 模塊與組件代碼都存放在該目錄下。index.js 是所有 React 邏輯的入口文件。在該文件的邏輯中，所有的 React 組件被最終聚合成為一個組件 App，并通過如下代碼渲染到頁面中
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
在該項目中，每一個文件都可以是一個獨立的模塊，React 中使用 ES6 Modules 語法來引入別的模塊/組件。
在該項目的默認代碼中，我們可以看到，App 組件由如下幾個部分組成
- logo.svg
- App.css
- 一個 html 片段
在 App.js 中這些部分被聚合在一起形成一個組件。index.js 在使用時，只需要引入該組件即可
import App from './App'
