Hello, world!

  • 5 分

プログラミング コースを始めるときの最も一般的な方法は、"Hello, world!" というテキストを表示することです。この伝統を受け継ぎ、ここでも React を使用してこの有名なテキストを表示します。

プロジェクトのベースとして 2 つの項目を作成します。

  • index.html ファイルでは、React アプリケーションがホストされます。
  • index.jsx ファイルでは、アプリケーションがマウントされます。

アプリケーション ホストを作成する

  1. Visual Studio Code で、public フォルダーに新しいファイルを作成します。 index.html という名前を付けます。

  2. 次の 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 では、2 つの重要な行に注目してください。

  • <div id="app"></div>
    • この行により、React アプリケーションをホストする HTML 要素が作成されます。
    • この要素を ID で呼び出して、アプリケーションをレンダリングします。
  • <script type="module" src="/dist/index.js"></script>
    • この行により、JavaScript が読み込まれます。

Note

インポートしているファイルの名前は index.js です。 ブラウザーで JSX ファイルをレンダリングすることはできないため、index.jsx は使用しません。 JavaScript を生成するには、常にバンドラー (Snowpack など) が必要です。 JSX ではなく JavaScript を参照します。

type="module" 属性により、JavaScript (または JSX) ファイル内で import ステートメントを使用できます。 これはブラウザーの比較的新しい機能です。 必要なパッケージとコンポーネントをインポートするのに役立ちます。

React アプリケーションのエントリ ポイントを作成する

HTML 内に React アプリケーションをレンダリングするためのコードが必要です。 従来、アプリケーションをレンダリングするには index.jsx ファイルが使用されています。

  1. src フォルダー内に新しいファイルを作成します。 index.jsx という名前を付けます。

  2. 次のコードを追加します。

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

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

コードを調べる

この index.jsx ファイルでは、最初に 2 つの重要なライブラリがインポートされます。 最初のライブラリ React により、JSX を使用できます。 これは、作成したすべてのコンポーネントまたは JSX ファイルにインポートされます。 2 番目のライブラリ ReactDOM により、アプリケーションが HTML 内にレンダリングされます。

render には、2 つのパラメーターがあります。

  • 表示する HTML。 この例では、HTML は h1 見出しになります。
  • HTML を表示するために使用する HTML 要素。 app のある要素を使用します。 この要素は、前に作成しました。

JavaScript のコーディング内で HTML を使用する機能は、JSX の機能の一部です。

ページを確認する

コードを作成したので、サイトの動作を見てみましょう。

  1. Visual Studio Code で、[表示]>[ターミナル] を選択するか、Ctrl+` キーを押して、統合ターミナルを開きます。 Mac では、代わりに Cmd+` キーを押します。

  2. 次のコマンドを使用して、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!")

このコードの使用は、vanilla JavaScript で document.createElement を使用するのに似ています。 Snowpack や他のバンドラーによって提供されているツールを使用すると、JSX を使用して、適切なブラウザー対応のコードを自動的に生成できます。