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

  2-5 検索フォームを作成しよう

このパートのゴール


  • 検索フォームの見た目だけ実装しよう。
  • コンポーネントの書き方の違いを理解しよう。

検索フォームを作成しよう


「03.CSS を用意しよう」で import した semantic-ui を使用しつつ、検索フォームの見た目を作っていきます。

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

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

以下のような画面が表示されたでしょうか。

date はゴルフのプレー日、budget は上限金額、departure は移動時間計算の出発地点、duration は車での移動時間の上限です。

ここでポイントとなるのが、return(); の部分です。

React では1 つのコンポーネントからは 1 つの DOM しか返せないという決まりがあります。

DOM が複数行の場合は、return の後を();で囲みます。セミコロンも忘れないようにしましょう。

このパートの最終的なファイルは以下です。 search-golf-app/src/components/Home.jsx

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

議論

0 質問

このコースの評価は?