---
tags: React
title: React - 認識 React 環境建置與擴充套件
---

###### tags: `React` `Create React App` `React Developer Tools`

###### *date: 2022 / 11 / 16*

# ✏ 認識 React 環境建置與擴充套件
**React 官網**有提供因應不同開發模式所建議的環境設定，因為我們希望能建構一個 **[single-page](https://zh-hant.reactjs.org/docs/glossary.html#single-page-application)** 專案的練習，因此我們選擇 **[Create React App](https://github.com/facebook/create-react-app)** 來建立開發環境。

在此系列的筆記都會以 **Functional component** 為主。

## 使用 Create React App 建立環境
- npm 安裝 React
安裝前需確認 node.js 版本要是最新的。
- 終端機輸入

- npx create-react-app my-app(專案名稱)
- cd my-app
- npm start

## 認識資料夾架構:

- **my-app(專案名稱資料夾)**
- **node_moudules**
(下載套件/函式庫(package/library)在本地端(local)的存放位置，也就是執行 npm install ，npm 預設會將下載回來的套件都放在 node_modules。
- **public**
- **index.html**
為 **網站頁面模版**，使用 react 開發的結果會 render 至檔案的 `<div id="root"></div>`。

- **src (主要放置開發環境的檔案，只有在src資料夾內的檔案才會被 React 編譯)**
- **index.js** (所有元件的入口、StrictMode(嚴格模式))
- 開發 React 專案的進入點，會將 React 組件渲染到` public/index.html `的根元素 `<div id="root"></div>`。

- **[React.StrictMode](https://zh-hans.reactjs.org/docs/strict-mode.html#gatsby-focus-wrapper)**:
React 用來檢查元件的程式碼是否符合 **React 的開發規範** 在 **React.StrictMode** 內的元件都會被檢查。

      <React.StrictMode>
      <App />
      </React.StrictMode>

- **app.js** (元件檔案)

## 運行專案(start)與打包程式碼(build)指令:

npm start 運行專案
npm build 將寫好的程式碼，編譯並存檔

## 安裝擴充套件:
[**1. React Developer Tools**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)


- 到chrome 線上應用程式商店安裝並釘選
- 再到擴充功能選 React Developer Tools 詳細資料，選擇予許存取檔案網址，這樣在本地端運行 React 網頁時，擴充工具會變紅色
- 打開chorme 開發者工具會出現 `Components`、`Profiler`,兩個頁面。

[**2. ES7+ React/Redux/React-Native snippets**](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

可輸入關鍵字時，按下Enter後可快速生成程式碼

**3. 如何在 JSX 裡面也可以用 html的 emmet 寫法**
- 在vscode 設定搜尋 emmet 新增 js jsreact
- 在vscode 設定搜尋 files 新增 js jsreact

---
### 參考文章:

[React 官網 - 建立全新的 React 應用程式](https://zh-hant.reactjs.org/docs/create-a-new-react-app.html)
[14th鐵人賽 - 開始載入 React ，並認識擴充套件和資料夾架構 ](https://ithelp.ithome.com.tw/articles/10291442)