関数コンポーネント

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

const App = () => {
 const userName = '太郎'
 const renderTime = () => {
 const today = new Date()
 const year = today.getFullYear()
 const month = today.getMonth() + 1
 const day = today.getDate()
 return `${year}年${month}月${day}日`
 }

 return (
 <>
 {/* 問題1. JSX内で変数を呼び出してみよう */}
 {userName}さん、こんにちは
 {/* ここまで */}
 {/* 問題2. JSX内で関数を呼び出してみよう */}
 {renderTime()}
 {/* ここまで */}
 </>
 )
}

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

code-lesson

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

const App = () => {
 const userName = '太郎'
 const renderTime = () => {
 const today = new Date()
 const year = today.getFullYear()
 const month = today.getMonth() + 1
 const day = today.getDate()
 return `${year}年${month}月${day}日`
 }

 return (
 <>
 {/* 問題1. JSX内で変数を呼び出してみよう */}
 {}さん、こんにちは
 {/* ここまで */}
 {/* 問題2. JSX内で関数を呼び出してみよう */}
 {}
 {/* ここまで */}
 </>
 )
}

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

JSX内でJavaScriptを使ってみよう

import文

createRoot/root.render

Reactを始めよう

<React.Fragment>,<>

JSXを使ってみよう

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

useState

stateを使ってみよう

三項演算子

条件付きレンダー

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

prevState

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

stateを動的に変化させよう

イベントハンドラ

onChangeを使ってみよう

onClickを理解しよう

onClickを使ってみよう

インラインスタイル

スタイルを当てよう

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

useEffect

useEffectを使ってみよう

stateの更新タイミング

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

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

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

Reactコース

【最低限】はじめてのReact👼🏻

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

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

React入門の総復習クイズ

React入門