はじめに

  • 3 分

コンポーネントは、再利用可能な自己完結型のユニットであり、React アプリケーションの中核を構成するものです。 コンポーネントには独自のプロパティ (props) を持たせることができます。こうすることで、データをコンポーネントに渡し、さまざまなシナリオで再利用できるようになります。 また、文字列やプリミティブ型よりも複雑なデータを使用し、コンポーネントの機能をさらに向上させることもできます。

目標

このモジュールでは、次の方法を学習します。

  • 動的データを表示する。
  • データの一覧を表示する。
  • コンポーネントにプロパティ (props) を追加する。
  • オブジェクトと複合データ型を使用する。

前提条件

スキル

  • HTML、CSS、および JavaScript に関する知識
  • React と React コンポーネントに関する基本的な知識
  • Node.js と npm を使用したパッケージ管理に関する知識
  • Git に関する知識

ローカルにインストールされているソフトウェア

プロジェクトを複製し、Visual Studio Code で開く

このモジュールでは、スターター プロジェクトを使用します。

  1. スターター プロジェクトを取得するには、コマンドまたはターミナル ウィンドウで次のコードを実行します。 これにより、リポジトリが複製され、Visual Studio Code でスターター フォルダーが開きます。

    # Windows
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react\code\2-component-data\start
code .

# macOS or Linux
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react/code/2-component-data/start
code .

  2. [表示]>[ターミナル] (または Windows では Ctl-` キー、Mac 上では Cmd-` キー) を選択して、Visual Studio Code 内の統合ターミナルを開きます。

  3. ターミナルで次のコードを実行して必要なパッケージをインストールし、開発サーバーを起動します。

    npm install
npm start

  4. 既定のブラウザーが自動的に開きます。 開かない場合は、お使いのブラウザーを開き、http://locahost:8080 に移動します。 スターター ページが表示されます。