<React.Fragment>,<>

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  return (
    // 問題2. フラグメントを使ってみよう
    <>
      <h1>寿司の歴史</h1>
      <h2>概要</h2>
      <p>
        寿司は今家日本が世界に誇る日本食の一つですが、現在の形になったのは江戸時代だとされています。そしてその起源は、東南アジアの保存食だと言われています。
      </p>
      {/* 問題1. JSXを書いてブラウザに表示させてみよう*/}
      <button>詳細を見る</button>
      {/* ここまで */}
    </>
    // ここまで
  )
}

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


code-lesson

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  return (
    // 問題2. フラグメントを使ってみよう

    <div>
      <h1>寿司の歴史</h1>
      <h2>概要</h2>
      <p>
        寿司は今家日本が世界に誇る日本食の一つですが、現在の形になったのは江戸時代だとされています。そしてその起源は、東南アジアの保存食だと言われています。
      </p>
      {/* 問題1. JSXを書いてブラウザに表示させてみよう*/}

      {/* ここまで */}
    </div>

    // ここまで
  )
}

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


JSXを使ってみよう

import文

createRoot/root.render

Reactを始めよう

関数コンポーネント

JSX内でJavaScriptを使ってみよう

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

useState

stateを使ってみよう

三項演算子

条件付きレンダー

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

prevState

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

stateを動的に変化させよう

イベントハンドラ

onChangeを使ってみよう

onClickを理解しよう

onClickを使ってみよう

インラインスタイル

スタイルを当てよう

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

useEffect

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

useEffectを使ってみよう

stateの更新タイミング

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

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

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

React入門の総復習クイズ

React入門