Reactで簡単なボタン配色確認ツールを作成する

はじめに

Reactを学習していて、初心者向けチュートリアルを一周したので一度簡単なアプリを作ってみようと思い作成しました。
初学者のため、間違っている記載があればご指摘いただけると幸いです。

アプリの概要

背景色と文字色のカラーコードを入力して、「色を変更」ボタンを押すと「サンプル」ボタンの配色が変わるというシンプルな機能です。

App.js

App.js

import './App.css';
import React, { useState } from 'react';
function App() {
  const [inputBackgroundColor, setBackgroundColor] = useState('#0f0a95');
  const [inputFontColor, setFontColor] = useState('#ffffff');
  const [ButtonStyle, setButtonStyle] = useState({ backgroundColor: inputBackgroundColor, color: inputFontColor});

  const setBackgroundColorValue = (e) => {
    setBackgroundColor(e.target.value);
  };

  const setFontColorValue = (e) => {
    setFontColor(e.target.value);
  };

  const ColorChange = () => {
    setButtonStyle({
      backgroundColor: inputBackgroundColor,
      color: inputFontColor,
    });
  };

  return (
    <div className="App">
      <p class='title'>配色確認ツール</p>
        <div class='inputBox'>
          <div>
            <p>背景色を入力</p>
            <input type = 'text' value={inputBackgroundColor} onChange={setBackgroundColorValue}/>
          </div>
          <div>
            <p>文字色を入力</p>
            <input type = 'text' value={inputFontColor} onChange={setFontColorValue}/>
          </div>
        </div>
        <div class='changeButtonBox'>
          <button onClick={ColorChange} class='changeButton'>色を変更</button>
        </div>
        <div class='sampleButtonBox'>
          <button style={ButtonStyle} class='sampleButton'>サンプル</button>
        </div>
    </div>
  );
}

export default App;

input要素が変更されたら値を取得し、「色を変更」ボタンが押されたら取得した値を「サンプル」ボタンに反映しています。

App.css

.title{
  text-align: center;
  font-size: 1.5rem;
}

.inputBox{
  display: flex;
  justify-content: center;
  gap: 100px;
  margin-bottom: 50px;
}

.inputBox input{
  width: 150px;
  height: 30px;
  font-size: 1.25rem;
  border-radius: 5px;
  border: solid 1px #333;
  padding: 5px;
}

.changeButtonBox{
  display: flex;
  justify-content: center;
  margin-bottom: 200px;
}

.changeButton{
  background-color: #171617;
  color: #fff;
  width: 200px;
  height: 50px;
  border-radius: 5px;
  font-size: 1.25rem;
}

.changeButton:hover{
  color: #333;
  background-color: #fff;
  border: solid 3px #333;
}

.sampleButtonBox{
  display: flex;
  justify-content: center;
}

.sampleButton{
  width: 400px;
  height: 50px;
  border-radius: 5px;
  font-size: 1.25rem;
  border: none;
}

最後に

作成していて今自分がどこまで理解できているのか、どこが理解できていないのかを把握できて勉強になりました。
hover時のスタイルやアニメーションも確認できる機能をつけることができればより便利になると思うので挑戦してみます。