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を使ってみよう

onClickを使ってみよう

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

stateを動的に変化させよう

スタイルを当てよう

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

onChangeを使ってみよう

useEffectを使ってみよう

Reactを始めよう

stateを使ってみよう

JSXを使ってみよう

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

onClickを理解しよう

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

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

React入門

JSX内でJavaScriptを使ってみよう

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