🧑‍💻 5 Beginner-Friendly React Assignments

React is a powerful library for building user interfaces, and the best way to learn it is by doing! Below are five super simple assignments you can try to understand the basics like components, props, state, events, and conditional rendering.

✅ 1. Greeting Component

Goal: Learn how to create and use basic components and props.

// Greeting.js
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// App.js
import Greeting from './Greeting';
function App() {
  return (
    <div>
      <Greeting name="Shubham" />
    </div>
  );
}

✅ 2. Change Text on Button Click

Goal: Use useState to update text content.

import { useState } from 'react';

function WelcomeMessage() {
  const [message, setMessage] = useState('Welcome!');

  const handleClick = () => {
    setMessage('Thanks for clicking!');
  };

  return (
    <div>
      <h2>{message}</h2>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

✅ 3. Toggle Show/Hide

Goal: Learn conditional rendering with useState.

import { useState } from 'react';

function ToggleMessage() {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(!show)}>
        {show ? 'Hide' : 'Show'} Message
      </button>
      {show && <p>I’m visible now!</p>}
    </div>
  );
}

✅ 4. Static To-Do List

Goal: Use .map() to render lists from arrays.

function TodoList() {
  const todos = ['Learn React', 'Do Homework', 'Sleep'];

  return (
    <ul>
      {todos.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

✅ 5. Input Box with Real-Time Output

Goal: Learn form input handling with useState.

import { useState } from 'react';

function LiveInput() {
  const [text, setText] = useState('');

  return (
    <div>
      <input
        type="text"
        onChange={(e) => setText(e.target.value)}
        placeholder="Type something"
      />
      <p>You typed: {text}</p>
    </div>
  );
}

🎯 Next Steps: Try converting one of these into a small project. For example, enhance the to-do list with an “Add” button. Happy coding!