React 18 Tutorial

No video

React 18 Tutorial

Рет қаралды 109,143

Күн бұрын

React 18 Tutorial
Full Video
Web Dev Courses - www.johnsmilga...
Entire Playlist
• React 18 Tutorial - Intro
Source Code
github.com/joh...
00:00 - Setup
29:43 - Folder Structure
42:08 - First Component
52:35 - Extensions and settings.json
01:05:19 - JSX
01:19:21 - Nest Components
01:25:45 - Booklist
01:36:07 - CSS
01:46:41 - Images
01:54:41 - JSX - CSS
02:01:27 - JSX - Javascript
02:07:54 - Props
02:17:43 - Props - Somewhat Dynamic Setup
02:22:10 - Access Props - Multiple Approaches
02:26:54 - Children Prop
02:33:22 - Simple List
02:41:58 - Proper List
02:48:22 - Key Prop
02:52:30 - Props - Options
02:58:06 - Events
03:17:01 - Form Submission
03:20:45 - Mind Grenade
03:24:05 - Component Feature
03:29:10 - React Data Flow
03:34:52 - Challenge
03:44:01 - ES6 Modules
03:53:50 - Local Images (src folder)
03:59:35 - More Challenges
04:08:30 - Deployment
04:13:53 - useState Hook
05:43:29 - useEffect Hook
06:14:39 - Multiple Returns
07:23:12 - Folder Structure
08:22:17 - Forms
09:23:03 - useRef Hook
09:35:20 - Custom Hooks
09:51:30 - Context API
10:28:11 - useReducer Hook
11:11:49 - Performance

Пікірлер: 165

@sangameshkyatappanavar 5 ай бұрын

- (00:00:00) Setup - (00:30:18) Folder Structure - (00:42:43) First Component - (00:53:10) Extensions and settings.json - (01:05:54) JSX - (01:20:06) Nest Components - (01:26:20) Booklist - (01:36:42) CSS - (01:47:16) Images - (01:55:16) JSX - CSS - (02:02:02) JSX - Javascript - (02:08:29) Props - (02:18:18) Props - Somewhat Dynamic Setup - (02:22:45) Access Props - Multiple Approaches - (02:27:29) Children Prop - (02:34:57) Simple List - (02:43:33) Proper List - (02:50:57) Key Prop - (02:57:05) Props - Options - (03:02:41) Events - (03:21:36) Form Submission - (03:25:20) Mind Grenade - (03:28:40) Component Feature - (03:33:45) React Data Flow - (03:39:27) Challenge - (03:48:36) ES6 Modules - (03:58:25) Local Images (src folder) - (04:04:10) More Challenges - (04:13:05) Deployment - (04:18:28) useState Hook - (05:48:04) useEffect Hook - (06:19:14) Multiple Returns - (07:27:47) Folder Structure - (08:26:52) Forms - (09:27:38) useRef Hook - (09:49:55) Custom Hooks - (10:06:05) Context API - (10:42:46) useReducer Hook - (11:26:24) Performance

@franklinmayoyo Жыл бұрын

I watched all the small chunks of this tutorial. Indeed John you are the best. I started learning web development exactly One year ago and today am a full stack developer thanks to your tutorials. You made a monster in a very short period of time. I've now polished my React knowledge. Be blessed uncle John ❤️❤️

@CodingAddict Жыл бұрын

Glad it was helpful!

@franklinmayoyo Жыл бұрын

@@CodingAddict yes it did. I was so under pressure to make ends meet. I have been coding 14-16 hours a day for a full year. And next month am reporting to my first job. Can't wait to surprise you 🙈

@CodingAddict Жыл бұрын

Congratulations !!! Really happy to hear that 💪👍

@sajidmoosa1 Жыл бұрын

@@franklinmayoyo lucky you are, I am that much oçcupied in job, household and kids that today I could not get an hour to code.

@franklinmayoyo Жыл бұрын

@@sajidmoosa1 I understand your situation. The advantage I have is that I don't have any commitments. I just turned 22. I started being productive when I took care of my internet life. I spend a maximum of 40 minutes on social media a day (creating content only). Then I've optimized my KZfaq account. It doesn't distract me. Am certain there's a way you can create some time. Just go through your day and offload less important tasks. Just stick to the tech stack you've chosen. I can't imagine the amount of time I've wasted hopping from one language or framework to another. I just decided to stick with MERN. I don't do headlss CMS at the time. Hope you'll figure out how to create time.

@codewithguillaume Жыл бұрын

Oh my god ! What a TUTORIAL man! Even if I am already coding in react I want to do it

@jealouspotato1107 Жыл бұрын

Out of all the coding teachers in youtube that I encountered, you are the best, especially in teaching! Thank you for this update tutorial!

@CodingAddict Жыл бұрын

Glad it was helpful!

@christophermawela3318 3 ай бұрын

Thanks John, Have watched several React videos, detailed explanation now I understand the folder structure, was only browsing through now I will complete this tutorial, by far the best React Tutorial I have watched so...

@zubairkhan-cf5we Жыл бұрын

Finished your old 10hrs react video and looking for react 18 and just find this one from one of the best teacher

@CodingAddict Жыл бұрын

Thank you!

@DLeRoux Ай бұрын

John, you will always be my favorite teacher. Love your way of just being a dude explaining crap instead of trying to be all corporate and whatnot putting on an act. You and Paul, you dudes rock. I may want to change my nationality someday and join you two :)

@piyushtyagi4143 Жыл бұрын

You are incredible Teacher. I learned react from your previous course on FCC. I was amazing .

@redwansikder3847 Жыл бұрын

I started my React journey last year by your 15 react projects video. That video helped me a lot. If anyone will ask me for suggestion about starting React I'll recommend this video from now on.

@nemi7916 Жыл бұрын

finished the entire thing. thank you so much

@CodingAddict Жыл бұрын

You're welcome!

@ebenezeronuche9536 Жыл бұрын

Mr John, the way you have helped many of us achieve our dreams of becoming successful developers, it is my desire that everywhere you go people will always be there to help you achieve yours. keep on leading.. we will keep on following...

@abuzardawar444 Жыл бұрын

Dear John, I wanted to take a moment to appreciate the amazing content on your KZfaq channel. Your videos are not only informative but also engaging and entertaining. I truly appreciate the time and effort you put into creating high-quality content for your audience. Your expertise in React is truly remarkable, and I am grateful for the opportunity to learn from you. I can see that you have a wealth of knowledge and experience, which you are always happy to share with your viewers. I also wanted to mention that I have taken your Udemy course on React, and I can confidently say that it has been one of the best courses I have ever taken. The way you explain complex topics in a simple and easy-to-understand manner is truly impressive. Thank you for being such a great teacher, and for sharing your knowledge with the world. You are making a positive impact on the lives of so many people, and I am grateful to be one of them. Keep up the amazing work, and I look forward to learning more from you in the future! Best regards, Abuzar

@CodingAddict Жыл бұрын

Thank you Abu :):):)

@michaeldugan505 11 ай бұрын

5 hours in on KZfaq. It is so good, I decided to support him by buying the course on Udemy.

@pablofernandezruiz8024 Жыл бұрын

Good evening from Spain Mr. John. What a gift to find such a detailed course! I've been lacking on learning react for a few days because I couldn't find a course that matched the pace and the depth into details I'm looking for. I'm 8 hours in and already bought the udemy continuation. Thank you again for such a skilled tutorial 😊

@kutendasamakande3920 Жыл бұрын

indeed Mr John Smilga You are the best teacher ever i came to your channel knowing nothing but now i can develope a website thanks My all time teacher

@aliquliyev3561 Жыл бұрын

It'd be really perfect if you make a detailed React Native course like you did in React 18. I'll look forward to seeing it one day...

@BoopeaTech 2 ай бұрын

This is the best coding tutorial i've ever seen

@taddeusszabo3930 2 күн бұрын

Thank you for this amazing course.

@viniciussouza7198 Жыл бұрын

Its great that you always update your stuff!

@saminahmed2724 Жыл бұрын

I have just completed this 12-hours course. Thank you John❣ for this amazing React tutorial. If anyone wants to start learning React, I highly recommend this course.

@GuitarHope Жыл бұрын

Wow! That's awesome! I'm still on 4 hour mark. Very instructive so far.

@thatpower303 9 ай бұрын

Is this project based course?

@mealiasghar 7 ай бұрын

Sir John's courses are really addictive God Bless

@dhipin1213 Жыл бұрын

They way you make things understand is really awesome. Best tutor I have ever seen on KZfaq. Thank you so much John.

@WanKy182 Жыл бұрын

Great tutorial. In useCallback example at 11:44:31 you could use something like const removePerson = useCallback( (id) => setPeople((prev) => prev.filter((i) => i.id !== id)),[]);

@ahmetkotanci 8 ай бұрын

As my promise I will complete this splendor combination of photos put together by god

@chidiebereezeokwelume Жыл бұрын

God will bless you Mr John. I'm more than grateful 🙏 can't really thank you enough for all you've done for the community

@danmaina9731 Жыл бұрын

I have to say that I have shifted from hating react to falling in love with it, thanks to this single tutorial. Suddenly every thing makes so much sense. You are an excellent teacher. Thanks very much uncle John.

@jamesogorman3572 Жыл бұрын

I can't wait to start this tomorrow. Thank you.

@CodingAddict Жыл бұрын

Hope you like it!

@hamidmojarrad 9 ай бұрын

The best instructor I've ever seen

@joaomarcosfarias23 Жыл бұрын

John, you're the best! I'm addicted to learning from you. This month, I'm gonna be buying your Nodejs and React courses. I can tell all of your courses are high-quality ones. ✌️

@suprabhatkumar5478 Жыл бұрын

Born to worship you John. Thanks for the great work

@ramsesjr2767 Жыл бұрын

You're the best ever. I really appreciate your content, you're kinda hero for me 😉 I will always recommend your courses !!!

@codation 11 ай бұрын

You are the best, teacher, John! Thanks for this great React 18 tutorial. It's helpful for experienced guys like me to brush up on important topics that we have forgotten over the years. When are you bringing out your Next.js 13 course?

@bagwuel1053 Жыл бұрын

I'm really grateful, John. Thank you so much

@aerofred2002 11 ай бұрын

Good course. I personally tuned in for vite, router6, and redux-tool kit...the new features of react-18.

@karanpandit8806 2 ай бұрын

Great tutorial, by the way you sound like Sentinel Prime from the Transformers (DOTM) movie.

@subraths1279 Жыл бұрын

Thank you John. Just started but happy to see your new video

@kolawoleomotosho3073 Жыл бұрын

As usual. Detailed tutorial, great explanation technique.

@alessiodigiacomo3725 Жыл бұрын

Awesome tutorial and easy to follow! Netlify is great also.

@kristatomicic918 Жыл бұрын

Thanks so much for investing time in this great tutorial!

@mariusionut4098 6 ай бұрын

You re the real deal

@juniorMr Жыл бұрын

Amazing course

@asfandyar8088 Жыл бұрын

thank you very much sir for the amazing tutorial!!! ❤❤❤

@AlCee_ 3 ай бұрын

great tutorials! thank you!

@venkat757 Жыл бұрын

Than you very much❤ I am from India❤

@bharath2508 Жыл бұрын

Best react video

@chase6561 Жыл бұрын

Sir I have watched your video on node js and it was really helpful. Can you please add MERN project video on your channel , it will be very helpful for us . Thanks alot for the wonderful learning experience you are providing us 😊😊

@sksabiruddin4291 Жыл бұрын

Awesome As requested, you released this one long video🤗

@ashishpatil5099 26 күн бұрын

Very nice video of reactjs

@jev2602 Жыл бұрын

John this is the best React video i have seen, such clear explanations which make learning concepts much easier. If i purchase the course where should i start from as i have completed this KZfaq course and did not want to lean something we already covered?

@CodingAddict Жыл бұрын

Hello Jason, Thank you! You should start with Section 7 - Fundamental Projects

@jev2602 Жыл бұрын

@@CodingAddict Hi John, I am really interested in taking your Gatsby Course just wanted to know how up to date it is?

@rennan9891 Жыл бұрын

Greetings from Brazil! Muito bom esse vídeo!

@sriramgudupuru1664 Жыл бұрын

i am at 2:57:13, and i didn't felt well until i pressed like button

@rishiraj2548 Жыл бұрын

Great thanks for this

@anshurawat5033 Жыл бұрын

Thank you so much🙏🏻🙏🏻

@ubongeffiong7548 Жыл бұрын

You are the GOAT fr fr

@alexciotor Жыл бұрын

Awesome content as usual!

@CodingAddict Жыл бұрын

As always thank you Mr. Alex!

@subhash5122 Жыл бұрын

thanks for this awesome video currently at 9th hour

@kamaboko1 Жыл бұрын

On fire! ❤‍🔥 Great job!

@CodingAddict Жыл бұрын

Thanks 🔥

@user-so5bj3jx6c 6 ай бұрын

This course is amazing. But I want to know that he is referring to the projects that we will use such and such topics inside projects but I cannot see them. Can someone where they are which he is referring. I will be very thankful.

@aleksandarstanisic1848 Жыл бұрын

Iwill do it again

@INDUSTRYIND1 Жыл бұрын

Thank you so much

@hn2739 7 күн бұрын

Can you make course on solving problems and interview questions regarding react

@rishiraj2548 Жыл бұрын

Good day greetings

@ahmednoureldin6659 Жыл бұрын

Nice explanation.. is this tutorial related to Reactjs playlist ?

@sonusingh-jz1dz Жыл бұрын

Love your content John. Please share the latest discount coupons of your Udemy courses.

@CodingAddict Жыл бұрын

These coupons will expire on February 25, 2023 If you enjoy the content please leave 5 stars If you don’t see the discount, after clicking on the link, please provide coupon code manually. COUPON CODE = FEB-2023 Latest Course. MERN www.udemy.com/course/mern-stack-course-mongodb-express-react-and-nodejs/?couponCode=FEB-2023 All Courses Node www.udemy.com/course/nodejs-tutorial-and-projects-course/?couponCode=FEB-2023 React www.udemy.com/course/react-tutorial-and-projects-course/?couponCode=FEB-2023 HTML AND CSS www.udemy.com/course/in-depth-html-css-course-build-responsive-websites/?couponCode=FEB-2023 Javascript www.udemy.com/course/javascript-tutorial-for-beginners-w/?couponCode=FEB-2023 Styled Components www.udemy.com/course/styled-components-tutorial-and-project-course/?couponCode=FEB-2023 Gatsby www.udemy.com/course/gatsby-tutorial-and-projects-course/?couponCode=FEB-2023 Svelte www.udemy.com/course/svelte-tutorial-and-projects-course/?couponCode=FEB-2023 Serverless www.udemy.com/course/serverless-functions-with-netlify/?couponCode=FEB-2023

@sonusingh-jz1dz Жыл бұрын

@@CodingAddict Thanks John for such super quick response. Love from India.

@yogeshvanzara5553 Жыл бұрын

I watched it on udemey 😎

@ayeshask8564 8 ай бұрын

can anybosy give me the timestamp where the instructor uses the fetch functionality in the video? i cant seem to find it, please help

@adegunloyerebecca2671 9 ай бұрын

"I would like to inquire about the possibility of engaging in a business discussion concerning your Udemy course. The aim would be to explore

@CodingAddict 9 ай бұрын

Hello, I'm not interested in such opportunity.

@JahidHasan-zl7om Жыл бұрын

Plz make a series on RTK query with TypeScipt

@nanatieku5805 Жыл бұрын

Why was there a need for setValue(value + ) when working with the form? I would greatly appreciate explanation. 🙏🏽 I'm talking about the implementation here 9:22:40

@arshad1781 Жыл бұрын

Thanks 👍

@CodingAddict Жыл бұрын

No problem 👍

@jahmiel1945 Жыл бұрын

Hello sir, There is no Redux in your tutorial. Is redux important?

@CodingAddict Жыл бұрын

For bigger projects it is. It's part of the course, and also redux-toolkit tutorial is available on youtube.

@AKA-077 Жыл бұрын

3:21:53 what do you mean just passing and not invoking? if you click that button it gets invoked right.

@CodingAddict Жыл бұрын

Yes, that's correct.

@AKA-077 Жыл бұрын

@@CodingAddict so i don't get why did you mention it. You may mentioned it by mistake or i can't get it xD

@CodingAddict Жыл бұрын

Because some people might think that function gets invoked right away.

@AKA-077 Жыл бұрын

@@CodingAddict awesome tutorial tbh keep going

@GuitarHope Жыл бұрын

I'm just starting to learn react. When I type < npx create-react-app my-app> it throws an error . Help please! Anyone

@CodingAddict Жыл бұрын

And we cover solution during the video.

@K_James95 9 ай бұрын

I'm a backend dev and I want to learn a frontend framework. I'm stuck between learning Vue and React

@simplyskandi5973 Жыл бұрын

Hi John, pray you're well. This 12 hour course is exactly the same as the first 6 sections of your Udemy course?

@CodingAddict Жыл бұрын

Yes, that's correct.

@kruno25 Жыл бұрын

I have finished on udemy React course from Max Scwarzmuller. Is this same or better course?

@bmprajwal703 Жыл бұрын

hey john, 5:38:00 even if I log the value it hasn't updated to new state, can you check this out!?

@giorgidelibashvili2316 Жыл бұрын

i hvae problems because when i write images/bla bla its doesnot work like in your code and why

@regilearn2138 Жыл бұрын

please update react projects course also

@nidhinm3301 Жыл бұрын

any one completed this. is it worth watching . I am new to this channel and i have seen many tutorial and learned only basics thats y i am asking

@VARUNSINGH-vi2dd Жыл бұрын

I am facing one problem in my current project also. What if any object destructor props key is undefined or null? Like in current case author or title is missing? How we can handle that error? I had done my R&D but not found any solution in case we are using file extension as .js with ESlint. Please let me know if you have any solution...... #ReactJs

@omkarbhale442 Жыл бұрын

Hey, if im learning react for first time, should I watch the old video ot just this one will be good?

@jahmiel1945 Жыл бұрын

Watch this one, because react is updated and you need to learn the latest changes as the older on is slowly deprecated

@omkarbhale442 Жыл бұрын

@@jahmiel1945 oh okay, I was confused whether previous video was prerequisite to this one.

@vishalvivekm Жыл бұрын

Hey did you start learning this one ?

@omkarbhale442 Жыл бұрын

@@vishalvivekm na, I'm participating in a gamejam, so unity rn.

@vishalvivekm Жыл бұрын

@@omkarbhale442 great man, i was too tryna build some games with Unity :)

@MuhammadSaeed-su7tk Жыл бұрын

Hey john, thank you for this course, I received a notification from your channel that you have uploaded a new redux toolkit tutorial but now I'm not seeing the video on your channel. Did you remove it ??? Are you going to upload it again?

@CodingAddict Жыл бұрын

You are probably talking about freeCodeCamp video. Yes, they are reposting my videos. So it's the same content as React 18 tutorial video, but we just added my Redux Toolkit Playlist, which available here: kzfaq.info/sun/PLnHJACx3NwAcSgxrUwSzLBi681WdYmwsG

@manasuniyal2897 Жыл бұрын

thanks sir

@CodingAddict Жыл бұрын

Most welcome

@jovanbanks4644 Жыл бұрын

Whats the price to have access to ALL of your courses?

@ygaaaoo Жыл бұрын

in your udemy course, every video is up to date (in react course) ? or some videos is old because it's not so important to put in up to date (because I saw your video intro about this react course, and this video is a little old), but I want to buy the course in udemy. so what do you say to me ?

@CodingAddict Жыл бұрын

I'm sorry but it's extremely hard to answer your question. If you think that 2 month old video is old, then I guess, every udemy course is old. Yes, I'm updating only some specific parts of the course, since rest of the content is still valid.

@ygaaaoo Жыл бұрын

@@CodingAddict ok john, I understood now. So I was saying that the video intro is old, but it's not the video intro in specific, it's the "Video blur fix" (because it's one of the free videos to watch before buy the course, and I was considering this video as the video intro of the course), and I saw that the udemy interface was old in this specific video, but the intro video about the react course in specific is very good, and new, I'm sorry, I made a mistake.

@ygaaaoo Жыл бұрын

@@CodingAddict I made a mistake saying the "intro video" john, I'm sorry for this, I'm explaning this in the comment above.

@CodingAddict Жыл бұрын

Oh, I see what you mean.

@legomasters8237 Жыл бұрын

Hi John, could you please add latest react libraries such as Transact-Query (React-query), Zod, React-Hook-Forms to your courses ? I purchased it and waiting to see new videos like that. Really apreiciate your effort. Thanks a lot.

@CodingAddict Жыл бұрын

Hello. Eventually I will add a project with react-query but not the other ones.

@jayrajput3260 Жыл бұрын

Timestamps are missing😥

@lovelynduru-magnus3233 Жыл бұрын

Sir is there any topic that was covered here that was not covered in the old React tutorial and vice versa?

@CodingAddict Жыл бұрын

Both videos are 12+ hours long. I'm sorry but I'm not going to list the differences line by line :)

@lovelynduru-magnus3233 Жыл бұрын

@@CodingAddict There are some? I don't mean the recent React playlist. I mean the one of 2020

@CodingAddict Жыл бұрын

I was actually talking about 2020 one....

@lovelynduru-magnus3233 Жыл бұрын

@@CodingAddict Ok then

@cornerwayne3442 5 ай бұрын

miss yout old cute voice

@CodingAddict 5 ай бұрын

Ha ha. Thanks for trolling. There is nothing cute about my old or current voice.

@sigmacontentonly Жыл бұрын

is that video contain redux or ruflex?

@CodingAddict Жыл бұрын

nope

@sigmacontentonly Жыл бұрын

@@CodingAddict will you cover it sooner or later?

@CodingAddict Жыл бұрын

not ruflex (I have no idea what it even is), but I have separate tutorials for redux-toolkit and redux.

@sigmacontentonly Жыл бұрын

sorry it's react-reflex

@imdtap1448 Жыл бұрын

Is this the same Udemy course?

@CodingAddict Жыл бұрын

It's the first part of the course. I provided detailed description of the difference, in the beginning of the video.

@imdtap1448 Жыл бұрын

@@CodingAddict Thx John. Currently going thru the course and your js course.

@CodingAddict Жыл бұрын

Thank you for your support.

@mr.RAND5584 Жыл бұрын

Dont blink while watching this. Kidding.

@wkmgaming6097 Жыл бұрын

Can u plz add time stamps?

@CodingAddict Жыл бұрын

They are available in the description. I'm not sure why they are not showing up.

@ramvvram Жыл бұрын

Hi JS What happen your voice

@mrhunter7 Жыл бұрын

Please add time stamps

@CodingAddict Жыл бұрын

It has timestamps as well as subtitles.

@doublebeefstew 10 ай бұрын

8:44

@Sagar-kd3yr Жыл бұрын

DONE🥹🍻

@kim92se64 Жыл бұрын

2 h 8 m

@muhammadtahir-qc8ep Жыл бұрын

Your teaching method is too old. You are first creating all the components in one file then re-creating them to another file why you are not creating them separately from start?.

@CodingAddict Жыл бұрын

🤣🤣🤣