イベントハンドラ

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

const App = () => {
  // 問題1. インプット用のstateを定義しよう
  const [message, setMessage] = useState('')
  // ここまで
  return (
    <>
      <h2>プログラミングへの意気込みを書いてみましょう</h2>
      <input
        placeholder="意気込み"
        // 問題3. stateとインプットを紐付けよう
        value={message}
        // ここまで
        // 問題2. inputの入力値をコンソール出力してみよう & 問題3. stateとインプットを紐付けよう
        onChange={(e) => setMessage(e.target.value)}
        // ここまで
      />
    </>
  )
}

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


code-lesson

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

const App = () => {
  // 問題1. インプット用のstateを定義しよう

  // ここまで
  return (
    <>
      <h2>プログラミングへの意気込みを書いてみましょう</h2>
      <input
        placeholder="意気込み"
        // 問題3. stateとインプットを紐付けよう

        // ここまで
        // 問題2. inputの入力値をコンソール出力してみよう & 問題3. stateとインプットを紐付けよう

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

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


onChangeを使ってみよう

import文

createRoot/root.render

Reactを始めよう

<React.Fragment>,<>

JSXを使ってみよう

関数コンポーネント

JSX内でJavaScriptを使ってみよう

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

useState

stateを使ってみよう

三項演算子

条件付きレンダー

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

prevState

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

stateを動的に変化させよう

onClickを理解しよう

onClickを使ってみよう

インラインスタイル

スタイルを当てよう

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

useEffect

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

useEffectを使ってみよう

stateの更新タイミング

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

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

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

React入門の総復習クイズ

React入門