React 入門指南

2025/02/01

這篇文章將帶你快速了解 React 的核心概念與安裝方式。

React 入門指南

什麼是 React？

React 是由 Facebook 開發的前端 JavaScript 函式庫，主要用於構建 UI。它採用組件化設計，使開發者可以更容易地管理與重用代碼。

安裝 React 的基本方式

安裝 React 的基本方式

你可以使用 create-react-app 來快速建立 React 專案：

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

這將會自動安裝並初始化一個 React 專案。

React 組件與 JSX

React 使用 JSX 來描述 UI 結構，類似 HTML，但可以在其中寫 JavaScript 表達式。例如：

function Welcome() {
return <h1>Hello, React!</h1>;
}

JSX 需要透過 Babel 轉譯為 JavaScript。

狀態與 Hooks 簡介

React 提供 useState Hook 來管理狀態，例如：

import { useState } from "react";

function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>點擊 {count} 次</button>;
}

這允許我們在函式組件內部使用狀態。

 下一篇: 使用 React Hooks 提升開發效率 →