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 />)


スタイルを当てよう

onClickを使ってみよう

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

stateを動的に変化させよう

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

onChangeを使ってみよう

useEffectを使ってみよう

Reactを始めよう

stateを使ってみよう

JSXを使ってみよう

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

onClickを理解しよう

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

JSX内でJavaScriptを使ってみよう

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

React入門

スタイルを当てよう

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