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

const App = () => {
  const [count, setCount] = useState(1)
  const [data, setData] = useState({
    name: '山田',
    content: '内容'
  })

  const resetCount = () => {
    // 問題1. countをリセットする処理を実装しよう
    setCount(0)
  }

  const changeName = () => {
    // 問題2. nameを変更する処理を実装しよう
    setData({ ...data, name: '田中' })
  }

  const incrementCount = () => {
    // 問題3. countを+1する処理を実装しよう
    setCount((prevCount) => prevCount + 1)
  }

  return (
    <>
      <div>
        <p>{count}</p>
        <button onClick={resetCount}>countをリセット</button>
        <button onClick={incrementCount}>countに+1</button>

        <p>{data.name}</p>
        <p>{data.content}</p>
        <button onClick={changeName}>data.nameを変更する</button>
      </div>
    </>
  )
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />)


code-lesson

prevState

stateの更新+スプレッド構文

useState

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

const App = () => {
  const [count, setCount] = useState(1)
  const [data, setData] = useState({
    name: '山田',
    content: '内容'
  })

  const resetCount = () => {
    // 問題1. countをリセットする処理を実装しよう
  }

  const changeName = () => {
    // 問題2. nameを変更する処理を実装しよう
  }

  const incrementCount = () => {
    // 問題3. countを+1する処理を実装しよう
  }

  return (
    <>
      <div>
        <p>{count}</p>
        <button onClick={resetCount}>countをリセット</button>
        <button onClick={incrementCount}>countに+1</button>

        <p>{data.name}</p>
        <p>{data.content}</p>
        <button onClick={changeName}>data.nameを変更する</button>
      </div>
    </>
  )
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />)


stateを動的に変化させよう

import文

createRoot/root.render

Reactを始めよう

<React.Fragment>,<>

JSXを使ってみよう

関数コンポーネント

JSX内でJavaScriptを使ってみよう

コンポーネントの呼び出しとHTMLの属性に変数を渡そう

stateを使ってみよう

三項演算子

条件付きレンダー

stateに応じて異なるUIを表示させよう

イベントハンドラ

onChangeを使ってみよう

onClickを理解しよう

onClickを使ってみよう

インラインスタイル

スタイルを当てよう

条件分岐を使用してスタイルを当てよう

useEffect

useEffectを使ってみよう

stateの更新タイミング

stateの更新のタイミングを確認しよう

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

React入門の総復習クイズ

副作用が実行されるタイミングは、$(1)です。

React入門

stateを動的に変化させよう

まずは必要なスキルを確認しましょう！