Introduction to React

React - Chapter 1

React Tutorial

We appreciate your patience while we actively develop and enhance our content for a better experience.

Sample Code
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)];

  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>

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