React Exercises

Welcome to The Coding College, your go-to resource for mastering coding and programming! Whether you’re a beginner or an experienced developer, practice is key to mastering React. This article offers a collection of hands-on React exercises designed to reinforce your understanding of React fundamentals and advanced concepts.

Why Practice React Exercises?

Practicing exercises is crucial for solidifying your knowledge of React. Here’s why:

1. Build Confidence

Exercises help you transition from theory to practical implementation.

2. Strengthen Core Concepts

Understand React features like components, state, props, and hooks more deeply.

3. Enhance Problem-Solving Skills

Develop a problem-solving mindset that’s essential for tackling real-world challenges.

4. Prepare for Interviews

Many React-related interview questions are based on concepts you can learn through hands-on exercises.

React Exercises for Beginners

Exercise 1: Create a Simple React Component

Objective: Build a functional component that displays a “Hello, World!” message.
Instructions:

  1. Create a HelloWorld component.
  2. Use JSX to render the message.

Solution:

const HelloWorld = () => {
  return <h1>Hello, World!</h1>;
};

export default HelloWorld;

Exercise 2: Create a Counter Application

Objective: Use useState to implement a counter with increment and decrement buttons.
Instructions:

  1. Create a Counter component.
  2. Add two buttons: Increment and Decrement.
  3. Use the useState hook to manage the counter value.

Solution:

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
};

export default Counter;

Exercise 3: Render a List

Objective: Display a list of items using the map() method.
Instructions:

  1. Create a List component.
  2. Use the map() method to render an array of fruits.

Solution:

const List = () => {
  const fruits = ["Apple", "Banana", "Cherry"];

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

export default List;

Intermediate React Exercises

Exercise 4: Conditional Rendering

Objective: Create a component that displays a “Logged In” or “Logged Out” message based on a boolean variable.
Instructions:

  1. Create a UserStatus component.
  2. Use conditional rendering to display the appropriate message.

Solution:

import React, { useState } from "react";

const UserStatus = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      <h1>{isLoggedIn ? "Logged In" : "Logged Out"}</h1>
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        Toggle Status
      </button>
    </div>
  );
};

export default UserStatus;

Exercise 5: Fetch API Data

Objective: Fetch data from a public API and display it.
Instructions:

  1. Use the useEffect hook to fetch data from a placeholder API (e.g., JSONPlaceholder).
  2. Display the data in a list.

Solution:

import React, { useState, useEffect } from "react";

const FetchData = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((data) => setData(data.slice(0, 5))); // Fetch 5 items
  }, []);

  return (
    <div>
      <h2>API Data</h2>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default FetchData;

Advanced React Exercises

Exercise 6: Build a Todo List

Objective: Implement a todo list with add and delete functionality.
Instructions:

  1. Create a TodoList component.
  2. Use useState to manage the list of todos.

Exercise 7: Create a Custom Hook

Objective: Build a custom hook to manage form input.
Instructions:

  1. Create a custom hook useInput.
  2. Use it in a Form component to manage input fields.

Exercise 8: Optimize Performance with React.memo

Objective: Use React.memo to prevent unnecessary re-renders.
Instructions:

  1. Create a parent and child component.
  2. Use React.memo in the child component.

Additional Resources

FAQs About React Exercises

1. Who Can Benefit from React Exercises?

Anyone learning React, from beginners to advanced developers, can benefit from structured exercises.

2. What Tools Do I Need?

You’ll need a code editor (like VSCode), Node.js, and a React environment.

3. How Can I Test My Solutions?

Use tools like CodeSandbox or run your React app locally with npm start.

Conclusion

React exercises are essential for anyone looking to enhance their skills and gain confidence in building React applications. Start with the beginner-friendly exercises and gradually move to advanced challenges to master React.

At The Coding College, we’re here to support your learning journey with practical tutorials, exercises, and expert insights. Explore more topics like React Components, React Hooks, and React useEffect to deepen your understanding.

Leave a Comment