Build 25 React Projects - Tutorial
Vložit
- čas přidán 14. 05. 2024
- 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 @sangammukherjee3009
Code:
🔗 20 React JS Simple Projects Link : github.com/sangammukherjee/25...
🔗 Weather App : github.com/sangammukherjee/we...
🔗 Food Recipe App : github.com/sangammukherjee/fo...
🔗 Shopping cart App : github.com/sangammukherjee/fo...
🔗 Expense Tracker App : github.com/sangammukherjee/ex...
🔗 Mern stack Notes App : github.com/sangammukherjee/me...
⭐️ 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
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
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.
I'm always in a hurry to learn things as fast as I can and in the process I forget the things I learned. Will take up your advice and take things slow from now on
I am 33. And I feel old already
Thank you for advising we the young ones
age has nothing to do with learning
@@dystopian_1I’m 27 and I feel old too
Thank you very much for such amazing course!
This guy is a React beast. Love the quick, no-nonsense problem solving.
totally agreed
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.
Hitting it out of the park again guys
Man it's wonderful ❤❤thank uhh
A really good resource to learn react concepts... Thanks for this!!
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
Your method fixed the problem instantly, I had narrowed it down to that particular line of code, but never considered changing prevData to products. Thank you!👍
@@AngelChoir-di5ez happy to help :)
in cosole why we are seeing first 20 two times is it because of useeffect
thanks, your answer help with the problem, now id like to understand why doesnt he had the same problem?
thanks👍
You are great sir. Very thanks 👍 full for us for all videos
I'm just about starting this tutorial. Thank you for providing this free tutorial. God bless you.
Awesome !!🥳🥳 Thank You for this amazing training opportunity 🦾
Nice refresher. I'm probably rusty on a few.
This is what i was searching for !
Bro is saving my life
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
Amazing explaination of everything♥♥
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);
}
lets goooooo. am stocked
Thanks for this ❤❤
amazing! thank u so much! XP
Thank you for making this video to clear all concepts!😊
3.1k+...Thanks !!! Great tutorial !!! May I know why you did not use NEXTJs or other frameworks ?
Thank you free code camp !
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"
The issue can also be solved disabling React.StrictMode from main.jsx. It's much more easier.
Can't wait
Thank you so much!! 😊
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 !!!!!!!!!!!!!!!!!!!!!!!!!!!
It was much needed video. Thank you, FCC
I love this guy! "I hope you are getting.."
This is perfect for me!
Legit ❤
2:57:20 You really could've used HTML element, it is way better to use for modal purposes, doesn't let you focus on background elements using TAB button
Sent me on a 4hrs derail, but got it at the end XD
@@NARUHINO09 glad to help. If you want logic behind it,
You create state variable that will open and close createPortal(). This should open the with .
Inside the create a reference (ref) variable to run the modal.open() function for element.
To close the dialog, in return statement, close dialog with dialogRef.close() and change the previous createPortal state variable to false.
Wow ❤
I was just looking for this thanks sir your are awesome thanks a lot
Thanks for the video
Super work
Lets go !!
Thank you for your efforts but your projects are very easy. It is good for beginners I think
Very good. Thanks.
On the collapsable tree project, it is much better to store a true or false value for the displayCurrentChildren instead of an object.
Thank you!!
Thank you guys.
thank you so much
Thanks 👍
Yo this is stacked!!!
It's horrible, just like Smilga's videos, just trying to bump up the number of projects and spamming code instead of learning, 25 projects in one video is pure insanity ( and horrible practice )
@@hellokevin_133 do you think it is better to work on one project and contribute on that to increase different type of features? is that your point or something else ?
Amazing
Hell Yeah, Time to get a Job
This is great!
Second view🎉
Thank you for the inspirational tutorial. But in some cases, even for me, as a beginner, it's quite obvious that some of the approaches are not optimal. Let's say in Load More Data project, the fetching should only happen once in useEffect upon render, but all the next times it's not an effect, but an action - when a user clicks Load More Button.
I think that a lot of this projects can be done in much easier way and that this is overly complex without need and because of that it is not very good for beginners
I would even say that there is a lot of bad practice
Thank you
Hi Sangammukherjee,
First of all, thank you very much for this video. I learned a lot from you - your clarity, speed, real-time solutions, and seamless presentation are incredible.
Secondly, I have two issues. Firstly, the link to the shopping page repository isn't working; it redirects to the food recipe repository. And secondly, I want to integrate my shopping cart with the MercadoPago API. Can you help me with this?
Let's go
The spokesperson's beard is looking extra fresh and clean today. Ok ok. I see ya brother.
Niiice
Can u upload backend projects also please...
Thanks you
*data && data.length > 0* can be simplified with just *data?.length > 0*
This is what I'm looking for .....
Great video, but tell somebody to the instructor about optional chaining (result?.product?.length) insted (result && result.product && result.product.length) as example.
Optional chaining bloats the code if you have to support es5. It's also prone to unexpected side effects if not used correctly.
Great
First view
Hi can I ask what extensions you are using in vs code? I see that react import statements are auto importing for you where as I was having to manually enter them and wondering why my code wasn't working while following along. Thanks in advance and thank you for this tutorial!
For anyone else wondering the same thing I found and installed "Auto Import" and it's doing the job nicely :)
@@michaelgibbs-eb1ed thank you
Bro where are you from Mumbai or Delhi?❤❤
Can someone please explain why are they using try catch block at 2:14:52 ? what possible error could emerge from trying to get an item from localStorage? I have tried to access the value of a nonexisting key from localStorage and it just gives NULL. But it doesn't throw any error... thank you for your time!
Upload same with angular as well. Love u all❤
1st
🎉🎉
First
Nice ind
first
❤❤❤
❤
Do you have this kind of projects for backend nodejs
this should be labelled differently
1:21:10 - Doubt: How to stop page refresh in the 'Load More' button section?
e.preventdefault()
Awesome, but it is a pity that at least some of projects arent in typescript
Typescript is for people that have already dived into the ocean of web development. If the course was in typescript, it wouldn't be easily understandable by beginners
After learning from this course, I'll be porting all JS apps to TS
The dream is over gentleman unu
Is it beginner friendly tutorial? I have started to learn React a few days ago at a bit sick of boring tutorials. So will I learn all the main concepts though out the video?
i watched but this course before not explain react js true way
Yes. Can’t see any best practices in developing apps
Any other suggestions?
@@MP-eq8fx john smilga i guess , best way to learn how to think using react js , what is the component mentality , he is explain clearly. , you check it out jhon smilga accordion project in john smilga 15 react project and check it accordion in this video , you understand what we say
It's because it's not a react course. It's a course for cracking interview rounds of a company. If you don't know html, css , javascript, and react, then it's not for you.
its not a first problem bro , first problem is react mentality component mentality . You can check the accordion you understand what i say , every accordion item should be component and maybe we can use items component and inside this we can mapping this items and every items can be one component , you understand ? In this this accordion project you can check it out all codes in one components , this is not a react clean code mentality , we can use more component as possible as we can @@rayyanabdulwajid7681
Good projects but poorly taught. I gave up at the 4 hour 30 mins mark after he rendered the 9 boxes from the TicTacToe grid via 3 rows mapping through three objects of 3 length with the values all being set manually.
In the projects where he uses real apis it's a good challenge but when he mocked up a js file with a function that returns an object rather than just putting the json data directly in that file I got super confused.
The projects are great and well selected for their level of difficulty but the naming of components, variables and functions is odd (the use of get in variable names in particular).
The presenter seems knowledgable but the way he presents makes me wonder if he's dumbing things down for some hidden reason or if he just has a lot of weird habits that he never gives you the backstory on.
I get this error on the weather app
"Uncaught TypeError: Cannot read properties of undefined (reading 'temp')". Sometimes i don't get it and it's working...what could be the problem?
why is everyone still showing the create-react-app instead of vite or any other?
👍🏻
What is the best way to learn from this tutorial
Could you attach the data file (data.js) mentioned in the first project? I could not find it anywhere. Thanks.
the github repo has all the 'dummy data' for each of the individual projects in their respective folders.
Thanks!@@nedlee1644
should also upload the figma file of it for better practice
🙏👍💯
Shopping cart API is not working properly as it's not displaying the images.
Is anyone facing the same problem ?
i am getting a error in the shopping cart app when i use the useSelector hook it says Selector unknown returned the root state when called. This can lead to unnecessary rerenders, please anyone help me if you know why this is happening
Second comment
Need video projects for node js
The LoadMore button at 1:21:10 renders the results twice on initial rendering.I believe its because react 18 renders useEffect twice .How can I work around it ?
it is normal at first beacause it render also with the strict mode
damn its hard
04:06:30 weener
Wiener💀
how is it possible to return in a return scope? in 50:00
Great content! I hope there would be something like this for Sveltekit or HTMX! Cheers!
I DONT GET IT AT All how are 4 cards so complex to make in react,js ? is something wrong with me ?
What about the 'children' props accepted by the GlobalState i.e GlobalState({children}) 6:08:00? Don't we have to pass any props to the GlobalSate? (Perhaps something like ... < GlobalState children={} > )