Introduction to React Coding Exercises

React is one of the most popular JavaScript libraries for building user interfaces, particularly for single-page applications. As a beginner or intermediate developer looking to sharpen your React skills, engaging in coding exercises is a great way to practice. In this article, we’ll explore various sample coding exercises designed to help you understand React concepts while building functional components.

These exercises cater to beginners just getting started with React, as well as seasoned developers seeking to delve deeper into advanced features. We’ll walk you through the implementation of each exercise, complete with well-commented code snippets and practical examples that you can easily try on your own. Let’s dive in!

Setting Up Your Environment

Before jumping into the exercises, it’s essential to set up a development environment that allows you to experiment with React. The most common setup involves using Node.js and npm (Node Package Manager), which will enable you to run and manage your React applications smoothly.

First, ensure you have Node.js installed on your machine. You can easily download it from the official Node.js website. Once you have Node.js installed, you can create a new React application using Create React App, a command-line tool that sets up a new project with a standard structure and configuration.

To create a new React app, open your terminal and run the following command:

npx create-react-app my-react-exercises

Navigate into your newly created project folder:

cd my-react-exercises

Now, you’re ready to start coding!

Exercise 1: Building a Simple Counter

The first exercise is to create a simple counter application that increments and decrements a number when buttons are clicked. This exercise will help you understand state and event handling in React.

To implement the counter, first create a new component named `Counter.js`. Inside this file, you’ll import React and use the `useState` hook to manage the counter’s state.

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    

      
Counter: {count}
      Increment
      Decrement
    
  );
};

export default Counter;

In this code, we define two functions, `increment` and `decrement`, that modify the `count` state. The buttons call these functions when clicked, updating the displayed counter. Make sure to render this component in your main `App.js` file to visualize your work.

Exercise 2: Creating a To-Do List

The next exercise is a classic: building a To-Do list app. This exercise will deepen your understanding of components, props, and lists in React.

Create a new component called `TodoList.js`. In this component, users can input tasks, which will then be displayed in a list. We’ll require a bit more state management here.

import React, { useState } from 'react';

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    if (inputValue) {
      setTodos([...todos, inputValue]);
      setInputValue('');
    }
  };

  return (
    

      
To-Do List
       setInputValue(e.target.value)}
      />
      Add
      

        {todos.map((todo, index) => (
          
{todo}
        ))}
      
    
  );
};

export default TodoList;

In this component, `inputValue` holds the current value of the input field. When the user clicks the