import文

createRoot/root.render

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 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を始めよう

JSX（HTML）

React.Fragment

JSXを使ってみよう

関数コンポーネント

JSX内でJavaScriptを使ってみよう

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

フック関数

stateを使ってみよう

三項演算子

条件付きレンダー/三項演算子

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

prevState

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

stateを動的に変化させよう

イベントハンドラ

onChangeを使ってみよう

onClickを理解しよう

onClickを使ってみよう

インラインスタイル

スタイルを当てよう

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

useEffect

useEffectを使ってみよう

useState/更新タイミング

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

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

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