ThisWeb
資深前端工程師
發佈/更新於
和 2000+ 工程師一起學習軟體、AI 開發技巧，每週一收穫 1 篇技術內容、1 段職涯分享、1 個最新資訊！
React 是當今前端開發中最熱門的技術之一，不管你想要轉職前端，還是後端想做 Side Project，甚至是想利用 AI 來打造自己的網頁 App，理解 React 的基礎概念與環境設置都是入門的第一步。
本篇文章將帶你認識什麼是 React、它的特色與優勢，以及如何設置開發環境，幫助你快速開始你的 React 學習之旅。
React 是一個由 Facebook 開發的開源 JavaScript 函式庫，專為構建高效、可維護的用戶界面（UI）而設計。
它特別適合用於開發單頁應用（Single Page Applications, SPA），讓使用者不需要刷新頁面並享受更流暢的使用體驗，雖然官方聲稱 React 是一個函式庫，但 React 的生態完整性，說他是一個框架也不為過。
React 的核心理念是「組件化」。它將複雜的頁面拆解成一個個獨立的、可重複使用的組件，每個組件負責自身的邏輯和渲染。當數據發生變化時，React 會通過「虛擬 DOM（Virtual DOM）」來更有效率的更新頁面，減少直接操作真實 DOM 的開銷，進而提升性能。
簡單來說，React 讓你可以用更直觀、更模組化的方式開發前端應用，特別適合那些需要頻繁更新的動態網站。
接著讓我們從技術層面和現實層面來討論為甚麼要學 React。
在過去，使用原生 JavaScript 開發大型 web 應用是一件非常困難的事情，除了一堆商業、UI、功能的邏輯交雜在一起，我們還需樣管理成百上千個 DOM 元素、處理大量狀態、實現可重用 UI 組件或特效等等問題，很容易讓程式碼變得冗餘、難以維護。
而 React 前端框架的出現解決了這些痛點。它提出了一種全新的構建用戶界面 (UI) 的方式，也改變了前端開發的環境。
學習 React 並不是為了替代原生 JavaScript，而是為了在一定層面上簡化和提高大型應用的開發效率。而 React 的設計思想也能幫助我們構建優雅、高效、可擴展的前端應用，並且這些思想也能夠讓我們在軟體領域走的更深更遠。
因為 React 提高了前端的開發效率，越來越多公司拋棄 JQuery 並選擇 React，也因此豐富了 React 的生態系統，有龐大的開發者社群，提供很多封裝好的工具或函式庫、UI 庫，並也提供更多的工作機會。
也因此，不管是為了更快的開發還是找工作，或是培養更深度的程式設計思想，學習前端框架是必要的路程之一。
延伸閱讀：
React 之所以受到廣泛歡迎，除了背靠大公司 Facebook 以外，它獨特的設計與功能也受到開發者的支持和青睞。下面我就舉出 React 的 5 大特色：
簡單說，React 能夠在眾多框架中脫穎而出，這是因為其高性能、組件靈活性，以及背靠大公司和強大的生態系統。
在學習 React 前，你需要掌握一些基礎知識，因為 React 是建立在這些知識上的前端框架，如果你是第一次接觸網頁的新手，可以先從 W3Schools 開始學習基礎知識～以下是學習 React 前應具備的技能
=>）、解構賦值（{a, b} = obj）、模組導入（import），這些在 React 中非常常見。雖然不是必須，但能讓你的代碼更簡潔高效。有了這些基礎，你就可以更輕鬆地進入 React 的學習。
React 與原生 JavaScript 在開發方式上有很大的不同，
大致了解 React 後，我們就可以來建置 React 環境了，設置 React 環境的步驟不會很難，只要照著以下的步驟就能順利完成，步驟只有 2 步，分為：
接著就可以運行 React 開始寫程式了，沒錯就這麼簡單～
到 Node.js 的官網，點擊畫面中的 Download Node.js，下載完後行安裝即可。
安裝過程基本上就是一直按“繼續”就好，不需要額外什麼設定。
等他安裝完後這一部就完成了，我們可以在終端機中輸入 node -v 和 npm -v 確認 Node.js 和 npm 已正確安裝。
如果你是 Mac 用戶，推薦你使用 Warp 這個終端機，而如果你是 windows 用戶，可以使用 windows terminal，下載後打開即可在裡面輸入下面的指令，來檢查是否有正確安裝：
node -v
npm -v
如果正確安裝，他會顯示你的 node 和 npm 版本。
當然，你也可以直接使用 vs code 內建的 terminal 來執行命令，只要按 `ctrl + `` 就可以打開並輸入命令。
安裝完 Node.js 後，接著就可以來建置 React 環境了。
通常有兩種方法可以建置 React：
第一種是官方的指令，第二個則是使用現在更流行的工具來更快建置 React 專案，兩個各有優缺點，但現在只是要練習，推薦直接使用第二種更快速的方式
1. 全局安裝 Create React App：在終端機中執行以下命令：-g 的意思是 global，也就是在電腦上安裝這個指令。
2. 建立新的 React 專案：接著使用指令創建你的 react app
3. 進入專案目錄：利用 cd 指令移動到你的 react app 目錄
4. 啟動開發伺服器:
接下來來看用 vite 的方式～
使用 vite 建置 React 的方法簡單一點，步驟是：
1. 使用 Vite 建立新的 React 專案: 在終端機中執行以下命令：
2. 進入專案目錄：
3. 安裝相依性：
4. 啟動開發伺服器：
到這邊就建置完成了，非常簡單吧！
當你用 cli 快速建立出來專案後，新手可能會看到裡面有一堆資料夾，不知道從哪裡下手，這邊也簡單介紹一下每個目錄裡面是幹嘛的：
有時候我們也會新增 style/ 資料夾來放相關的樣式，或是 lib/ 資料夾放其他輔助的程式邏輯。
當我們建置完環境，準備正式進入 React 之前，要先來說說 React 幾個很重要觀念，這些觀念可以說是適用於整個前端生態包括其它框架，很多新手在接觸 React 或其它框架時，會覺得很不習慣或不好上手，有很大一部份就是因為沒有先建立這些的觀念，所以我會建議先花一點時間理解一下這 5 個重要觀念喔！分別是：
JSX 是 React 很重要也很基本的語法，他就像是在 JS 裡寫 HTML，這邊做個簡單的示範，我們先宣告一個變數 title，並且給他一個 <h1 /> 的值，就像下面這樣，是不是蠻像在 JS 裡寫 HTML 的呢？
JSX 語法的強大之處在於，我們可以用花括號 {} 來搭配其他 JavaScript 的變數，比如我們希望 title 可以重複使用，能夠給他不同的 message 來顯示不同的標題。
我們就能像下面這樣把 { message } 放到 title 中：這就是 JSX 的好處。
更進階的用法，可以搭配 template literals 樣板字面值 來使用，例如：
當然我們也可以添加 HTML 的屬性在 JSX 裡，利如 class、id、data-* 等等常見的 HTML 屬性，但要注意的是，因為我們是在 JS 裡，所以有些語法會和在 HTML 裡不太一樣。
className : 在 JSX 裡如果要寫 class，必須要寫成 className這是因為在 JS 中，已經有 class 這個關鍵字了，所以要用 className 代替。
比如說，點擊事件是 onclick，但在 JSX 裡就要用 onClick（ C 是大寫！）
但 aria-* 和 data-* 就不需要，因為中間已經有 - 連接了。
補充：其實 JSX 在最後也會被轉譯成 JS 格式，例如
這個轉換過程是由 Babel 等工具完成的，我們現在不太需要關心具體的實現。
第二個重要的觀念是 Component 組件（有些人也稱為元件）可以想像一個頁面是好幾個組件所組成的，像是一般的網站可能會有 Header 組件、Button 組件、Footer 組件 ... 等等。每個組件都擁有自己的結構、樣式、行為邏輯。
以往我們用原生 JS，如果網頁上有很多個類似的按鈕，我們可能會重複寫非常多類似的邏輯或樣式：
每個 button 又要寫額外的 style 或事件邏輯，這會讓網站難以維護。
所以組件的好處就是可以讓我們重複使用相同的結構，而在 React 裡，一切皆是函數，一個函數就代表一個組件。
舉個簡單例子，我們可以創建一個 Button 函數組件，並且將 JSX 用 括號 () 括起來：
Button 函數返回的值就是上面提到的 JSX 。要注意的有三件事情
我們要用一個更大的父元素將其包起來：
在 React 中，我們也可以用一個空的 tag <> 來包住子元素，這個在 React 裡稱為 Fragment 組件，空 tag 是 Fragment 組件的簡寫。
建立好 Button 組件後，我們就可以在需要的地方直接使用 <Button /> 來使用組件。
下一步，如果我們希望可以單獨控制每個 <Button /> 的樣式、事件等等， props（屬性）就可以做到！
我們可以傳入參數給 React 函數組件，也就是所謂的 Props 屬性，這樣的好處是讓組件的複用性更高，比如說，我們希望可以自由地調整 Button 的 Background 和文字，並且想針對不同的 Button 有不同的點擊效果，我們就可以稍微改寫一下上面的例子：
這個 Button 組件接收三個屬性參數: color 、 text 和 onClick。當我們使用這個組件時,只需要傳入不同的屬性值，就能夠快速打造多個有相同架構的按鈕:
這樣就能渲染出兩個不同顏色和文字的按鈕，並且有不同的 console。
我們可以把 props 想像成組件的 "inputs" 或 "參數"，它們決定了組件的外觀和行為。比如前面 Button 組件的例子，color 、 text 和 onClick 就是組件的三個參數。
所以組件化的優勢在於可重用性。一旦創建好一個通用組件，無論在應用的任何地方，我們都可以輕鬆地複用它。這種模塊化設計大大提高了開發效率和程式的可維護性。
當然，我們也可以使用 ES6 的解構語法來簡化程式：
現在我們已經能在網站的每個地方重複使用這個 Button 了！
不過現在有個新的需求，PM 希望用戶點擊按鈕之後，可以更改按鈕的文字，我們該怎麼做呢？這就要提到狀態 state。
狀態(state) 和屬性(props) 是新手很容易搞混的地方！
每個組件都可以有自己的狀態，當狀態更新的時候，畫面就會跟著更新，如果我們想在 React 中使用狀態，需要使用 useState，就像這樣：
需要傳入一個初始值，如果想要改變狀態的值，只能用setState** 來改變來告訴 React 說要更新畫面**，所以我們可以這樣改寫 Button 組件：
上面程式碼解釋是：
useState 創建一個狀態變量 myText 和一個用來更新這個狀態的函式 setMyText。changeText 的函式，當調用這個函式時，它會使用 setMyText 函式來更新 myText 狀態的值為"你點擊我了！"changeText 函式，從而更新按鈕上顯示的文字。利用狀態，就能告訴 React 說要更新畫面了！
React 的另一個強大特色就是「Hooks」，它可以讓我們在組件中使用各種 React 功能的機制。
事實上，useState 就是第一個你接觸到的 Hook，而 Hooks 的世界遠不止這樣。
你可以把 Hook 想像成模組，而 React 組件是一台機器（比如一台桌上型電腦），這個機器一開始只能做一些很基礎的事情，比如顯示畫面（return JSX）。
但我們總是會有一些額外需求，比如記錄狀態（用戶點了幾次按鈕）、在頁面載入時做些事情（發 API）、操作某個元素（聚焦輸入框）等等。
這時候你會想：「我要怎麼做這些額外的功能？」
Hooks 就是提供額外功能的模組，他可以很輕鬆地引入做使用，像是useState 讓我們引入「狀態模組」，能根據狀態改變畫面。
這個設計的厲害之處在於：你原本只是一個單純的函數，透過 Hook，一個個裝進去，就有了狀態、有了生命週期、有了更多互動能力。
以上就是對 React 基礎概念的詳細解釋，希望通過案例和比喻，能讓你對 JSX、組件、props、state 核心理念有初步的理解。
最後簡單總結這個篇幅的重點：
{} 來結合 JS 的語法。useState 才能宣告狀態。看到這邊，相信你對 React 已經有一個基本的認識，如果你已經下定決心學習 React 了，這邊也推薦幾個很不錯的資源，讓你能快速開始學習：
node -var
v20.16.0
npm -v
10.8.1npm install -g create-react-appcreate-react-app your-app-namecd your-app-namenpm startnpm create vite@latest my-app --template reactcd my-appnpm installnpm run devmy-app/
├── node_modules/ # 套件資料夾
├── public/ # 靜態資源
├── src/ # 主要的 React 檔案
│ ├── App.js # 主要的 React 組件
│ ├── index.js # 程式進入點
│ ├── components/ # 可存放額外的組件
├── package.json # 專案資訊與依賴
├── README.md # 項目說明文件
└── ...const title = <h1>Hello, world!</h1>const message = 'Hello, World!'
const title = <h1>{ message }</h1>
// <h1>Hello, world!</h1>const message = 'Hello, World!'
const title = <h1>{ `This is my message: "${message}"`}</h1>
//<h1>This is my message: "Hello, world!"</h1>const title = <h1 class="heading">{ message }</h1> // 錯誤
const title = <h1 className="heading">{ message }</h1> // 正確const title = <h1 onclick={() => alert('hello')}>{ message }</h1> // 錯誤
const title = <h1 onClick={() => alert('hello')}>{ message }</h1> // 正確const message = 'Hello, World!';
const element = <h1>{message}</h1>;
// 變成
const message = 'Hello, World!';
const element = React.createElement('h1', null, message);<button class="btn btn-primary">My Button</button>
<button class="btn btn-outline">My Button</button>
<button class="btn btn-underscore">My Button</button>function Button() {
return (
<button class="btn">
My Button
</button>
);
}// 錯誤
function Button() {
return (
<label>This is a button</label>
<button class="btn">
My Button
</button>
);
}// 正確
function Button() {
return (
<div>
<label>This is a button</label>
<button class="btn">
My Button
</button>
</div>
);
}// 正確
function Button() {
return (
<>
<label>This is a button</label>
<button class="btn">
My Button
</button>
</>
);
}function Button(props) {
return (
<button
onClick={props.onClick}
style={{backgroundColor: props.color}}
>
{props.text}
</button>
);
}<Button color="blue" text="Click Me" onClick={console.log('you click me')} />
<Button color="red" text="Don't Click" onClick={console.log('don't click)}/>function Button({ color, text, onClick }) {
return (
<button
onClick={onClick}
style={{backgroundColor: color}}>
{text}
</button>
);
}const [myText, setMyText] = useState(props.text);function Button(props) {
const [myText, setMyText] = useState(props.text) // 這是在 React 中宣告 state 的語法
const changeText = () => {
setMyText('你點擊我了！') // 並且我們只能用 set... 來更改 state
}
return (
<button
onClick={changeText}
style={{backgroundColor: props.color}}>
{myText}
</button>
);
}