ReactJS入門－基本介紹、環境建置與專案建立

碼農思考中 / Ted

6 min readAug 11, 2023

React 入門系列篇章安排

我稍微快速介紹我預計的篇章安排，但是實際狀況仍然會視讀者或是其他狀況有所更動，但大致上會依照以下的順序：

React介紹、環境建置與專案建立
JavaScipt ES6 基本介紹
React 核心：JSX特點與介紹
React Component — 元件
React Props — 綁定資料與函式
state 與 setState
React 生命週期函數（classComponent)
React Hook — useState
React Hook — useEffect 與 useRef
React hook — Custom Hook
各階層 component 的溝通
Input與 state 的互動和使用
向api請求資料 — fetchAPI
React Router — react-router-dom
實戰練習：利用 FireBase 建置留言板

篇章細節在這裡就不放上去了。

React 是什麼？為什麼使用它？

React 是 facebook 所推出的前端框架（雖然有很多人說 React 不算框架，但是姑且就叫框架吧），使用 React 可以很方便的進行前端 UI 元件（component）開發、生命週期管理、套件管理與打包。利用 Router 也能很快的開發出SPA（single-page application），提升網站的體驗。如果你的專案規模很小、頁面功能很單純，DOM的操作並不多，也許可以不需要使用框架。

NPM 與 Node.js 安裝

npm 是用來管理專案套件的，由於 npm 在安裝 node.js 的時候會一起安裝，所以我們會直接下載 node.js 安裝就好了。

基本直接依照你的系統選擇版本就好，安裝基本就一直下一步就行。

安裝 create-react-app

2022/01/20：

如果你照著下面的方法進行，可能會得到這樣的錯誤訊息：

You are running create-react-app 4.0.0, which is behind the latest release (4.0.1). We no longer support global installation of Create React App.

從新版開始， create-react-app 不能透過全域安裝的方式來建立專案了，所以如果你還沒照著下面做，請直接執行：

npx create-react-app app-name

如果你的 nodejs 版本太低了，請執行下面幾個指令更新一下 nodejs：（Windows 直接去官方網站下載安裝檔就好）

sudo npm cache clean -f sudo npm install -g n sudo n stable

如果你已經照著下面做了，請把全域的 create-react-app 移除掉：

npm uninstall -g create-react-app

create-react-app 可以一次建立好 React 專案的各種所需（基本的架構、webpack 以及編譯器等），直接在終端機執行 npm 指令：

npm install -g create-react-app

-g 這個參數會讓整個系統都可以使用安裝的套件，如果不是必要的話，不要使用這個參數，避免各個專案的套件版本出現問題。

建立專案

到你個人的工作目錄下，執行以下指令建立第一個專案

create-react-app hello-hello-world

hello-hello-world 是專案名稱，可以改成你喜歡的。

建立完成後再執行以下兩個指令

cd hello-hello-world npm start

先移到動你的專案資料夾，再執行 npm start

然後打開瀏覽器就會看到 react 預設的網頁了。

npm start

在開發途中，由於 react 開發的網頁必須經過編譯，所以如果要預覽自己的修改、DeBug 的話就執行 npm start，React 會開一個 port 號為 3000 的本地開發預覽環境，當你修改了某個檔案之後，就會自動重新編譯。

npm rum build

如果你已經完成開發，執行這個指令後，React 就會把你的網頁打包成為單個 html 以及打包其他 js、css 以及靜態資源檔案，讓你可以部署到伺服器上。

專案目錄介紹

-build:

-public:

執行過 npm run build 後會被建立，裡面會放置部署檔案，因為還沒執行所以本篇沒有這個資料夾。

-src:

放打包前html檔的地方，favicon.ico 和 manifest.json 是跟預設的icon有關。

-node_modules:

原始的程式碼， 大部份都會編輯這個資料夾內的程式碼 。

-package.json:

開發者用 npm/yarn 所載下來的套件會放在這裡。

-package-lock.json:

設定打包工具(webpack)有關，前面提到的 npm 指令也設定在裡面。

主要是用來紀錄你在這個專案用 npm/yarn 載了哪些套件。

React virtual DOM

利用本篇最後的篇幅來簡單介紹一下 React 有特色的地方 — Virtual DOM。相較於以往直接操作 DOM， VirtualDOM 會先建立一個虛擬的 DOM ，再透過比對函數，只更新需要更新的節點部分。如果你自己打開過 index.js 會發現有一行 ReactDOM.render()，這裡就是進入 VirtualDOM 的地方，也就是 React 程式的進入點。