Learn React 18 with Redux Toolkit - Full Tutorial for Beginners

[@CodingAddict]

It's great to be back on freeCodeCamp :) Thank you so much for posting !

[@CodingAddict]

@john tavolt Thank you for taking the time to share your kind words with me. I am thrilled to hear that you found my JavaScript course helpful and that you are currently learning React from me. Your feedback means a lot to me, and I am glad that my tutorials have been beneficial in your learning journey.

[@CURIOSITYcapital]

Love your tutorials sir. i have learnt complete backend dev from you

[@yogeshkakde1091]

Thank You For this course

[@otiamaino2461]

@@CodingAddict love you John 💪🏾

[@juniorMr]

Thanks a lot man

[@saurabh_mahurkar]

Day 1 - completed 01:30:00, so far so good No issues in SetUp React - A javascript Library to build User Interfaces. Everthing in react is a Component. JSX -> Mix of Javascript and HTML. Each Component must return one parent element. Components should start with the Capital Letter.

[@ArunSharma-bi4ey]

Don't Leave in middle bro. Just a gentle reminder... You have to finish it😀

[@yashkale5639]

+1

[@newagene8276]

Your progress brother

[@zzsszzzxc9310]

what happened to your day 2? HAHA no update?

[@dhruvsharma2869]

why am i not having this settings.json file in my folder (to add emmet setup code) 1:00:19

[@Nikhil-dp2mw]

You ppl are the best for uploading such content for free on YT Every upload on this channel increases my respect for this community of fcc

[@welcomeJava]

still hard to believe someone upload 10++ hours tutorial vids. Thank you for this !

[@ramazanerdem8417]

I realized that I had never been trained by anyone before, until I was trained by John Smilga. Perfect narration, perfect presentation skills, perfect educational content. Thanks for everything.

[@ahmetkotanci]

Ne kadar zamanınızı aldı bitirmek

[@ramazanerdem8417]

@@ahmetkotanci tamamen sana bağlı. Benim genel react bilgim vardı bu videodan önce. Bu eğitimide 1 haftada tamamlamıştım. Ama js den sonra react a ilk kez başlıyosan yavaş yavaş çalışmanı öneririm. 1 ayını ayır.

[@ahmetkotanci]

çok teşekkürler.Başka tavsiye edebileceğiniz kaynaklar var mıdır@@ramazanerdem8417

[@ahmetkotanci]

çok teşekkürler.Başka tavsiye edebileceğiniz kaynaklar var mıdır@@ramazanerdem8417

[@crimsionCoder42]

I don't know if he meant to do it or if it's just natural. This guy is the first instructor that doesn't rush through everything by speaking fast. If you're new it's the perfect pace but if you are releasing and put it at 1.25 it's damn good. Great Job guys!

[@abdullahkarahan61]

John's teaching style is why I love coding 👍🏻

[@t3nshy]

I've done a React tutorial before where I was left beyond confused, after doing this one for the first 4 hours I can definitely say John's way of teaching is much better and a lot easier to understand. John does very well at going through errors and explaining exactly why there are happening and how to fix them.

[@torbenkohler1185]

Yes, you're absolutely right. I think his slow speaking and emphasis on words make it easy to follow him.

[@machinelearningproject]

I agree. A million thanks to him

[@zzh315]

did you do the one by Maximilian on udemy?

[@t3nshy]

@@zzh315 I did, yes

[@zzh315]

@@t3nshy haha, yes i just finished it, it was very confusing and outdated

[@shahinuddin4418]

Few days back I finished your React 18 12-hour-long course from your own channel. Now I will focus on the Redux part here. Thanks a lot for new course again. You are an amazing teacher on youtube.

[@morning5tarr]

I know react, Should i directly jump to redux part?

[@shahinuddin4418]

@@morning5tarr You can, but you can also pick the topic(s) you need more clarification. You can also do the challenges in the course and then jump to redux part.

[@imdtap1448]

I'm currently going through this course in Udemy. John is top-notch, clear, concise, and unbiased. Very nice to see this posted for learners who can't afford to pay. Make the best of it and it'll help get you where you need to be in your React career. All Hail the Great Smilga!

[@mgm8075]

Is there anything important you think is in that course that someone should learn as well?

[@imdtap1448]

@@mgm8075 I feel it depends on your skill level with React. It covers a lot and is fairly well rounded. John's teaching method is straight forward. If you're a beginner, go thru it in its entirety. If intermediate, start at his advanced section. And if you're already skillful, it's a great reference or review. It's worth it in my opinion. Good luck!

[@jakobpusterhofer5182]

hey ! how is the course called on udemy, and is it any different (missing topics eg) from this video >?

[@salahudeensuhail]

this tutorial enough to get job? i am asking about this youtube tutorial video...

[@zakirhussain-jr1vs]

is there any difference regarding its content from the one that is available on udemy or is it all the same on both the platforms??

[@franklinmayoyo]

I just stopped by to thank John❤️❤️ Thanks to your tutorials and courses I landed a full stack job this month after tirelessly coding 14-17hours a day for a whole year. I've already watched this video on your channel as well. Thank you so much John ❤️💕💕❤️❤️. Fellow developers, don't give up. John is the only tutor you need.

[@amaanullah13]

14-17 hours a day 😱 That's a lot, amazing. I am also looking for such roles, can you share some tips, please? Like how much do we need to know to get into REACT job

[@franklinmayoyo]

@@amaanullah13 Build projects and share your learning online. It can be on social media platforms or dev forums. Sometimes you'll get recruiters contact you directly. I tried applying for jobs many times until I gave up. I thought of another strategy ( building real world projects) and sharing the build process. That's what worked for me at least.

[@bbyxbt5097]

congrats, i hope i get one too am on similar journey

[@franklinmayoyo]

@@bbyxbt5097 good luck 🤞

[@zishanpathan9966]

Thanks for motivation us , I have a question about that I am also a learner and learning frontend but when it comes to sharing on socials and make connections (learning in public) I'm stuck , I don't know where to start and as an introvert I find it difficult I request you to guide me or at least suggest me something that will help . 😇Thanks again

[@Fetrah2]

Contents ⌨ (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 ⌨ (12:11:30) Redux Toolkit

[@Fetrah2]

@@CoolestPossibleName I know

[@curly-braces]

Thanks man❤

[@arnoczkyzoltan6158]

You are fantastic! Thank You :)

[@mgm8075]

might want to fix context API ( starts @ 9:54:00 ), useReducer ( starts @ 10:30:35) and Performance (starts @ 11:14:14), the times are off by a few minutes.

[@dhruvsharma2869]

why am i not having this settings.json file in my folder (to add emmet setup code) 1:00:19

[@silkywaterCascade]

Just completed watching the whole 14hrs, along with doing the challenges hands-on. Feeling happy, thanks a lot for this tutorial, the best react, RTK tutorial out there.

[@i3gallery]

I've been watching this content and I am about an hour in so far. 1) Concise and useful. 2) Doesn't make any assumptions about who is ingesting the content. 3) Strikes a great balance between being informative and keeping an overhead view on the material being taught. On a personal funny note, I found the following quote to be entertaining, "you can add a hundred divs, who am I to judge". I'm from the UK so the word "div" can be used to describe brainless individuals and so whilst that always provides me with a smirk, it's even more funny when you consider the quote can be applied to ignoring good semantic HTML code practices. Anyway, really enjoying the content so far and gaining such a clean understanding of what React has to offer.

[@moodymonstrosity1423]

haha lol!

[@javadsmd7831]

12 hours inside of this code Jhon Smilga teach everything that is related to react and give all description that is necessary ,I am happy that i took this course

[@zohayer.mehtab]

Almost five hours in and I am very much happy with the teaching style of John as how he provides examples and explain everything thoroughly.

[@itgiants5218]

I like the way he speaks, it's very straight forward and clear accent I don't need a lot of effort to understand what he's trying to do, thanks for sharing such an amazing content.

[@shwetankmishra]

4:24:01 - Vite! 💜 4:34:44 - Advanced React (Hooks, Forms, More Stuff) 4:47:00 - useState - 01... 4:51:22 - useState - 02...

[@alexanderhergert875]

This course comes just right in time :D soon starting my react journey. Thank you for the free course!

[@hanzalakhan-by8si]

did this turtoil was good or did you find another course please share your experirnce

[@briandacallos4234]

John helped me to get my first job as a Software Developer, thank you brother

[@maahad767]

Although I don't write comments in general, maybe I am a little bit ungrateful, but this is one of the best way of teaching I've seen. Although many may find that his way of speaking is a little bit hard to catch for some, but his way of delivery and covering the content is awesome. I can not express enough how much do i like his teaching here. Great Job sir!

[@duzgunkenan]

I am really fan of John Smilga. His tutorials like your friend is teaching you something :) Great job John

[@CodeCraftWithQubais]

Started working on reactjs because i watched join teaching reactjs , the best reactjs teacher ever 🔥🔥🔥

[@CuteFunnyVideos20]

"I am John(Smilga) from coding addict" I always feel happy when I hear the above statement on intro to a tutorial bcos I know I'm going to learn something big.

[@adekoyadayo4698]

Started this tutorial with hopes to get a full grasp of react and so far, the level of detail is outstanding. Thank you for this.

[@AkashDas-wu7xl]

Did i finish the course how was it?

[@adekoyadayo4698]

@@AkashDas-wu7xl it’s a unique course and I’m still on it. So far so good, I’m way better than before because of his teaching style and I had done other react courses.

[@inaamkhan7886]

@@adekoyadayo4698 How was the course bro did you get any advance knowledge from it? Suggest me please should i spend time on it or not?

[@adekoyadayo4698]

@@inaamkhan7886 it is worth spending time on.

[@rishabh4893]

This is by far the best react tutorial that i have come across. Thank you for the amazing content, mate. Cheers!

[@salahudeensuhail]

this tutorial enough to get job?

[@sumitkeshari9819]

Mind Blowing... Finally I completed this tutorial.... Started on : 2024-09-03 and Completed on : 2024-09-30 Amazing Content by Jhon... God Bless you!!!

[@Ryokans]

I just finished the whole thing as a refresh while working on my final Project. Thanks for this video it really made me put all the concepts together in my head, especially on the Redux section, I had so much confusion in that area and now I can finally see it clearly. Thanks again!

[@AhmadCode077]

" The Best Teacher Educate With Their Hearts , Not Just With Their Mind " John Smilga is one of them . Huge Respect from Pakistan.❤

[@snex-techprogrammer5110]

Finally I have completed the tutorial after months of procrastination It's worth the time

[@shaleenchowdhary]

best of luck.. what's ur next plan?

[@NoAD-k1k]

If you are confused at the beginning... don't worry... just give yourself a chance for 1 hour and 30 minutes and you will enjoy every second of the tutorial... Thank you John

[@ayush--gupta]

I really like John's way of teaching. He try to elaborate things in the easiest way possible.

[@amaanullah13]

If you say so I'll def give it a chance

[@allmarvelcontent]

@@amaanullah13 was it worth it?

[@tipssedlife]

I just learned the redux toolkit from this course. John you are an amazing instructor. Now I'm quite confident to use redux in my projects.

[@sriharsha1886]

bro did he explained any projects

[@ota-ke]

One of my favorite React/Redux tutor. I love the subtle humor too 😁

[@amaanullah13]

I am excited to start it😍 Is it beginner friendly?

[@abubakar-emumba]

@@amaanullah13 yes, but you need to know some html css javascript before this

[@amaanullah13]

@@abubakar-emumba I know the first two but I am not so well versed in JavaScript💀

[@falcongold2024]

1:28:37 beginning 1:43:27 grid for books 1:48:17 images (hosted/public) 1:55:15 inline CSS 2:03:54 refactor code 2:09:19 re-setting values 2:12:00 working w/ props 2:29:13 a single instance button 2:34:32 list iteration for props 2:39:37 arrays w/ map 2:43:00 removing names newNames array

[@alviahmed7764]

too slow you are.

[@LynX_amv572]

I am a vue developer and i am looking forward in learning react Thank you john for your amazing simple and easy tutorial

[@morofernando639]

I watched the entire course and I can say it is one of the best courses provided by John Smilga

[@ashwotacharya997]

I was just in need and looking for this course what an amazing timing just super amazing

[@pawanchandrajoshi841]

9.5 hours in and I'm enjoying it, his way of teaching is damn good.

[@zb2747]

John is one of THE best instructors out man

[@anilkumarkarapa1602]

Almost all courses are for $8. I reckon there is some kind of offer/sale going on.

[@piyushlovanshi8142]

You have my gratitude ☺️, for you I wish health, wealth and happiness

[@Rikimkigsck]

The best teacher I have ever seen in my entire life

[@3illanon145]

Lord, bless you fcc. Just when I needed it the most, I found it.

[@kushaljivarajani9863]

I just started Learning React and Redux and you'll put this 14hr bomb...💯😂

[@x_czt]

Not just the code, but also the optimizing.. super... love this....👍👍

[@quentinguille1482]

During the redux shop part, if you start from scratch and use npm create vite@latest shop -- --template react you might enounter a bug around 13:55:00 and 13:57:00 The extraReducer should be writen like this : extraReducers: (builder) => { builder.addCase(getCartItem.pending, (state) => { state.isLoading = true }) builder.addCase(getCartItem.fulfilled, (state, action) => { state.isLoading = false state.cartItems = action.payload }) builder.addCase(getCartItem.rejected, (state) => { state.isLoading = false }) }, instead of : extraReducers: { [getCartItem.pending]: (state) => { state.isLoading = true }, [getCartItem.fulfilled]: (state,action) => { state.isLoading = false state.cartItems = action.payload }, [getCartItem.rejected]: (state) => { state.isLoading = false }, },

[@quentinguille1482]

nvm he explain this at the end of the video 14:06:13

[@piyushlovanshi8142]

I, as of now have covered 9 and a half hours of lecture and there are some times where a few additional google searches will help, apart form which this course is a good place to start React

[@yousufolatunji3424]

John is my mentor. He tutored me without knowing me

[@brysongracias7882]

The best REAT tutorial on the internet

[@AbdessamadMektoubi]

thank you john for this course, clear explanation, quality content, I recommend it to anyone who wants to start learning react.

[@heromil]

Amazing tutorial. I learned a lot with no prior knowledge of react. Thanks you so much for putting such effort in doing these videos and providing us all this knowledge! 😄

[@shakthi6351]

Hello! I know html,css,javascript and python, do i need anything else to get through this tutorial?

[@mohamedaminedammak2319]

@@shakthi6351 response at 9:05

[@BizzaroBrainBoi]

Thank God this crap isn't on scrimba, 43:13, This guy has a great sense of humor, and this guy has the best react course on all of youtube. THIS GUY IS THE BEST!

[@databasemadness]

The legend does it again!

[@ejikeaneke8129]

Thanks for the course you point out things that confuse me they are very little but can be frustrating if you don't get it.

[@moisesespiritosanto2195]

Hi, I'm from São Paulo! Excelente!!!

[@dandy90]

Can't wait to start this after I finish a current course I'm taking for React. This will help it sink in even more.

[@dogememers520]

Adding Timestamps would be just soo amazing Thankx for all your efforts in making this video for free

[@freecodecamp]

The timestamps are in the description but KZbin has a bug where videos over 12 hours don't always show chapters on the timeline.

[@Peter-tx7qf]

@@freecodecamp You guys are the best ever. All love

[@abaysankarbcompa2179]

great content so much structured ,which will give clarity and those redme files are ment to help at times of need to revist this topics , worth spending 14hr of content . john you deserves even more for such educational content...love from india❤❤❤❤

[@ektefaie]

Simple, current, easy to understand and effective! This video is so refreshing. I have gone through other tutorials online and left confused. This video is like a good book that once you start reading it, you won't put it down. I am 3 hours into the video and I have learnt tons. I love how John is displaying the different ways of achieving the same result and how he explains his preferred method with his logic supporting it. All other tutorials only show you one way of doing things and that was what had confused me in the past. Thank you @john-smilga!

[@mst736]

herr smilga, bis jetzt, Sie sind am besten javascript und react programming language bin ich kennen gelernt. Ich wunsche Ihnen viel gesundheit um wir vor Ihnen Unterritchten genissen könnten. Es tut mir leid wenn mein deutsch nitch so gut ist. xD

[@TheSoprah]

Is he german?

[@imohanthony]

Great 😃. Another refresher

[@ahadkhan8872]

For Challenge 03-conditional-rendering/starter/07-user-challenge 7:25:30 I have done all that in 2 lines {user ? `Hello There ${user.name} You have successfully logged in` : "Hello there , Please login"} {user ? "Logout" : "Login"}

[@emperorvipulgaming]

8:33:00 8:53:00 9:25:00 9:37:42 custom hooks 10:09:00 context API 10:30:40 useReducer 11:15:10 Performance 11:33:18 memo() 12:12:45 REDUX TOOLKIT 13:01:51 redux toolkit - functionality setup Completed 02 OCT 2023 - 12:35 AM

[@boredom_postings850]

bro do u have the readme file of the course?

[@asinsama414]

Thank you, pretty easy examples to understand the core

[@Philddev]

Thanks plenty, this was so helpful mastering hooks, context api and redux.

[@ArdhiSasongko-h7p]

straight for learning react

[@anti-bug]

1:53:09 If the src="./images/..." is not working then use src={require('./images/...')}

[@SesamemeStreet]

Amazing course. Thank you for this!

[@thepriestofvaranasi]

1:06:00 2:23:57 2:34:30 2:59:28 3:36:10 4:09:20 4:24:00 5:21:24 5:45:52 6:35:33 7:12:27 7:25:40 7:32:15 7:44:55 8:07:21 8:24:40 8:54:00 9:05:57 9:25:28 9:38:30 9:53:55 10:34:30 10:48:15 11:14:13 11:55:22 13:13:17

[@israelamos8896]

Thanks for this amazing course.

[@adanadow4967]

Programming is really not for lazy people. Anyone who wants to be a software developer/developer must be ready to learn, learn and learn even if he becomes a seasoned pro with over 30 years of experience.

[@LUMINAS-1337]

Right in time! Thank you so much! :)

[@fotyG]

Hello from Latvia! Thank you very much, I enjoyed every minute of this tutorial! 🙏 Managed to lock myself out of both APIs 😅 Looking forward to do some more on your full course! 😁

[@dhruvsharma2869]

why am i not having this settings.json file in my folder (to add emmet setup code) 1:00:19

[@boukhfouad2095]

i have the same problem did u find any solution ?@@dhruvsharma2869

[@Tjiaz-]

Nice one, John 👍

[@MaiOsama-o3h]

Great project, I have learned a lot.. thank you

[@KejriwalBhakt]

John is best teacher out there for Mern stack. He's not appreciated enough. It's sad

[@alsaamit]

Dab Dab Dab 😅 and welcome to the course

[@amrmashaal834]

thank you mr john

[@NawedZan-gt2wl]

conditional rendering - 6:15:50 he postpones cleanup function for later

[@rutikbhanushali957]

Excellent teaching!!

[@grotsunfull]

Awesome guys!

[@zihuatenejo]

I don't recommend this video to people who are fully new to react, this is better for people to recap things. The way he explains things is assuming you already know stuff and just immediately get it. It's best to learn react elsewhere, where you can read about the concepts, they explain better!

[@SahilKumar-qx3xi]

Does he read just theories or even show the practically with example????

[@ClipxDaily]

Absolutely wrong what video did u watch he explains everything well

[@alsaamit]

Don't say this .. He is a GOAT..

[@fandedeto4603]

Noob

[@KateBabaali]

John is legend 🥇

[@Jeff_Leon]

This tutorial was amazing! I am grateful for your excellent job sir 🤝

[@salahudeensuhail]

this tutorial enough to get job?

[@hichem18]

Best react course thank you for this

[@chai112mno]

Damn John is back

[@vijayprasad3093]

For me John smilga is a one of the greatest frontend teacher ever 😇

[@thatintellectualguy]

My question is: Can we attach multiple events with onclick, like at 3:21:21, can we attack handleClick also with onclick??

[@marshallvids1]

THANK YOU FOR THE COURSE

[@mazharansari7813]

This is the comment for those who wants to learn only Redux part you can safely skip to redux part john sir has explained every single thing If you don't understand wathc 3-4 times In my case first it was difficult to understand but Whenever I am making my personal project and If I feel like stuck I came back watched it again and again so just have a little patience you will get it

[@adarsh_endeavour]

7:25:37 - Cleanup Function

[@seiitkhanotegali7734]

nice dude with cool tutorial👏👍

[@firdausahmat1960]

Thank you john and freecodecamp Cant wait to binge watch this

[@_sunsetstories_]

I feel cheated, just bought this course on udemy and now I see it's available on KZbin for free!😮

[@Tanguylecoutre]

it appears that he covers way more in his paid course (especially practice projects) wouldn't say you are cheated when he provides like 60+hrs of more content there.

[@_sunsetstories_]

@@Tanguylecoutre great, thanks for info

[@Tanguylecoutre]

@@_sunsetstories_ Actually, nevermind in hindsight he posts these practice projects also on his own channel. other topics such as axios or his typescript / next.js which is covered in his course is also posted on his youtube channel. But I guess we need people like you to support him so he keeps on pushing this content. so thankyou for that

[@test-se6pi]

you're incredible. thanks for everything

[@sakshamgupta8779]

1:38:33 For my reference.

[@randomname882]

Amazing Nowadays I am trying to learn React It will help me a lot but I know It takes about 5days to complete it but I will do

[@ronitchinda6857]

Brilliant content Thanks!

[@jamalnaserhamzaei5806]

John is the best 💯

[@ogundekoadegbenga3766]

🥳🥳🥳🥳🥳 I have missed this voice!!!!