React Hello World

概要: このチュートリアルでは、React Hello World Web アプリケーションを作成する方法について学習します。

前提条件

ReactJS を使用する前に、コンピューターに Node.js と Node パッケージマネージャー (npm) がインストールされている必要があります。

最初に、Windows ではコマンドプロンプトを、Unix 系システムではターミナルを開きます。

次に、以下のコマンドを実行して Node.js のバージョンを確認します。

node --versionCode language: plaintext (plaintext)

出力

v21.3.0Code language: plaintext (plaintext)

React プロジェクトを作成

最初に、ターミナルを開き、次のコマンドを実行します。

npx create-react-app hello-worldCode language: plaintext (plaintext)

このコマンドは hello-world という新しいディレクトリを作成し、React プロジェクトのファイルとディレクトリを設定します。コマンドにより多くのファイルとディレクトリが作成されるため、数分かかります。

次に、プロジェクトディレクトリに移動します。

cd hello-worldCode language: plaintext (plaintext)

最後に、以下のコマンドを実行して、React 開発サーバーを起動します。

npm startCode language: plaintext (plaintext)

このコマンドは開発を開始し、React アプリケーションを実行します。Web ブラウザで URL http://localhost:3000 が起動します。

最後に、ターミナルで Ctrl-C を押して開発サーバーを停止します。

...
^CTerminate batch job (Y/N)? YCode language: plaintext (plaintext)

開発サーバーを停止するかどうかを確認するために、Y (はい) または N (いいえ) の文字を入力するように求められます。Y を入力し、Enter キーを押して確認します。

React プロジェクトのファイルとディレクトリの確認

お好みのエディターでプロジェクトディレクトリを開きます。以下は VS Code の React プロジェクトディレクトリです。

通常は、src ディレクトリのファイルをよく使用します。src ディレクトリには、CSS ファイルと SVG ファイルのほかに、以下の JavaScript ファイルが含まれています。

• App.js
• index.js
• reportWebVital.js
• setupTests.js

これらの JavaScript ファイルには、Web ブラウザで直接実行できないコード (JavaScript と JSX コード) が含まれています。JSX については後で説明します。

代わりに、React 開発サーバーはこれらのファイルのコードを、Web ブラウザが実行できるネイティブ JavaScript コードにトランスパイルする必要があります。

これを行うために、React 開発サーバーは次のツールを使用します。

• JavaScript コードをトランスパイルする Babel。
• 出力 JavaScript ファイルを bundle.js という単一のファイルにマージする Webpack ツール。

次の図はプロセスを示しています。

localhost:3000 で React アプリのソースコードを表示すると、bundle.js ファイルが表示されます。

<script defer src="/static/js/bundle.js"></script>Code language: HTML, XML (xml)

次の図はプロセスの仕組みを示しています。

最初に、Web ブラウザが localhost:3000 React 開発サーバーから index.html ファイルを要求します。index.html には index.js ファイルが含まれています。

次に、React 開発サーバーは Babel を使用して .js ファイルのコードをネイティブ JavaScript コードにトランスパイルし、Webpack を使用してこれらのファイルを bundle.js ファイルにマージします。

最後に、React 開発サーバーは bundle.js ファイルを Web ブラウザに配信して、リクエストに応答します。

プロジェクトのディレクトリには、React アプリケーションを適切に実行するために必要な次のファイルとディレクトリがあります。

React で Hello, World! メッセージを表示するページを作成するには、public ディレクトリの index.html ファイルと src ディレクトリのすべてのファイルを削除します。さらに、 index.js ファイルを完全に新しく作成します。

React Hello World アプリの作成

次のファイルが index.js ファイルの完成したコードです。

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

const el = document.querySelector('#root');
const root = ReactDOM.createRoot(el);

function App() {
  return <h1>Hello, World!</h1>;
}

root.render(<App />);
Code language: JavaScript (javascript)

仕組み。

最初に、React ライブラリをインポートします。

import React from 'react';
import ReactDOM from 'react-dom/client';Code language: JavaScript (javascript)

これらの react ライブラリはさまざまな目的で動作します。

• React ライブラリは、コンポーネントを定義し、複数のコンポーネントがどのように連携するかを定義できます。
• ReactDOM ライブラリは、Web ブラウザーにコンポーネントを表示する方法を知っています。

次に、public/index.html ファイルのルート要素を選択します。

const el = document.querySelector('#root');Code language: JavaScript (javascript)

index.html ファイルを開くと、id が root の div 要素が表示されます。

 <div id="root"></div>Code language: HTML, XML (xml)

次に、createRoot() 関数を呼び出すことで React に root 要素の制御を指示します。

const root = ReactDOM.createRoot(el);Code language: JavaScript (javascript)

その後、App という React コンポーネントを定義します。

function App() {
  return <h1>Hello, World!</h1>;
}Code language: JavaScript (javascript)

React では、コンポーネントは JSX を返す JavaScript 関数 です。

JSX は JavaScript XML の略で、HTML ライクなコードを JavaScript コード内で直接記述することを可能にする JavaScript の拡張機能です。

この例では、App コンポーネントは次の JSX コードを返します。

<h1>Hello, World!</h1>Code language: HTML, XML (xml)

開発サーバーを実行すると、Babel はこの JSX コードを次の JavaScript コードに変換します。

import { jsx as _jsx } from "react/jsx-runtime";
/*#__PURE__*/_jsx("h1", {
  children: "Hello, World!"
});Code language: JavaScript (javascript)

出力コードでは

• 最初に、ライブラリの react/jsx-runtime から jsx を _jsx 関数としてインポートします。
• 次に、_jsx 関数を呼び出して内容付きの h1 タグを生成します。

Babel からの JSX の出力 JavaScript コードは将来的に変更される場合があります。ただし、その目標は "Hello, World!" というテキスト付き h1 HTML タグを生成することと同じです。

JSX の変換されたバージョンを表示したい場合は、babeljs サイトに移動し、JSX コードを入力して JavaScript 出力コードを表示できます。

最後に、React コンポーネントを画面に表示します。

root.render(<App />);Code language: HTML, XML (xml)

開発サーバーを実行すると、メッセージが画面に表示されます。

まとめ

• React コンポーネントは JSX を返す関数です。
• JSX は、JavaScript コード内で直接 HTML ライクなコードを記述できるようにする JavaScript の拡張機能です。
• React 開発サーバーは Babel を使用して JSX コードを JavaScript コードに変換し、webpack を使用して出力ファイルをマージして bundle.js ファイルを作成し、Web ブラウザーで React アプリケーションを実行します。