チュートリアル: 初心者向けの Windows 上の React

[アーティクル]
03/19/2024

Node.js を使用するのが初めての場合、このガイドは役に立ついくつかの基本事項を提供します。

いくつかの基本的な用語と概念
Visual Studio Code で React を使用してみる
API で React を使用してみる

前提条件

Windows での React のインストール
Linux 用 Windows サブシステムに React をインストールする
VS Code をインストールする Windows または WSL のどちらで React を使用するかに関係なく、Windows に VS Code をインストールすることをお勧めします。

いくつかの基本的な用語と概念

React は、ユーザーインターフェイスを構築するための JavaScript ライブラリです。

これはオープンソースなので、問題の提出やプル要求を行うことで貢献できます。 (これらのドキュメントと同じです)。
これは宣言型であるため、必要なコードを記述すれば、React がその宣言されたコードを取得し、すべての JavaScript/DOM 手順を実行して目的の結果を得ることができます。
これはコンポーネントベースであるため、アプリケーションは組み立て式の再利用可能な独立したコードモジュールを使用して作成されます。このモジュールは、それ自体の状態を管理し、React フレームワークを使用して結合できます。これにより、状態を DOM から独立して維持しながら、アプリでデータを渡すことができるようになります。
React のモットーは、「一度学習すれば、どこでも使える」ことです。この目的は、コードの再利用であり、他のテクノロジでの React UI の使用方法についての前提を作ることではなく、既存のコードを書き直さなくともコンポーネントを再利用できるようにすることです。
JSX は、React で使用するために作成された JavaScript の構文の拡張機能であり、見た目は HTML のようですが、実際には JavaScript ファイルであり、コンパイルまたは通常の JavaScript への変換が必要です。
仮想 DOM: DOM は、Document Object Model (ドキュメントオブジェクトモデル) の略で、アプリの UI を表します。アプリの UI の状態が変わるたびに、その変更を反映するために DOM が更新されます。 DOM が頻繁に更新されると、パフォーマンスが低下します。仮想 DOM は DOM を視覚的に表現したものにすぎないので、アプリの状態が変化したときに実際の DOM ではなく仮想 DOM を更新することでパフォーマンスコストが削減されます。これは、軽量のコピーのような DOM オブジェクトの表現です。
ビュー: ユーザーが見るブラウザーに表示されたものです。 React では、ビューは、ユーザーに画面に表示させたいレンダリング要素の概念に関係しています。
状態: 異なるビューによって格納されたデータを示します。通常、状態は、ユーザーが誰であるか、またユーザーが何をしているかに依存します。たとえば、Web サイトにサインインすると、自分の名前 (状態) が含まれるユーザープロファイル (ビュー) が表示される場合があります。状態データはユーザーに基づいて変化しますが、ビューは変わりません。状態は、アプリケーションに対するユーザーの対話操作のほとんどを達成するために使用されます。
コンポーネント prop は、親コンポーネントが子コンポーネントに情報を値またはデータ (オブジェクト、配列、関数を含む) として渡す方法です。 prop は読み取り専用であり、子コンポーネントが更新することはできません。

Visual Studio Code で React を使用してみる

React でアプリケーションを作成するには、さまざまな方法があります (例については、「React の概要」を参照してください)。このチュートリアルでは、Vite を使用して、機能する React アプリの設定を高速で実行して、実行中のアプリを確認し、ビルドツールに関心を向ける前にコードを試してみることに集中できるようにします。

Windows または WSL で Vite を使用して (上記の前提条件を参照してください)、新しいプロジェクトを作成します (npm create vite@latest hello-world -- --template react)。
ディレクトリを変更して新しいアプリのフォルダー内に移動し (cd hello-world)、依存関係をインストールしてから (npm install)、ローカルの開発サーバーを起動します (npm run dev)

新しい React Hello World アプリは、コンパイルされ、既定の Web ブラウザーを開いて、http://localhost:5173 で実行されていることを示します。
React アプリの実行を停止し（Ctrl + C）、次のように入力して、VS Code でコードファイルを開きます。code .
src/App.jsx ファイルを見つけ、次のようなヘッダーセクションを見つけます。
```
<p>Edit <code>src/App.jsx</code> and save to test HMR</p>
```
これを次のように変更します。
```
<p>Hello World! This is my first React app.</p>
```
ターミナルウィンドウを開き、ローカルの開発サーバーを起動します (npm run dev)。または、統合 VS Code ターミナル (Ctrl + `) を使用して、そこから開発サーバーを起動できます。

React アプリの開発を通じて、ローカル開発サーバーを実行したままにしておくことができます。すべての変更は、即座にブラウザーで http://localhost:5173 に表示されます。

アプリケーションファイルの構造

初期ファイル構造は次のようになります。

hello-world
├── node_modules 
├── README.md 
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   └── main.jsx
└── vite.config.js

手始めに、これらは知っておくべき重要なファイルとフォルダです。

index.html は、ブラウザーで実行できるように Vite が src フォルダーからコードを挿入するファイルです。 React アプリケーションのタイトルを変更する以外は、このファイルを編集しないでください。

この src フォルダーは、React アプリケーションのソースコードが存在する場所です。これは、アプリケーションをビルドするために必要なカスタムコンポーネント、CSS ファイル、およびその他のコードファイルを作成する場所です。これらのファイルは、解析とビルドを実行して最終的な React プロジェクトを作成するために、Vite のビルドツールによって処理されます。

この public フォルダーには、ブラウザーに直接提供されるすべての静的ファイルが含まれています。これらのファイルは Vite によって処理されません。

API で React を使用してみる

React で構築し、Visual StudioCode で更新した同じ Hello World を使用します。何らかのデータを表示するための API 呼び出しを追加してみましょう。

新たに開始します。 Vite によって提供されるほとんどすべての定型コードを削除し、前の手順のコードのみを保持します。

App.jsx ファイルは次のようになります。
```
import "./App.css";

function App() {
  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;
```
次に、API からデータを保存できるローカルの状態を設定します。状態は、ビューで使用するデータを格納できる場所です。

ローカル状態を追加するには、まず、コンポーネントに状態変数を追加できる useState React フックをインポートする必要があります。

また、ローカル状態を初期化する必要があります。 useState は、現在の状態と set 関数の 2 つの値の配列を返します。現在の状態を、空の配列と同様に posts で初期化された状態で呼び出します。これは、後で setPosts 関数を使用して API から POST データを入力できます。

App.jsx ファイルは次のようになります。
```
import { useState } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;
```

React アプリで使用するためのデータを使用して API を呼び出すには、.fetch JavaScript メソッドを使用します。呼び出す API は JSONPlaceholder です。これはテストおよびプロトタイプ作成用の無料の API であり、JSON 形式の偽のプレースホルダーデータを提供します。

set 関数を使用して、useEffect React フックで posts 状態を更新します。

import { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const url = "https://jsonplaceholder.typicode.com/albums/1/photos";
    fetch(url)
      .then((response) => response.json())
      .then((data) => setPosts(data));
  }, []);

  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;

API によって posts 状態に保存されるデータの内容を見てみましょう。偽の JSON API ファイルの内容の一部を次に示します。データが一覧表示される形式は、"albumId"、"id"、"title"、"url"、および "thumbnailUrl" のカテゴリを使用して確認できます。

[
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "https://via.placeholder.com/600/92c952",
    "thumbnailUrl": "https://via.placeholder.com/150/92c952"
  },
  {
    "albumId": 1,
    "id": 2,
    "title": "reprehenderit est deserunt velit ipsam",
    "url": "https://via.placeholder.com/600/771796",
    "thumbnailUrl": "https://via.placeholder.com/150/771796"
  }
]

API データを表示するためには、レンダリングされた return() ステートメント内に JSX コードを少し追加する必要があります。 map() メソッドを使用して、キーとして格納された posts オブジェクトからのデータを表示します。個別の POST では、"ID #" が付いたヘッダーに続いて、JSON データからの post.id キー値と post.title キー値が表示されます。その後に thumbnailUrl キー値に基づいて画像を表示する本文が続きます。
```
// rest of the code 
  return (
    <article>
      <h1>Posts from our API call</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>ID #{post.id} {post.title}</h2>
          <img src={post.thumbnailUrl} />
        </article>
      ))}
    </article>
  );
}

export default App;
```

その他のリソース

正式な React に関するドキュメントでは、React に関する最新の情報がすべて提供されています
React 開発者ツール用の Microsoft Edge アドオン: Microsoft Edge 開発ツールに、React での開発に役立つ [Components] と [Profiler] という 2 つのタブを追加します。
React ラーニングパスには、基本的な作業を始めるのに役立つオンラインコースモジュールが含まれています。

次の方法で共有

チュートリアル: 初心者向けの Windows 上の React

前提条件

いくつかの基本的な用語と概念

Visual Studio Code で React を使用してみる

アプリケーション ファイルの構造

API で React を使用してみる

その他のリソース

その他のリソース

アプリケーションファイルの構造