MenuCard部品を作れ

初段 / 目安 15分

陽葵さんがスマホをこちらに向けてきます。「他のお店のサイト、なんかこう……サクサクなの！うちも React ってやつにしたい！」。JS 道場で仕上げたハレノヒ珈琲のサイトを、部品の世界へ作り直す全面リニューアルの始まりです。

開幕から陽葵さんは鋭いところを突いてきました。「メニューカード、あなた8回コピペして書いてたでしょ。“部品”って概念があるって聞いたよ、私」。そのとおりです。同じ形のカードが8枚あるなら、書くのは1枚ぶんで足ります。

この一問でやるのは、MenuCard という関数を1つ作ることだけです。React では 関数がそのまま部品 になります。大文字で始まる名前を付けて JSX を返す関数を書けば、<MenuCard /> と書いて呼び出せるようになります。

カードごとに違うのは、商品名・値段・説明の3つです。この「外から渡す値」を props と呼びます。MenuCard は引数として props のオブジェクトを受け取るので、{ name, price, desc } の形で分割代入して取り出してください。中身を JSX に出すときは波かっこで包んで {name} のように書きます。値段は {price}円 のように、波かっこの外に文字を続けて書けます。

完成条件

• MenuCard という関数を作り、props として name price desc を受け取る
• カード1枚は className="card" の要素で、中に h3 の商品名、className="price" の値段、p の説明を持つ
• App から MenuCard を props を変えて3枚以上並べる

進め方

部品の関数は App と同じファイルの中に、App の外側で書きます。export default を付けるのは App だけで、MenuCard は同じファイルの中から呼ぶので何も付けなくて構いません。

呼び出すときは HTML のタグと同じ書き方で、属性のように props を渡します。文字はそのままクォートで、数はクォートではなく波かっこで渡すのが React の作法です。

画面が真っ白なときは、部品の名前を小文字で始めていないか確かめてください。小文字で始まる名前は HTML のタグ扱いになり、React はそんなタグを知らないので何も出ません。

ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。