// 問題1. useStateをインポートしよう
import React, { useState } from 'react'
// ここまで
import ReactDOM from 'react-dom'

const App = () => {
  // 問題2. stateを定義しよう
  const [submitting, setSubmitting] = useState(false)
  //ここまで

  return (
    <>
      <form>
        <div>
          <input placeholder="お名前" />
        </div>
        <div style={{ 'margin-top': '5px' }}>
          <textarea placeholder="ご用件" />
        </div>
      </form>
    </>
  )
}

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


code-lesson

import文

useState

// 問題1. useStateをインポートしよう
import React from 'react'
// ここまで
import ReactDOM from 'react-dom'

const App = () => {
  // 問題2. stateを定義しよう

  //ここまで

  return (
    <>
      <form>
        <div>
          <input placeholder="お名前" />
        </div>
        <div style={{ 'margin-top': '5px' }}>
          <textarea placeholder="ご用件" />
        </div>
      </form>
    </>
  )
}

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


stateを使ってみよう

createRoot/root.render

Reactを始めよう

<React.Fragment>,<>

JSXを使ってみよう

関数コンポーネント

JSX内でJavaScriptを使ってみよう

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

三項演算子

条件付きレンダー

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

prevState

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

stateを動的に変化させよう

イベントハンドラ

onChangeを使ってみよう

onClickを理解しよう

onClickを使ってみよう

インラインスタイル

スタイルを当てよう

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

useEffect

useEffectを使ってみよう

stateの更新タイミング

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

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

React入門の総復習クイズ

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

React入門

stateを使ってみよう

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