React has gained immense popularity among web developers due to its flexibility, performance, and ease of use. If you're looking to improve your React skills, practice exercises are a great way to do so.

Prerequisite

1. Familiarity with HTML, CSS, and JavaScript is a prerequisite for taking React exercises.

2. Basic knowledge of React concepts, such as components, state, props, and JSX, is necessary.

3. A code editor, such as Visual Studio Code, Codesandbox or Stackblitz should be available to write and test code.

4. Familiarity with command line interface (CLI) and running scripts.

5. Basic knowledge of Node.js and its installation is required for taking React exercises.

6. Understanding Npm, Yarn or Pnpm (Node Package Manager) and its usage is essential for installing and managing dependencies in a React project.

7. Knowledge of using Vite or other build tools is required for bundling and optimizing React code.

8. A willingness to learn and experiment with new concepts and ideas is essential for making progress in React development.

Check these React JavaScript practice exercises along with solutions to help you sharpen your React skills.

#1 Prime Number Finder

Create a simple React component that takes in a number as input and returns a list of all the prime numbers that are less than or equal to the input number.

#2 Toggle Button

Create a toggle button component that switches between two states when clicked. The button should have two states: "On" and "Off". When the button is clicked, it should switch to the opposite state.

#3 Counter

Create a simple component that displays a counter and two buttons to increment and decrement its value.

#4 Search Filter

Create a react application that displays a list of products and add a search filter to search for specific products by name.

#5 Todo List

Create a React todo list component that allows users to add, delete, and mark items as completed. The to-do list should be displayed as a list of items, with a checkbox next to each item to mark it as completed. Users should be able to add new items to the list using a text input field and delete items by clicking a "delete" button next to each item. When the user adds or deletes an item, the todo list should be updated in real-time.

#6 Tic Tac Toe

Create a simple tic-tac-toe game using React. The goal will be to create a user interface that allows two players to take turns placing X's and O's on a 3x3 grid and to detect when someone has won the game or if there is a tie.

#7 Timer

Create a timer component using React. The timer should be able to start, pause, and reset. You can use any styling library of your choice.

#8 Sorting

Create a React component that can sort a list of items based on user selection. The component should allow the user to choose a sorting option from a dropdown menu and then display the sorted list accordingly.

#9 Wordle Game

Create a Wordle game using React. Players are presented with a set of hidden words that they must guess by entering letters. The game is won when all words are guessed correctly.

#10 Credit Card Validator

Create a React component that validates credit card numbers using Luhn's algorithm. The component will allow users to enter their credit card number and display whether the number is valid or not.

#11 BMI Calculator

Create a simple Body Mass Index (BMI) calculator app using React. The app will take a user's weight and height inputs and calculate their BMI using the formula (weight in kilograms / (height in meters)^2). The app will display the calculated BMI along with a message indicating the user's weight status based on the calculated BMI value.

#12 Rating

Create a React component that allows users to rate a product on a scale of 1 to 5. The rating will be displayed as a set of stars, with each star representing one point.

#13 Image Preview

Create a React component that allows users to preview images before uploading them. The component will display a thumbnail preview of the selected image and provide users with the option to remove the image.

#14 Photo Capture with Camera

Create a React app that allows users to capture photos using their webcam without using any third-party libraries. This app will make use of the getUserMedia API to access the user's camera and canvas element to capture the image. This exercise is ideal for those who want to learn how to work with native browser APIs in React, how to capture images using a webcam without any external dependencies, and how to build functional components in React.

#15 Canvas Drawing

Create a canvas drawing component in React without relying on any external libraries. This will require you to have a good understanding of React and canvas drawing basics.

#16 Word Counter

Create a React component that allows the user to input a text and displays the number of words in the text.

#17 Password Strength Checker

Create a React component that checks the strength of a password and displays the result to the user. The component will take user input and use a set of rules to determine the strength of the password.

#18 Simple Calendar

Create a simple calendar application using React. The calendar will display the current month and allow the user to navigate to previous and next months.

#19 Button Loading

Create a loading animation for a button component in React. The animation will play when the button is in a loading state, giving users feedback that the application is working on their request.

#20 Captcha

Create a simple captcha component in React. A captcha is a type of challenge-response test used in computing to determine whether or not the user is human. The captcha will consist of a mathematical expression that the user must solve to prove their humanity.

#21 LocalStorage

Create a simple React application that uses LocalStorage to store and retrieve data. LocalStorage is a browser-based storage mechanism that allows data to be stored and accessed even after the browser is closed.

#22 Password Show/Hide

Create a React component that allows a user to toggle the visibility of a password input field between a visible and hidden state.

#23 Drag and Drop

Create a simple drag and drop functionality in React without using any external libraries.

#24 Shuffle

Create a React component that shuffles a list of items whenever a button is clicked.

#25 URL Parser

Create a React URL parser that will take in a URL string and extract specific information from it.

If you want to improve your React skills, practicing with exercises is a great way to do so. However, before taking on these exercises, it is important to have a basic understanding of React concepts, familiarity with HTML, CSS, and JavaScript, and knowledge of tools such as command line interface, Node.js, Npm, Yarn or Pnpm, Vite or other build tools, and a willingness to learn and experiment with new concepts and ideas.

These React exercises cover a wide range of components and functionalities, from simple applications such as a toggle button or word counter to more complex ones like a tic-tac-toe game or a captcha component.

By practicing these exercises, you can enhance your skills and knowledge in React development and become a more proficient web developer.

If you have any questions or comments, feel free to reach out to me on Twitter(@rajeshtomjoe), or follow me for more updates.

And if you'd like to receive more exercise on JavaScript, be sure to subscribe to my blog.