隨著網頁應用的複雜度不斷增加，前端開發者們越來越依賴於能夠提升開發效率的工具和框架。React 就是其中一個最受歡迎的前端框架。今天，我們將簡單介紹 React，並演示如何使用它構建一個簡單的組件化網頁。

什麼是 React？

React 是由 Facebook 開發的開源 JavaScript 庫，專注於建立用戶界面（UI）。它最大的特點之一是採用了組件化的設計，使得開發者可以將界面分解為可重用的獨立模塊，每個模塊負責管理自身的狀態和邏輯。React 還有另一個強大的功能是虛擬 DOM，它可以提高網頁的性能，因為只更新必要的部分而不會重新渲染整個頁面。

React 的核心概念

在開始動手之前，先了解一些 React 的核心概念：

1. Component（組件）： React 中的 UI 元素都是組件。組件可以是類型組件或函數型組件，前者使用 class，後者則使用 function。
2. JSX： React 使用一種稱為 JSX 的語法擴展，它允許我們在 JavaScript 中撰寫類似 HTML 的代碼。
3. State 和 Props： State 是組件的內部狀態，Props 則是組件之間傳遞數據的方式。

安裝 React

首先，讓我們設置一個新的 React 開發環境。你可以通過使用create-react-app這個官方工具快速建立專案：

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

執行npm start後，你將會看到 React 開發伺服器已經啟動，並且你的應用會在瀏覽器中顯示。

構建一個簡單的組件

接下來，我們來構建一個簡單的 React 組件。打開src/App.js文件，然後我們將修改其內容來顯示一個簡單的「Hello, React!」訊息。

import React from 'react';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello, React!</h1>
        <p>This is my first component-based website!</p>
      </header>
    </div>
  );
}

export default App;

在這段代碼中，我們創建了一個App函數組件，並且它返回一個簡單的 JSX 結構。這裡的 JSX 看起來很像 HTML，但它是在 JavaScript 中撰寫的。

組件間的數據傳遞

React 組件之間可以通過props來傳遞數據。讓我們來添加一個子組件，並通過props傳遞一些數據。

首先，創建一個新的文件src/Greeting.js，並寫入以下內容：

import React from 'react';

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

export default Greeting;

接著，修改App.js，將Greeting組件引入並傳遞name值：

import React from 'react';
import Greeting from './Greeting';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello, React!</h1>
        <Greeting name="iThome 鐵人賽" />
      </header>
    </div>
  );
}

export default App;

現在，當你重新刷新瀏覽器時，應該會看到訊息Welcome, iThome 鐵人賽!。這就是組件之間如何傳遞數據的一個簡單例子。

結論

這篇文章只是 React 的冰山一角。通過組件化的設計和強大的狀態管理，React 可以讓你的網頁應用更加模塊化、可維護。如果你對這個框架感興趣，可以深入學習更多的功能，如狀態管理（State Management）、效能優化等。

下一篇文章，我們將進一步探討如何使用 React 中的狀態來構建一個更加互動的應用，敬請期待！