以下からv20のNodeをインストールしてください。 （2024年1月現在20.11.0 LTSを推奨）
複数のバージョンをインストールしたい場合はnvsを推奨します。
node -v を実行して v20.0.0 以上のバージョンが表示されれば正しくインストールできています。
まずはディレクトリに移動して、必要なライブラリをインストールします。
cd typescript/simple-mercari-web
npm ci以下のコマンドでアプリを起動させた後、ブラウザからhttp://localhost:3000/にアクセスします。
npm startサーバー(Python/Go)もローカルで立ち上げておきましょう。 このシンプルな画面では、以下の二つのことができるようになっています。
- 新しい商品の登録 (Listing)
- 商品の一覧の閲覧 (ItemList)
これらは、それぞれsrc/components/Listingとsrc/components/ItemListというコンポーネントによって作られており、App.tsxから呼び出されています。
📌 サンプルコードはReactで書かれていますが、Reactの理解は必須ではありません。
Listingのフォームを使って、新しい商品を登録してみましょう。この画面では、名前、カテゴリ、画像が登録できるようになっています。
STEP3で名前とカテゴリのみで出品をするAPIを作った人は、typescript/simple-mercari-web/src/components/Listing/Listing.tsxを編集して画像のフィールドを削除しておきましょう。
この画面では、商品の画像がBuild@Mercariのロゴになっています。http://localhost:9000/image/<item_id>.jpgを画像として指定し、一覧画面でそれぞれの画像を表示してみましょう。
この二つのコンポーネントのスタイルは、CSSによって管理されています。
どのような変更が加えられるのかを確認するため、まずItemListコンポーネントのCSSを編集してみましょう。App.cssの中に、この二つのコンポーネントのスタイルが指定されています。ここで指定したスタイルは、classNameというattributeを通じて適用することができます(e.g. <div className='Listing'></div>)。
.Listing {
...
}
.ItemList {
...
}CSSだけではなく、各コンポーネントでreturnされているHTMLタグも変更してみましょう。
現在のItemListでは、それぞれのアイテムが上から一つずつ表示されています。以下のレファレンスを参考に、グリッドを使ってアイテムを表示してみましょう。
📖 References