前のパートに戻る 完了して次のパートへ  

  2-4 Home コンポーネントを定義しよう

このパートのゴール


  • Home コンポーネントを定義して、画面に表示してみよう。

Home コンポーネントを定義しよう


アプリの開発準備が整ったので、React のコードを書いていきます。

最初に、以下のファイルを作成しましょう。

search-golf-app/src ❯ touch index.js
search-golf-app/src/components ❯ touch Home.jsx

index.js ファイルに以下のようなコードを書きます。

search-golf-app/src/index.js

このファイルは、search-golf-app/public/index.html にある以下の要素に DOM をレンダリングしますよ、という意味です。

続いて、Home.jsx を以下のように書きます。

このファイルで、React で作られた Home コンポーネントを定義します。

上記の index.js で Home コンポーネントが渡され、ReactDOM.render()関数によって本物の DOM に変換されます。

search-golf-app/src/components/Home.jsx

サーバーを立ち上げて、以下のような画面が表示されていれば成功です。

npm start

このパートはここまでです。お疲れ様でした。

議論

6 質問

このコースの評価は?