関数コンポーネント

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  return (
    <>
      <h1>ボタン</h1>
      {/* 問題2. コンポーネントを表示しよう */}
      <PlusButton />
      {/* ここまで */}
    </>
  )
}

// 問題1. コンポーネントを実装しよう
const PlusButton = () => {
  return (
    <div>
      <button>+</button>
    </div>
  )
}
// ここまで

ReactDOM.createRoot(document.getElementById('root')).render(<App />)


code-lesson

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  return (
    <>
      <h1>ボタン</h1>
      {/* 問題2. コンポーネントを表示しよう */}

      {/* ここまで */}
    </>
  )
}

// 問題1. コンポーネントを実装しよう

// ここまで

ReactDOM.createRoot(document.getElementById('root')).render(<App />)


component（1つ）

component（複数）

props

componentとprops（値）

componentとprops（分割代入）

componentとprops（関数）

props.children

componentとprops（children）

componentとprops（childrenにコンポーネントを渡す）

カスタムフック

カスタムHook（1つ）

コンポーネント構造やpropsの流れを把握し、React開発の基礎を固めます。
カスタムHookの作成も学んで、モダンなフロントエンド開発を目指します。

世界的にも人気なReactを使って、Webアプリケーションの作成について学んでいきます