2023-12-14|閱讀時間 ‧ 約 8 分鐘

建立React專案 – React 白話文運動 08

前言

前一篇文章介紹了三個名詞，分別是：Babel 是什麼？Webpack 是什麼？Npm 是什麼？

這一篇則是會手把手建立 React 專案，包含：建置環境、建立 React 專案、啟動專案、如何使用 React 擴充套件。

建置環境

在建立一個 React App 有一切工具是需要先從網路上下載的，這些工具在前幾篇文章都有介紹過。

Node.js

Node.js 裡面有內建的 npm 服務，可以提供我們快速下載 React 套件或是其他的套件。

安裝React的工具 Create React App 就是需要將 JavaScript 指令在安裝在電腦上運作

來到官網，右上角可以選擇語言，有支援繁體中文介面

LTS：是一個穩定的版本，由官方長期維護，通常持續30個月以上
Current：有最新功能，較不穩定

如果要確認是否有安裝成功，不管是 Window、MacOS、Linux，皆可以打開終端機（terminal）輸入以下指令，就能知道是否有安裝完成。

node -v

建立React專案

方式一：官網 CRA 指令建置

Node環境建置好之後，再來就是建置我們第一個 React 專案，這邊我偏好使用React官網的教學流程來教學，雖然也有其他快速建置專案的方法。

當 Node.js 確定安裝成功之後，在 terminal 輸入以下的指令，就可以在對應的位子建立一個 my-app 的資料夾，裡面放了對應的檔案以及資料夾。

npx create-react-app my-app

以下是資料夾的結構，my-app 資料夾中會有三個資料夾以及三個檔案

其中 node_modules 裡面會放置各種的套件，透過 npm install 安裝的套件也會放置在這個資料夾，package.json 則是會針對這個專案進行一些設定。

/my-app
	-/public
	-/node_modules      
	-/src
	-package.json    
	-README.md         
	-package-lock.json

啟動專案

建置完成專案之後，要如何啟動專案呢？

透過下列兩行指令就可以啟動，第一行的指令為進入 my-app 資料夾，第二行指令為啟動此份專案。

cd my-app
npm start

如果成功執行之後，跑出這個畫面，代表我們已經成功建立自己的第一隻 React 專案。

建立React專案-Hogan與小波-Hogan.BLab

方法二：自建環境

搭環境也可以使用自建的方式，包含前一篇介紹的 Webpack | Npm | Babel，並且全程都是使用指令的方式，將所需要的功能加入並且建置。

Webpack 是什麼？

Webpack 是一個模組化打包工具，其主要功能是將專案中的各種檔案，包括 JavaScript、CSS、LESS、SCSS、JSX 等，整合成一個或多個最終的檔案。這樣的模組化打包有助於提高開發效率，尤其在大型專案中，我們可以將功能模組化拆分，進而實現程式碼重用和測試的便利性。

Webpack 不僅僅是一個打包工具，它還提供了一系列強大的功能，例如程式碼拆分（Code Splitting），這允許將程式碼拆分成多個區塊，僅在需要時載入，以提升頁面載入速度。同時，模組化（Modulize）是 Webpack 中的核心概念，通過將大型功能拆分成小型檔案和函式，實現程式碼的結構清晰，易於維護和測試。

Npm 是什麼？

Npm 是世界上最大的軟體註冊中心。來自各大洲的開源開發人員使用 npm 來共享和借用軟體模組包，許多公司也使用 npm 來管理私人開發。

Npm 全名為 Node Package Manager，我們可以透過 Node 裡面的 npm cli 工具進行套件的安裝以及管理。

舉例來說，如果想要使用 React 套件，只需要在終端機（terminal）輸入指令，npm 就會自動從Registry 中尋找 react 這個前端框架，並且下載至 node_modules 資料夾中。

Babel 是什麼？

Babel 是一個不可或缺的工具。它的主要功能是將最新版本的 JavaScript 語法，尤其是 ECMAScript 6（ES6）的語法，轉換成瀏覽器能夠理解和執行的舊版本 JavaScript。

ES6 引入了許多強大的功能，如箭頭函數、模板字串、解構賦值等，但由於瀏覽器的支援度不同，為了確保跨瀏覽器相容性，我們需要使用 Babel 進行編譯。

另外，當開發使用 JSX 語法的 React 應用程式時，同樣需要 Babel 進行編譯。JSX 是一種 JavaScript 語法擴充，用來描述 React 元件的結構。它使得在 JavaScript 中撰寫類似 HTML 的標記成為可能，但瀏覽器無法直接執行 JSX 語法，因此需要 Babel 將其轉換成純 JavaScript。