3-1. シンプルなコンポーネントを作る

関数コンポーネントの基本を学びます

React - 第1章: React基礎 - コンポーネントとJSX

📚

関連する教科書第1章: React基礎 - コンポーネントとJSX

課題：シンプルなコンポーネントを作ろう

Reactでは、UIをコンポーネントという部品に分けて作ります。まずは、シンプルなコンポーネントを作ってみましょう。

やること

1.Greeting コンポーネントを作る
2.「こんにちは！」というメッセージを表示する
3.App コンポーネントで Greeting を使う

コンポーネントの書き方

関数コンポーネントは、JSXを返す関数です：

function コンポーネント名() {
  return (
    <div>
      表示する内容
    </div>
  );
}

使い方：

function App() {
  return (
    <div>
      <コンポーネント名 />
    </div>
  );
}

ポイント：コンポーネント名は必ず大文字で始めます。

期待される出力

こんにちは！

function Greeting() {
  // ここに「こんにちは！」を表示するコードを書いてください
  
}

function App() {
  return (
    <div>
      {/* ここでGreetingコンポーネントを使ってください */}
      
    </div>
  );
}

export default App;

Open Sandbox

← 前のレッスン: 2-4. タプル型を理解する

次のレッスン: 3-2. Propsで値を渡す →