Hello, world!

5 分鐘

開始任何程式設計課程最常見的方式是顯示文字 "Hello, world!" 我們將繼續此傳統，使用 React 來顯示這段知名的文字。

我們將建立兩個項目當作專案基礎：

index.html 檔案裝載我們的 React 應用程式。
index.jsx 檔案裝載我們的應用程式。

建立應用程式主機

在 Visual Studio Code 中，於 [public] 資料夾中建立新檔案。將其命名為 index.html。

新增下列 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Recipes</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/dist/index.js"></script>
</body>
</html>

探索程式碼

請注意 HTML 中兩個重要的行：

<div id="app"></div>
- 此行會建立 HTML 元素，裝載我們的 React 應用程式。
- 我們會依識別碼呼叫此元素，以轉譯我們的應用程式。
<script type="module" src="/dist/index.js"></script>
- 此行會載入 JavaScript。

注意

我們要匯入的檔案名稱是 index.js。因為瀏覽器無法轉譯 JSX 檔案，所以我們不會使用 index.jsx。我們一律需要搭配程式 (例如 Snowpack) 來產生 JavaScript。我們參考 JavaScript，而不是 JSX。

type="module" 屬性可讓我們在 JavaScript (或 JSX) 檔案中使用 import 陳述式。此功能對瀏覽器而言相當新。其可協助我們匯入必要的套件和元件。

建立 React 應用程式的進入點

我們需要程式碼來轉譯 HTML 內的 React 應用程式。傳統上，index.jsx 檔案是用來轉譯應用程式。

在 [src] 資料夾內建立新的檔案。將其命名為 index.jsx。

新增下列程式碼：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('app')
);

探索程式碼

我們的 index.jsx 檔案從匯入兩個重要的程式庫開始。第一個程式庫 React 可讓我們使用 JSX。其會匯入我們建立的每個元件或 JSX 檔案中。第二個程式庫 ReactDOM 會在 HTML 內轉譯我們的應用程式。

render 接受兩個參數：

要顯示的 HTML。在此情況下，HTML 是 h1 標題。
我們想要用來顯示 HTML 的 HTML 元素。我們將使用識別碼為 app 的元素。我們稍早已建立這個元素。

能夠在我們的 JavaScript 程式碼內使用 HTML，是 JSX 其中一個強大之處。

檢查頁面

既然已建立我們的程式碼，讓我們看看網站的實際運作情形！

選取 [檢視]>[終端]，或選取 Ctrl+`，以開啟 Visual Studio Code 中的整合式終端。在 Mac 上，請改選取 Cmd+`。
請使用下列命令來啟動 Snowpack 的開發伺服器：
```
npm start
```

您的預設瀏覽器應該會自動開啟並顯示您的頁面。如果頁面未自動顯示，請開啟您的瀏覽器並移至 http://localhost:8080. 您現在應該會看到您的頁面！

Screenshot showing a

探索產生的程式碼

我們的 JSX 程式碼會轉換成適當的 HTML 和 JavaScript，以在瀏覽器中顯示。開啟 Snowpack 所產生的 JavaScript 檔案：http://localhost:8080/dist/index.js. 您會看見下列程式碼：

import React from "../web_modules/react.js";
import ReactDOM from "../web_modules/react-dom.js";
ReactDOM.render(/* @__PURE__ */ React.createElement("h1", null, "Hello, world!"), document.getElementById("app"));

專注於產生 h1 元素，並將文字放在其內的程式碼：

React.createElement("h1", null, "Hello, world!")

使用此程式碼類似於使用 document.createElement 搭配 vanilla JavaScript。 Snowpack 和其他搭配程式提供的工具可讓我們使用 JSX，自動產生適當的瀏覽器友好程式碼。

Hello, world!

建立應用程式主機

探索程式碼

建立 React 應用程式的進入點

探索程式碼

檢查頁面

探索產生的程式碼

意見反應