6 min read
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.
Basic knowledge of React concepts, such as components, state, props, and JSX, is necessary.
A code editor, such as Visual Studio Code, Codesandbox or Stackblitz should be available to write and test code.
Familiarity with command line interface (CLI) and running scripts.
Basic knowledge of Node.js and its installation is required for taking React exercises.
Understanding Npm, Yarn or Pnpm (Node Package Manager) and its usage is essential for installing and managing dependencies in a React project.
Knowledge of using Vite or other build tools is required for bundling and optimizing React code.
A willingness to learn and experiment with new concepts and ideas is essential for making progress in React development.
#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.
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.
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.
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.
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.
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.
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.
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.
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.