前へ

次へ

はじめに

完了

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

目標

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

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

前提条件

スキル

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

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

• Node.js
• コード エディター (Visual Studio Code など)。
• 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 に移動します。 スターター ページが表示されます。

続行