Introduction to React

npx create-react-app my-first-react-app

import React, { useState } from 'react';
import './App.css';

function App() {
  const [headerColor, setHeaderColor] = useState('#4a86e8');

  const changeHeaderColor = () => {
    const colors = ['#4a86e8', '#2e5cb8', '#8a2be2', '#7fff00', '#dc143c'];
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    setHeaderColor(randomColor);
  };

  return (
    <div className="App">
      <h1 style={{ color: headerColor }}>My First React App</h1>
      <p>Welcome to my first React app! Let's learn React together.</p>
      <button onClick={changeHeaderColor}>Change header color</button>
    </div>
  );
}

export default App;

.App {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  text-align: center;
  padding: 30px;
}

p {
  font-size: 1.2em;
  text-align: justify;
  padding: 10px;
}

button {
  background-color: #4a86e8;
  color: white;
  font-size: 1em;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #2e5cb8;
}

npm start