從 JavaScript 到 React

使用元件構建 UI

使用者介面可以分解成一塊一塊小的構建塊,稱為 元件

元件允許你構建獨立的、可重複使用的程式碼片段。如果你將元件視為 樂高積木,你可以將這些單獨的積木組合在一起以形成更大的結構。如果你需要更新某部分的 UI,你只需更新特定的元件或積木。

這種模塊化使你的程式碼在增長時更容易維護,因為你可以輕鬆地新增、更新和刪除元件,而不會影響應用程式的其餘部分。

React 元件的好處在於它們只是 JavaScript。讓我們看看如何從 JavaScript 的角度編寫 React 元件:

創建元件

在 React 中,元件是 函數。在你的 script 標籤中,寫一個名為 header 的函數:

<script type="text/jsx"> const app = document.getElementById("app") function header() { } ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app) </script>

元件是 返回 UI 元素 的函數,在函數的 return 語句中,你可以編寫 JSX:

<script type="text/jsx"> const app = document.getElementById("app") function header() { return (<h1>Develop. Preview. Ship. 🚀</h1>) } ReactDOM.render(, app) </script>

要將此元件渲染到 DOM,你可以將其作為第一個參數傳遞給 ReactDOM.render() 方法:

<script type="text/jsx"> const app = document.getElementById("app") function header() { return (<h1>Develop. Preview. Ship. 🚀</h1>) } ReactDOM.render(header, app) </script>

但是,請稍等。如果你嘗試在瀏覽器中運行上述程式,將會收到錯誤消息。要使其正常運行,你必須做兩件事:

首先,React 元件應該大寫以區別於一般的 HTML 和 JavaScript。

function Header() { return <h1>Develop. Preview. Ship. 🚀</h1>; } // Capitalize the React Component ReactDOM.render(Header, app);

其次,你使用 React 元件的方式與使用常規 HTML 標籤的方式相同,帶有尖角括號 <>

function Header() { return <h1>Develop. Preview. Ship. 🚀</h1>; } ReactDOM.render(<Header />, app);

巢狀元件

應用程式通常包含比單個元件更多的內容。你可以像嵌套常規 HTML 元素一樣將 React 元件 嵌套 在彼此內部。

在你的範例中,創建一個名為 HomePage 的新元件:

function Header() { return <h1>Develop. Preview. Ship. 🚀</h1>; } function HomePage() { return <div></div>; } ReactDOM.render(<Header />, app);

然後將 <Header> 元件嵌套在新的 <HomePage> 元件中:

function Header() { return <h1>Develop. Preview. Ship. 🚀</h1>; } function HomePage() { return ( <div> {/* Nesting the Header component */} <Header /> </div> ); } ReactDOM.render(<Header />, app);

元件樹

你可以透過這種方式繼續嵌套 React 元件以形成元件樹。

例如,你最上層的 HomePage 元件可以包含 HeaderArticleFooter 元件。這些元件中的每一個都可以擁有自己的子元件,依此類推。例如,Header 元件可以包含 LogoTitleNavigation 元件。

這種模塊化格式讓你可以在應用程式的不同位置重複使用元件。

在你的專案中,由於 <HomePage> 現在是你的最上層元件,你可以將其傳遞給 ReactDOM.render() 方法:

function Header() { return <h1>Develop. Preview. Ship. 🚀</h1>; } function HomePage() { return ( <div> <Header /> </div> ); } ReactDOM.render(<HomePage />, app);

下一章節中,我們將討論 屬性 以及如何使用它們在元件之間傳遞資料。

小試身手

在 React 中,如何將 Header 元件嵌套在 Layout 元件中?

其他資源:

本篇文章由warren30815

warren30815

貢獻翻譯。瞭解如何參與貢獻