useEffect

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

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

const App = () => {
  const [count, setCount] = useState(1)

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

  // 問題1. 初回レンダー時のみ処理を実行しよう
  useEffect(() => {
    console.log('useEffectを実行しました')
  }, [])
  // ここまで

  // 問題2. countが変更されたら、値をコンソールに出力する処理を実装しよう
  useEffect(() => {
    console.log(count)
  }, [count])
  // ここまで

  return (
    <>
      <div>
        <p>{count}</p>
        <button onClick={incrementCount}>+1</button>
      </div>
    </>
  )
}

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


code-lesson

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

const App = () => {
  const [count, setCount] = useState(1)

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

  // 問題1. 初回レンダー時のみ処理を実行しよう

  // ここまで

  // 問題2. countが変更されたら、値をコンソールに出力する処理を実装しよう

  // ここまで

  return (
    <>
      <div>
        <p>{count}</p>
        <button onClick={incrementCount}>+1</button>
      </div>
    </>
  )
}

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


useEffectを使ってみよう

import文

createRoot/root.render

Reactを始めよう

<React.Fragment>,<>

JSXを使ってみよう

関数コンポーネント

JSX内でJavaScriptを使ってみよう

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

useState

stateを使ってみよう

三項演算子

条件付きレンダー

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

prevState

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

stateを動的に変化させよう

イベントハンドラ

onChangeを使ってみよう

onClickを理解しよう

onClickを使ってみよう

インラインスタイル

スタイルを当てよう

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

stateの更新タイミング

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

UIライブラリReactの基本から学んでいくコースです。
コンポーネントベースの開発に必要なstateやイベント処理への理解を深め、実際のプロジェクトで活用できるスキルを習得します。

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