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

const App = () => {
  return (
    <div>
      <h1>寿司の歴史</h1>
      <h2>概要</h2>
      <p>
        寿司は今家日本が世界に誇る日本食の一つですが、現在の形になったのは江戸時代だとされています。そしてその起源は、東南アジアの保存食だと言われています。
      </p>
    </div>
  )
}

//問題2. render関数にコンポーネントを渡そう
ReactDOM.createRoot(document.getElementById('root')).render(<App />)
//ここまで


code-lesson

import文

createRoot/root.render

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

const App = () => {
  return (
    <div>
      <h1>寿司の歴史</h1>
      <h2>概要</h2>
      <p>
        寿司は今家日本が世界に誇る日本食の一つですが、現在の形になったのは江戸時代だとされています。そしてその起源は、東南アジアの保存食だと言われています。
      </p>
    </div>
  )
}

//問題2. render関数にコンポーネントを渡そう
ReactDOM.createRoot(document.getElementById('root')).render()
//ここまで


Reactを始めよう

<React.Fragment>,<>

JSXを使ってみよう

関数コンポーネント

JSX内でJavaScriptを使ってみよう

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

useState

stateを使ってみよう

三項演算子

条件付きレンダー

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

prevState

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

stateを動的に変化させよう

イベントハンドラ

onChangeを使ってみよう

onClickを理解しよう

onClickを使ってみよう

インラインスタイル

スタイルを当てよう

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

useEffect

useEffectを使ってみよう

stateの更新タイミング

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

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

React入門の総復習クイズ

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

React入門

Reactを始めよう

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