上一個

下一個

建立您的第一個元件

已完成

React 開發是以「元件」為基礎。 這些獨立式單位是針對重複使用和模組化所設計。 React 專案通常包含許多元件。

元件可以是函式或類別。 大部分 React 開發人員偏好使用函式來建立元件，因此我們將專注於此樣式。

應用程式通常會有一個核心元件，一般稱為 App。 App 充當應用程式的根。 我們將從建立 App 元件開始。

建立元件

1. 打開 Visual Studio Code。

2. 在 src 中建立新檔案。 將其命名為 App.jsx。

3. 新增下列程式碼：

   import React from 'react';
   
   function App() {
       return (
           <article>
               <h1>Recipe Manager</h1>
           </article>
       )
   }
   
   export default App;
   

探索程式碼

我們會藉由匯入 React 來啟動 App.jsx 檔案，以便可以使用 JSX 語法。 接著，建立名為 App 的函式，就像在 JavaScript 中建立任何其他函式一樣。 最後，使用標準 JavaScript 語法來匯出函式。 元件的核心包含在 return 陳述式中。

請注意，我們使用內嵌於 JavaScript 的 HTML (技術上的 XML)。 此功能顯示 JSX 的威力。 我們可以使用 JavaScript 的邏輯和威力，建立獨立式工作單位 (元件)。

函式 (或元件) 所傳回的 HTML 會顯示在頁面上。 標題包含文字 Recipe Manager。

注意

h1 元素會在 HTML 5 article 元素內形成巢狀。 因為 JSX 使用 XML，所以我們必須具有一個根元素。 article 元素是此元件的根元素。 當我們的應用程式增長時，此結構可讓我們新增 HTML 和其他 React 元件。

更新應用程式以使用核心元件

讓我們更新應用程式，以使用新的元件。

1. 開啟 index.jsx。

2. 在讀作 import ReactDOM from 'react-dom'; 的一行(應該是第 3 行) 之後，新增下列程式碼：

   import App from './App';
   

3. 尋找讀作 <h1>Hello, world!</h1> 的程式碼。 將此初始訊息取代為 App 元件的呼叫：

   <App />
   

探索程式碼

現在，以下是 index.jsx 的完整內容：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

我們的 import 陳述式會使用我們用於任何其他課程模組的相同語法來匯入元件。 我們現在可以使用元件，就像其是 HTML 一樣。

注意

因為 JSX 使用 XML 語法，所以我們必須關閉 App 標籤。 我們可以使用完整格式語法 <App></App> 或「自我封閉」速記 <App /> 來執行此作業。 這兩個選項的運作方式相同，但大部分的開發人員都會使用速記選項。

查看結果

儲存所有檔案。 瀏覽器會自動以結果重新整理！

繼續