インラインスタイル

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

const App = () => {
  const buttonStyle = {
    borderRadius: '6px',
    border: '1px solid',
    padding: '8px 16px',
    cursor: 'pointer'
  }

  return (
    <>
      {/* 問題1. 基本的なスタイルの当て方を学ぼう */}
      <h1 style={{ color: 'red' }}>色が変更できます</h1>
      <h2 style={{ backgroundColor: 'red', borderRadius: '24px' }}>
        背景色が変更できます
      </h2>
      {/* ここまで */}
      <div style={{ 'margin-top': '5px' }}>
        {/* 問題2. 変数を使ってみよう */}
        <button style={buttonStyle}>ボタン</button>
        {/* ここまで */}
      </div>
    </>
  )
}

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


code-lesson

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

const App = () => {
  const buttonStyle = {
    borderRadius: '6px',
    border: '1px solid',
    padding: '8px 16px',
    cursor: 'pointer'
  }

  return (
    <>
      {/* 問題1. 基本的なスタイルの当て方を学ぼう */}
      <h1>色が変更できます</h1>
      <h2>背景色が変更できます</h2>
      {/* ここまで */}
      <div>
        {/* 問題2. 変数を使ってみよう */}
        <button>ボタン</button>
        {/* ここまで */}
      </div>
    </>
  )
}

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


スタイルを当てよう

import文

createRoot/root.render

Reactを始めよう

<React.Fragment>,<>

JSXを使ってみよう

関数コンポーネント

JSX内でJavaScriptを使ってみよう

コンポーネントの呼び出しと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入門