Build 25 React Projects – Tutorial

Master React by building 25 different projects. If you follow along, you'll be ready to interview for a job as a React developer.

✏️ Created by @sangammukherjee

Code:

⭐️ Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:08:02) Accordion
⌨️ (0:31:22) Random Color Generator
⌨️ (0:45:22) Star Rating
⌨️ (0:57:22) Image Slider
⌨️ (1:21:10) Load More Button
⌨️ (1:38:30) Tree View / Menu UI / Recursive Navigation Menu
⌨️ (2:01:52) QR Code Generator
⌨️ (2:09:12) Light and Dark Mode / Theme Switch / Dark Theme
⌨️ (2:26:11) Scroll Indicator
⌨️ (2:43:30) Tabs
⌨️ (2:57:02) Modal Popup
⌨️ (3:13:17) Github Profile Finder
⌨️ (3:36:18) Search Autocomplete with API implementation
⌨️ (3:53:42) Tic Tac Toe
⌨️ (4:16:45) Feature Flag Implementation
⌨️ (4:35:22) useFetch Custom Hook
⌨️ (4:47:15) useOnclickOutside Custom Hook
⌨️ (4:56:42) useWindowResize / useResponsive Custom Hook
⌨️ (5:02:37) Scroll to Top and Bottom
⌨️ (5:11:27) Scroll to Particular Section
⌨️ (5:19:12) Weather App
⌨️ (5:48:24) Food Recipe App
⌨️ (6:45:12) Shopping Cart App
⌨️ (7:37:25) Expense Tracker App
⌨️ (8:29:52) Mern Stack Blog App

🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama

--

[MaximilianXXX]

This guy is a React beast. Love the quick, no-nonsense problem solving.

[umezvictor]

I'm just about starting this tutorial. Thank you for providing this free tutorial. God bless you.

[teaspoon]

Thank you very much for such amazing course!

[bravooh]

Anyone who is young. Take the time and do these. I'm old now and life makes it harder to learn. It's impossible to sit down. For more than 1 or 2 hours and study. Too much obligations.

[codemass]

at 1:35:20 if anyone facing any problems ( which you will ) instead of writing setProducts like what he wrote in the video . type it this way setProducts(() => [...products, ...result.products]); , because when you pass a parameter to the call back function and you spread it then render result.products, its like rendering the same result.products twice, and that is why you see the warning below of two identical Id or why you see items rendered twice ... but when we set it like this setProducts(() => [...products, ...result.products]); it means that we will spread the prev products from the state which in the initial state is set to [ ] so it means if there is no products then there will be no previos products to be spread and no error will appear

[nguyenhuuhoang]

i am 22 year old and staying at 2:09:00, everything here is too difficult for me but i will complete it to the end, never give up

[aerofred]

On the 'Star Rating" project, if you had trouble changing colors on the "hover' and 'mouseover' states, another way to do it is to have two sets of stars you can toggle between. For example, if a user clicks, or their mouse leaves, you show a black star; if they come back, you show a yellow star.

[assilbenlagha]

Great tutorial, thank you so much for this!
(one simple note: in the image-slider component the handleNext -slide- function doesnt work correctly, when you reach the last slide it continues looping without returning to the first image in the array, here is a corrected version for anyone who needs it:
function handleNext() {
setCurrentSlide(currentSlide === images.length - 1 ? 0 : currentSlide + 1);
}

[Kabraxiz]

Awesome !!🥳🥳 Thank You for this amazing training opportunity 🦾

[razeft]

i like this projects, i decide to do only the recipe one and use vite instead of create-react-app but it's a good video

[tusharkutre]

It was much needed video. Thank you, FCC

[matwal]

This is an excellent tutorial, it has a lot of great key concepts for the React application

[sayedmobashir]

You are great sir. Very thanks 👍 full for us for all videos

[jayrahane]

Thank you for making this video to clear all concepts!😊

[sravan]

A really good resource to learn react concepts... Thanks for this!!

[jopadjr]

3.1k+...Thanks !!! Great tutorial !!! May I know why you did not use NEXTJs or other frameworks ?

[aerofred]

Nice refresher. I'm probably rusty on a few.

[dqfxrcn]

in data load more section, if you are using react 18, you may encounter the error says same id
for 2 element, this happens
due to the new react feature called re-usable state, it basically when you mounts(render) components at the very first, this new feature automatically unmounts it to gain its previous state and remounts again. this cause hook to fire twice and consequently it assign same id to two different elements. To solve this issue, create cont boolean variable using "useRef" and set it to false, then assign true inside if statement of useEffect function. youtuber called Olli explain it well in his video called "UseEffect called twice in React 18"

[jahongirbektemirov]

Thank you for your efforts but your projects are very easy. It is good for beginners I think

[owaisahmadshah]

I was just looking for this thanks sir your are awesome thanks a lot