すべてのチャレンジは、デフォルトで未完成の状態で表示される場合があります。必要なコードを追加する空欄のセクションが含まれています。すべての不足部分を正しく入力すると、完成したコードがライブページに表示されます。

各チャレンジには、2つの補助ボタンが用意されています：
- **ヒント**：ガイドとなる小さな手がかりを表示します。
- **解答**：完成版を新しいタブで開きます。

注意

下記の短いビデオチュートリアルでも、CodeSandboxの使い方を学ぶことができます。

## CodeSandboxの使い方

## 課題：商品カードの作成
JSXを使用してシンプルな商品カードを作成し、DOMにレンダリングします。商品カードには以下を含めてください：
1. 商品画像（`img`要素）。
   - `src`属性は`imageUrl`変数と同じ値にします。
   - `alt`属性は`Computer`という文字列にします。
   - `width`属性は`256`にします。
2. 商品タイトル（`h3`要素）。
   - テキスト内容は`Computer`にします。
3. 商品価格（`span`要素）。
   - テキスト内容は`Price: $129.99`にします。
4. 商品説明（`p`要素）。
   - テキスト内容は`New Model`にします。

1. `src`属性には、値として`imageUrl`変数を指定。中括弧`{}`を使用。
2. `alt`属性には、値として文字列`"Computer"`を指定。ダブルクォーテーションで囲む。
3. `width`属性には、値として数値`256`を指定。中括弧`{}`を使用。
3. `h3`、`span`、`p`要素に正しい値が設定されていることを確認。

Reactを使用したユーザーインターフェース構築の基礎を学びます。コンポーネント、JSX、データフロー、状態管理、日常的なReactアプリケーションで使用される副作用に焦点を当てます。

Reactとは何か、そしてどのようにユーザーインターフェースをレンダリングするかを学びます。コンポーネント、JSX構文、画面上への要素の表示に焦点を当てます。

コンポーネント間でデータを渡し、UI出力を制御する方法を学びます。props、条件付きレンダリング、データリストのレンダリングに焦点を当てます。

ユーザーの操作や外部データが時間の経過とともにUIをどのように変化させるかを学びます。Reactフックを使用した状態管理と副作用の処理に焦点を当てます。

Reactコンポーネントをスタイリングする一般的な方法を学びます。インラインスタイルと外部CSSを使用したスタイルの適用に焦点を当てます。

Reactプロジェクトの実行方法とその構造について学びます。Viteを使用したプロジェクトの開始と、プロジェクトファイルのナビゲーションに焦点を当てます。

チャレンジ：Reactで要素をレンダリングする

CodeSandboxの使い方

課題：商品カードの作成