カスタムフック

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  // 問題2. カスタムHookを呼び出しましょう
  const { count, handleIncrement } = useCounter()

  // 問題3. カウンターを実装しましょう
  return (
    <>
      <p>{count}</p>
      <button onClick={handleIncrement}>+1</button>
    </>
  )
}

// 問題1. カスタムHookを実装しましょう
const useCounter = () => {
  const [count, setCount] = useState(0)

  const handleIncrement = () => {
    setCount((prevCount) => prevCount + 1)
  }

  return { count, handleIncrement }
}

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


code-lesson

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  // 問題2. カスタムHookを呼び出しましょう

  // 問題3. カウンターを実装しましょう
  return (
    <>
      <p></p>
      <button>+1</button>
    </>
  )
}

// 問題1. カスタムHookを実装しましょう

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


カスタムHook（1つ）

関数コンポーネント

component（1つ）

component（複数）

props

componentとprops（値）

componentとprops（分割代入）

componentとprops（関数）

props.children

componentとprops（children）

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

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

「React基礎」レッスンの総復習クイズです。