30 React Basic Exercises for Beginners with Solutions

Master beginner React skills with our comprehensive list of top 30 exercises. Dive into coding challenges that improve your understanding and proficiency in React, setting a solid foundation for intermediate challenges. Start your journey to React mastery today!

Learning Objectives:

These beginner React exercises will help you understand fundamental concepts such as components, props, state management, and JSX. By practicing these challenges, you'll build a strong foundation for developing interactive and dynamic user interfaces with React.

Exercise Instructions:

Start with the first exercise and attempt to solve it before checking the hint or solution.
Ensure you understand the logic behind each solution, as this will help you in more complex problems.
Use these exercises to reinforce your learning and identify areas that may require further study.

1. Create a functional component that displays 'Hello, World!' on the screen.

Expected Output:

Hello, World!

Code In React

import React from "react";
 
 const HelloWorld = () => {
  // Add the JSX to display "Hello, World!" here
 };
 
 export default HelloWorld;

Open Sandbox

Need help ?

Click on Hint to solve the question.

2. Write a React component that accepts a hardcoded name prop and displays 'Hello, {name}!'.

Required Input:

name = 'John'

Expected Output:

Hello, John!

Code In React

import React from "react";
 
 const Greeting = (props) => {
  // Return JSX to display the greeting using props.name
 };
 
 export default Greeting;

Open Sandbox

Need help ?

Click on Hint to solve the question.

3. Create a button that, when clicked, displays an alert saying 'Button clicked!'.

Expected Output:

An alert box that says 'Button clicked!'

Code In React

import React from "react";
 
 const ClickAlert = () => {
  const handleClick = () => {
  // Add alert logic here
  };
 
  return (
  // Add button element here and link the click handler
    <></>  
);
 };
 
 export default ClickAlert;

Open Sandbox

Need help ?

Click on Hint to solve the question.

4. Build a React component that renders a list of items from a hardcoded array.

Required Input:

items = ['Apple', 'Banana', 'Cherry']

Expected Output:

Apple
 Banana
 Cherry

Code In React

import React from "react";
 
 const ItemList = () => {
  const items = ['Apple', 'Banana', 'Cherry'];
  
  return (
  // Map over items and render them inside <li> tags
  );
 };
 
 export default ItemList;

Open Sandbox

Need help ?

Click on Hint to solve the question.

5. Create a component that changes its text color to red when a button is clicked.

Expected Output:

Clicking the button changes the text color to red.

Code In React

import React, { useState } from "react";
 
 const ColorChanger = () => {
  const [color, setColor] = useState("black");
 
  const handleClick = () => {
  // Change the state to set the color to red
  };
 
  return (
  <div>
  <p style={{ color }}>This text will change color.</p>
  <button onClick={handleClick}>Change Color</button>
  </div>
  );
 };
 
 export default ColorChanger;

Open Sandbox

Need help ?

Click on Hint to solve the question.

6. Write a simple React component that shows the current date using JavaScript's Date object.

Expected Output:

Today's date is: YYYY-MM-DD (e.g., Today's date is: 2024-11-12)

Code In React

import React from "react";
 
 const CurrentDate = () => {
  const today = new Date();
  // Format the date using today.getFullYear(), today.getMonth(), and today.getDate()
 
  return (
  // Return a JSX element displaying the formatted date
  );
 };
 
 export default CurrentDate;

Open Sandbox

Need help ?

Click on Hint to solve the question.

7. Build a counter component that increases the count by 1 every time a button is clicked.

Expected Output:

Initially: Count: 0
 After clicking the button: Count: 1, Count: 2, etc.

Code In React

import React, { useState } from "react";
 
 const Counter = () => {
  const [count, setCount] = useState(0);
 
  const handleIncrement = () => {
  // Increment the count state
  };
 
  return (
  <div>
  <p>Count: {count}</p>
  <button onClick={handleIncrement}>Increment</button>
  </div>
  );
 };
 
 export default Counter;

Open Sandbox

Need help ?

Click on Hint to solve the question.

8. Create a React form with an input field and a submit button that logs the input value to the console.

Required Input:

Hardcoded initial input value: 'React'

Expected Output:

Console log: Input value: React (when the form is submitted)

Code In React

import React, { useState } from "react";
 
 const InputForm = () => {
  const [inputValue, setInputValue] = useState("React");
 
  const handleSubmit = (e) => {
  e.preventDefault();
  // Log the input value to the console
  };
 
  return (
  <form onSubmit={handleSubmit}>
  <input
  type="text"
  value={inputValue}
  onChange={(e) => setInputValue(e.target.value)}
  />
  <button type="submit">Submit</button>
  </form>
  );
 };
 
 export default InputForm;

Open Sandbox

Need help ?

Click on Hint to solve the question.

9. Write a React component that toggles between 'ON' and 'OFF' when a button is clicked.

Expected Output:

Initially: OFF
 After clicking the button: ON, OFF, etc.

Code In React

import React, { useState } from "react";
 
 const ToggleButton = () => {
  const [isOn, setIsOn] = useState(false);
 
  const handleToggle = () => {
  // Toggle the isOn state
  };
 
  return (
  <div>
  <p>{isOn ? "ON" : "OFF"}</p>
  <button onClick={handleToggle}>Toggle</button>
  </div>
  );
 };
 
 export default ToggleButton;

Open Sandbox

Need help ?

Click on Hint to solve the question.

10. Create a component that displays an image from a given hardcoded URL using props.

Required Input:

imageUrl = 'https://via.placeholder.com/150'

Expected Output:

An image is displayed on the screen.

Code In React

import React from "react";
 
 const ImageDisplay = (props) => {
  // Use props.imageUrl to render an <img> tag
 };
 
 export default ImageDisplay;

Open Sandbox

Need help ?

Click on Hint to solve the question.

1 of 3