Building React ProjectsLearn working in React with our guided roadmap
Learning is a continuous process. If you are already familiar with how React works, these projects will help you put theory into practice. Solidify your knowledge by building the following components and applications.
If you are new to React, be sure to take the React roadmap first. If you want to explore more React tutorials without a direction, you can filter for the tutorials you are interested in on our React category page.
1Using CSS transitionsLearn how you can build an animated Carousel component in React with the help of CSS transitions. 2
Building a FileUploader in ReactHow to upload files with progress trackingLearn how you can build a FileUploader component in React to handle file uploads with progress tracking included.
How to Toggle Visibility in ReactBuilding a customizable show/hide componentLearn how to create a customizable show/hide component for toggling visibility in React.
How to Implement Drag and DropWith the help of the HTML Drag and Drop APILearn how you can build a drag-and-drop Kanban board in React with the help of the native HTML Drag and Drop API.
How to Validate Forms in ReactUsing validation objectsLearn how to easily validate your forms in React in a declarative manner with the help of validation objects.
How To Create a Toggleable FAQ Component in ReactUsing React hooksLearn how you can create a toggleable FAQ component in React with the help of React hooks.
How to Make a Responsive, Animated NavbarWith dropdown functionalityLearn how you can create a responsive animated navbar component in React with the help of CSS media queries and transitions.
How to Create an Infinite Scroll ComponentWith the help of the Intersection Observer APILearn how you can use the IntersectionObserver API in React to create a configurable infinite scrolling component.
How to Build a Note Taking AppWith the help of JSON serverLearn how you can use React with JSON server to quickly set up a backend for your application for mocking and prototyping.
How to Create Autocomplete SearchWith support for keyboard navigationAutocomplete is a common feature for websites with a search bar. Learn how you can create an autocomplete search in React with keyboard navigation.
How to Make Feature FlagsEnable features with a click of a buttonLearn how you can implement feature flags in React to put your features behind a toggle.
🔓 Unlock this lesson 12
How to Build a Weather App from ScratchLearn how to build a weather app from start to finishIn this 5 part series, you will learn how to build a weather app from scratch using hooks, providers, and the fetch API.
🗺️ Related roadmapsContinue learning
React RoadmapLearn React with our guided roadmapThis roadmap takes you through the essential concepts in React, from JSX, props and state, to concepts like lazy loading, suspense and error boundaries.
- Unlimited access to hundreds of tutorials
- Access to exclusive interactive lessons
- Remove ads to learn without distractions