ReactJS 教學：建立你的第一個 React 應用程式

Hello there，未來的 React 開發者們！我很興奮能與你們一起開始這個旅程，一起探索 ReactJS 的世界。作為一個教了超過十年計算機科學的人，我可以向你們保證，React 不僅功能強大，而且學起來非常有趣。那麼，我們來開始吧！

什麼是 ReactJS？

React 是一個用於建立用戶介面的 JavaScript 函式庫。它由 Facebook 開發，並且從那時起成為世界上最受歡迎的前端函式庫之一。但別擔心，如果這聽起來讓人却步 - 我們會一步一步地來解釋。

為什麼選擇 React？

想像你正在建造一個紙牌屋。每次你想改變一些東西時，你都得小心翼翼地調整每一張紙牌，對吧？React 就像是有魔法的紙牌，當你改變其中一部分時，它們會自動調整。這使得建立和更新網頁應用程序變得更加容易和快速。

預備知識

在我們深入之前，讓我們確保我們有需要的所有東西：

1. HTML 和 CSS 的基本理解
2. 精通 JavaScript（別擔心，我們會在進行的過程中複習）
3. 一個文本編輯器（我推薦 Visual Studio Code）
4. 在你的電腦上安裝 Node.js

建立你的第一個 React 專案

讓我們開始創建我們的第一個 React 專案。我們將使用一個叫做 Create React App 的工具，它可以用一個命令來設置我們需要的所有東西。

1. 打開你的終端機或命令提示符
2. 尋航到你想要創建專案的資料夾
3. 執行以下命令：

npx create-react-app my-first-react-app

這可能會花費幾分鐘。當它完成後，進入你的新專案資料夾：

cd my-first-react-app

現在，讓我們啟動我們的應用程序：

npm start

瞧！你應該會看到一個新瀏覽器窗口打開，並且你的第一個 React 應用程序正在運行。現在它看起來沒什麼，但我們只是剛剛開始！

了解專案結構

讓我們看一下 Create React App 為我們設置了什麼：

my-first-react-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg

對我們來說，現在最重要的文件在 src 資料夾中。App.js 是我們將會寫入大部分代碼的地方。

你的第一個 React組件

在文本編輯器中打開 src/App.js。你應該會看到像這樣的東西：

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
編輯 <code>src/App.js</code> 並保存以重新加載。
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
學習 React
</a>
</header>
</div>
);
}

export default App;

這是一個 React 組件。別擔心，如果它看起來令人困惑 - 我們會一一解釋：

1. 我們導入 React 和其他必要文件
2. 我們定義一個叫做 App 的函數
3. 這個函數返回一些 JSX（JavaScript XML）- 一種特殊語法，看起來像 HTML 但允許我們在其中使用 JavaScript
4. 最後，我們導出這個組件，以便在其他地方使用

讓我們修改這個組件，讓它成為我們自己的：

import React from 'react';
import './App.css';

function App() {
return (
<div className="App">
<h1>歡迎來到我的第一個 React 應用程式！</h1>
<p>我興奮學習 React！</p>
</div>
);
}

export default App;

保存文件並檢查你的瀏覽器 - 它應該會自動更新！

使用狀態添加互動性

現在，讓我們通過添加一個計數按鈕，使我們的應用程序變得更具互動性。

將 App.js 的內容替換為以下代碼：

import React, { useState } from 'react';
import './App.css';

function App() {
const [count, setCount] = useState(0);

function handleClick() {
setCount(count + 1);
}

return (
<div className="App">
<h1>歡迎來到我的第一個 React 應用程式！</h1>
<p>我興奮學習 React！</p>
<button onClick={handleClick}>
你已經點擊我 {count} 次了
</button>
</div>
);
}

export default App;

讓我們來分解這個：

1. 我們導入 useState，一個 React �鉤子，讓我們可以在組件中添加狀態
2. 我們使用 useState(0) 創建一個狀態變量 count 和一個函數 setCount 來更新它
3. 我們定義一個 handleClick 函數來增加計數
4. 在我們的 JSX 中，我們添加一個按鈕，顯示計數並在點擊時調用 handleClick

保存並檢查你的瀏覽器 - 你現在應該有一個工作的按鈕，可以計數你的點擊！

創建一個新組件

隨著我們應用程序的增長，我們將希望將它拆分成更小、可重用的組件。讓我們為我們的計數器創建一個新組件。

創建一個新文件 src/Counter.js 並添加以下代碼：

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

function handleClick() {
setCount(count + 1);
}

return (
<div>
<button onClick={handleClick}>
你已經點擊我 {count} 次了
</button>
</div>
);
}

export default Counter;

現在，讓我們在我們的 App.js 中使用這個新組件：

import React from 'react';
import './App.css';
import Counter from './Counter';

function App() {
return (
<div className="App">
<h1>歡迎來到我的第一個 React 應用程式！</h1>
<p>我興奮學習 React！</p>
<Counter />
<Counter />
</div>
);
}

export default App;

看那！我們現在在頁上有兩個獨立的計數器。

結論

恭喜你！你剛剛建立了你的第一個 React 應用程序，學習了組件、狀態，甚至創建了一個可重用的組件。這只是你 React 旅程的開始，但你已經走了很遠。

記住，學習編程就像學習一門新語言 - 它需要練習和耐心。如果有些東西一開始不明白，別氣餒。持續實驗，持續建造，最重要的是，享受樂趣！

在我們的下一課，我們將深入探讨 React 的屬性，更複雜的狀態管理，並開始建造一個更為實質的應用程序。在那之前，快樂編程！

Credits: Image by storyset