5
章節5
使用元件建構使用者介面
React 核心概念
開始建構 React 應用程式之前，您需要熟悉三個 React 核心概念。這些是
- 元件
- 屬性 (Props)
- 狀態 (State)
在接下來的章節中，我們將會逐一介紹這些概念，並提供您可以繼續學習的資源。熟悉這些概念之後，我們將會向您展示如何安裝 Next.js，以及如何使用較新的 React 功能，例如伺服器元件和客戶端元件。
元件
使用者介面可以分解成稱為元件的較小建構區塊。
元件讓您可以建構獨立且可重複使用的程式碼片段。如果您將元件想像成樂高積木，您可以將這些個別的積木組合在一起，形成更大的結構。如果您需要更新使用者介面的某一部分，您可以更新特定的元件或積木。
這種模組化讓您的程式碼在成長過程中更易於維護，因為您可以新增、更新和刪除元件，而無需修改應用程式的其他部分。
React 元件的優點在於它們只是 JavaScript。讓我們從 JavaScript 的角度來看一下如何編寫 React 元件。
建立元件
在 React 中，元件就是**函式**。在您的 script 標籤內，建立一個名為 header 的新函式。
<script type="text/jsx">
const app = document.getElementById("app")
function header() {
}
const root = ReactDOM.createRoot(app);
root.render(<h1>Develop. Preview. Ship.</h1>);
</script>元件是一個**返回 UI 元素**的函式。在函式的 return 陳述式中，您可以編寫 JSX。
<script type="text/jsx">
const app = document.getElementById("app")
function header() {
return (<h1>Develop. Preview. Ship.</h1>)
}
const root = ReactDOM.createRoot(app);
root.render(<h1>Develop. Preview. Ship.</h1>);
</script>要將此元件渲染到 DOM，請將其作為 root.render() 方法的第一個參數傳遞。
<script type="text/jsx">
const app = document.getElementById("app")
function header() {
return (<h1>Develop. Preview. Ship.</h1>)
}
const root = ReactDOM.createRoot(app);
root.render(header);
</script>但是，等一下。如果您嘗試在瀏覽器中運行上述程式碼，則會出現錯誤。要使其運作，您必須執行兩件事。
首先，React 元件應大寫，以區別於一般的 HTML 和 JavaScript。
function Header() {
return <h1>Develop. Preview. Ship.</h1>;
}
const root = ReactDOM.createRoot(app);
// Capitalize the React Component
root.render(Header);其次，您使用 React 元件的方式與使用一般 HTML 標籤相同，使用角括號 <>。
function Header() {
return <h1>Develop. Preview. Ship.</h1>;
}
const root = ReactDOM.createRoot(app);
root.render(<Header />);如果您再次嘗試在瀏覽器中運行程式碼，您將會看到您的變更。
巢狀元件
應用程式通常包含的內容不僅僅是一個元件。您可以像使用一般 HTML 元素一樣，將 React 元件**巢狀**在彼此之間。
在您的範例中，建立一個名為 HomePage 的新元件。
function Header() {
return <h1>Develop. Preview. Ship.</h1>;
}
function HomePage() {
return <div></div>;
}
const root = ReactDOM.createRoot(app);
root.render(<Header />);然後將 <Header> 元件巢狀在新 <HomePage> 元件內。
function Header() {
return <h1>Develop. Preview. Ship.</h1>;
}
function HomePage() {
return (
<div>
{/* Nesting the Header component */}
<Header />
</div>
);
}
const root = ReactDOM.createRoot(app);
root.render(<Header />);元件樹
您可以繼續以這種方式巢狀 React 元件以形成元件樹。
例如，您的頂層 HomePage 元件可以包含 Header、Article 和 Footer 元件。而這些元件中的每一個又可以依次擁有自己的子元件，依此類推。例如，Header 元件可以包含 Logo、Title 和 Navigation 元件。
這種模組化格式允許您在應用程式中的不同位置重複使用元件。
在您的專案中，由於 <HomePage> 現在是您的頂層元件，因此您可以將其傳遞給 root.render() 方法。
function Header() {
return <h1>Develop. Preview. Ship.</h1>;
}
function HomePage() {
return (
<div>
<Header />
</div>
);
}
const root = ReactDOM.createRoot(app);
root.render(<HomePage />);其他資源
這有幫助嗎？