ReactJS - 開發範例：初學者的全面指南

Hello there, aspiring developers! I'm thrilled to be your guide on this exciting journey into the world of ReactJS. As someone who's been teaching computer science for over a decade, I've seen countless students light up when they grasp the power of React. So, let's dive in and create something amazing together!

ReactJS - Example

什麼是 ReactJS？

在我們進入範例之前，讓我們快速了解一下 ReactJS 是什麼。想像你正在用樂高積木蓋房子。ReactJS 就像是有一套神奇的樂高積木，它們可以自己改變形狀和顏色！它是一個 JavaScript 函式庫，幫助我們以非常智能和高效的方式建立用戶界面（即你看到並與之互動的網站和應用程序的部分）。

ReactJS 的特點

讓我們看看一些讓 React 變得如此特別的主要特點：

特點	描述
單元化	React 讓我們使用可重用的部件（稱為元件）來建立 UI
虛擬 DOM	實際 DOM 的輕量級副本，以便更快更新
JSX	一種語法擴展，讓我們能在 JavaScript 中寫出類似 HTML 的代碼
單向數據流	數據只在一個方向上流動，使我們的應用程序更可預測
React Native	讓我們能使用 React 來建立移動應用程序

現在我們已經有了一個概覽，讓我們創建一個簡單的 React 範例，來看看這些特點在實際操作中的運用！

設置我們的 React 開發環境

首先，我們需要設置我們的開發環境。別擔心，這其實比想像中要容易！我們將使用一個叫做 Create React App 的工具，它只需一個命令就可以為我們設置一切。

打開你的終端機並輸入：

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

Voila！你剛剛創建了你的第一個 React 應用程序。如果你打開瀏覽器並訪問 http://localhost:3000，你應該會看到運行的默認 React 應用程序。

創建我們的第一個元件

現在，讓我們創建我們的第一個 React 元件。我們將創建一個簡單的問候元件，對某人說 "Hello"。

打開 src/App.js 檔案並將其內容替換為以下代碼：

import React from 'react';

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

function App() {
return (
<div className="App">
<Greeting name="React Learner" />
</div>
);
}

export default App;

讓我們分解一下這段代碼：

我們導入 React（即使我們沒有明確使用它，但它是 JSX 所需要的）。
我們定義一個 Greeting 元件，它接受 props（屬性）作為參數。
Greeting 元件返回 JSX，這看起來像 HTML 但實際上是 JavaScript。
我們在我們的 App 元件中使用 Greeting 元件，並傳遞一個 name 屬性。

當你保存這個檔案時，你應該會在瀏覽器中看到 "Hello, React Learner!"。恭喜你，你剛剛創建了你的第一個 React 元件！

給我們的元件添加狀態

現在，讓我們通過添加狀態來使我們的應用程序更具互動性。我們將創建一個按鈕，當點擊時，會改變我們問候中的名字。

更新你的 App.js 以看起來像這樣：

import React, { useState } from 'react';

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

function App() {
const [name, setName] = useState('React Learner');

const changeName = () => {
setName('React Expert');
};

return (
<div className="App">
<Greeting name={name} />
<button onClick={changeName}>成為專家</button>
</div>
);
}

export default App;

這裡是新增的部分：

我們導入 useState，一個 React �鉤子，讓我們可以為我們的元件添加狀態。
我們使用 useState 來創建一個 name 狀態變量以及一個 setName 函數來更新它。
我們創建一個 changeName 函數，它更新我們的 name 狀態。
我們添加一個按鈕，當點擊時會調用 changeName。

現在，當你點擊 "成為專家" 按鈕時，問候應該會從 "Hello, React Learner!" 變為 "Hello, React Expert!"。這演示了 React 的單向數據流：狀態的改變會觸發我們元件的重渲染。

使用虛擬 DOM

你可能會好奇，"我們點擊按鈕時，為什麼整個頁面沒有重新加載？" 這就是 React 的虛擬 DOM 發揮作用的地方。當我們改變狀態時，React 會創建一個新的虛擬 DOM 树，與前一個進行比較，然後只更新實際 DOM 中已改變的部分。這使得我們的應用程序非常快速和高效！

結論

好了，各位！我們創建了一個簡單的 React 應用程序，演示了 React 的一些核心特點：元件、屬性、狀態和虛擬 DOM。我們只是稍微 touched 了一下 React 的表面，但我希望這個範例讓你對它的能力和靈活性有了一個初步的認識。

記住，學習編程就像學習一門新語言。這需要時間、練習和耐心。如果一切不是立刻就能理解，不要氣餒。持續嘗試，持續建造，最重要的是，樂在其中！

在我們的下一次課程中，我們將深入更多進階的 React 概念。在那之前，快樂編程，願你的元件總是能平滑渲染！

Credits: Image by storyset