三項演算子

条件付きレンダー

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

const App = () => {
  // 問題3. 条件を変えて異なるデザインのボタンが表示されるか確認しよう
  const [submitting, setSubmitting] = useState(true)
  //ここまで

  return (
    <>
      <form>
        <div>
          <input placeholder="お名前" />
        </div>
        <div style={{ 'margin-top': '5px' }}>
          <textarea placeholder="ご用件" />
        </div>
        <div style={{ 'margin-top': '5px' }}>
          {/* 問題1. 条件に応じて表示させるボタンを変更しよう(trueの際の処理) */}
          {/* 問題2. 条件に応じて表示させるボタンを変更しよう(falseの際の処理) */}
          {submitting ? (
            <button disabled>送信中</button>
          ) : (
            <button>送信</button>
          )}
          {/* ここまで */}
        </div>
      </form>
    </>
  )
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />)


code-lesson

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

const App = () => {
  // 問題3. 条件を変えて異なるデザインのボタンが表示されるか確認しよう
  const [submitting, setSubmitting] = useState(false)
  //ここまで

  return (
    <>
      <form>
        <div>
          <input placeholder="お名前" />
        </div>
        <div style={{ 'margin-top': '5px' }}>
          <textarea placeholder="ご用件" />
        </div>
        <div style={{ 'margin-top': '5px' }}>
          {/* 問題1. 条件に応じて表示させるボタンを変更しよう(trueの際の処理) */}
          {/* 問題2. 条件に応じて表示させるボタンを変更しよう(falseの際の処理) */}

          {/* ここまで */}
        </div>
      </form>
    </>
  )
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />)


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

import文

createRoot/root.render

Reactを始めよう

<React.Fragment>,<>

JSXを使ってみよう

関数コンポーネント

JSX内でJavaScriptを使ってみよう

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

useState

stateを使ってみよう

prevState

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

stateを動的に変化させよう

イベントハンドラ

onChangeを使ってみよう

onClickを理解しよう

onClickを使ってみよう

インラインスタイル

スタイルを当てよう

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

useEffect

useEffectを使ってみよう

stateの更新タイミング

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

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

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