Learn React 18 with Redux Toolkit - Full Tutorial for Beginners
ฝัง
- เผยแพร่เมื่อ 14 มี.ค. 2023
- Learn how to use React version 18 and Redux Toolkit in this full course for beginners. React is a free and open-source front-end JavaScript library for building user interfaces based on components.
✏️ Course created by @CodingAddict
Source Code
React Tutorial: github.com/john-smilga/react-...
Redux Toolkit: github.com/john-smilga/redux-...
Contents
⌨️ (00:00:00) Setup
⌨️ (0:30:33) Folder Structure
⌨️ (0:42:58) First Component
⌨️ (0:53:25) Extensions and settings.json
⌨️ (1:06:09) JSX
⌨️ (1:20:21) Nest Components
⌨️ (1:26:35) Booklist
⌨️ (1:36:57) CSS
⌨️ (1:47:31) Images
⌨️ (1:55:31) JSX - CSS
⌨️ (2:02:17) JSX - Javascript
⌨️ (2:08:44) Props
⌨️ (2:18:33) Props - Somewhat Dynamic Setup
⌨️ (2:23:00) Access Props - Multiple Approaches
⌨️ (2:27:44) Children Prop
⌨️ (2:35:12) Simple List
⌨️ (2:43:48) Proper List
⌨️ (2:51:12) Key Prop
⌨️ (2:57:20) Props - Options
⌨️ (3:02:56) Events
⌨️ (3:21:51) Form Submission
⌨️ (3:25:35) Mind Grenade
⌨️ (3:28:55) Component Feature
⌨️ (3:34:00) React Data Flow
⌨️ (3:39:42) Challenge
⌨️ (3:48:51) ES6 Modules
⌨️ (3:58:40) Local Images (src folder)
⌨️ (4:04:25) More Challenges
⌨️ (4:13:20) Deployment
⌨️ (4:18:43) useState Hook
⌨️ (5:48:19) useEffect Hook
⌨️ (6:19:29) Multiple Returns
⌨️ (7:28:02) Folder Structure
⌨️ (8:27:07) Forms
⌨️ (9:27:53) useRef Hook
⌨️ (9:50:10) Custom Hooks
⌨️ (10:06:20) Context API
⌨️ (10:43:01) useReducer Hook
⌨️ (11:26:39) Performance
⌨️ (12:11:45) Redux Toolkit
🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
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
@@CoolestPossibleName I know
Thanks man❤
You are fantastic! Thank You :)
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.
why am i not having this settings.json file in my folder (to add emmet setup code) 1:00:19
It's great to be back on freeCodeCamp :) Thank you so much for posting !
I bought all your courses John after completing your JavaScript course. Currently learning react from you. Thank you so much for these awesome tutorials.
@@johntavolt7027 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.
Love your tutorials sir. i have learnt complete backend dev from you
Thank You For this course
@@CodingAddict love you John 💪🏾
4:24:01 - Vite! 💜
4:34:44 - Advanced React (Hooks, Forms, More Stuff)
4:47:00 - useState - 01...
4:51:22 - useState - 02...
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.
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.
Yes, you're absolutely right. I think his slow speaking and emphasis on words make it easy to follow him.
I agree. A million thanks to him
did you do the one by Maximilian on udemy?
@@zzh315 I did, yes
@@t3nshy haha, yes i just finished it, it was very confusing and outdated
John's teaching style is why I love coding 👍🏻
still hard to believe someone upload 10++ hours tutorial vids. Thank you for this !
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
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.
Don't Leave in middle bro. Just a gentle reminder... You have to finish it😀
+1
Your progress brother
what happened to your day 2? HAHA no update?
why am i not having this settings.json file in my folder (to add emmet setup code) 1:00:19
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!
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.
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!
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.
I know react,
Should i directly jump to redux part?
@@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.
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
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!
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!
Is there anything important you think is in that course that someone should learn as well?
@@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!
hey ! how is the course called on udemy, and is it any different (missing topics eg) from this video >?
this tutorial enough to get job? i am asking about this youtube tutorial video...
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??
This course comes just right in time :D soon starting my react journey. Thank you for the free course!
did this turtoil was good or did you find another course please share your experirnce
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.
Ne kadar zamanınızı aldı bitirmek
@@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.
çok teşekkürler.Başka tavsiye edebileceğiniz kaynaklar var mıdır@@ramazanerdem8417
çok teşekkürler.Başka tavsiye edebileceğiniz kaynaklar var mıdır@@ramazanerdem8417
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
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.
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
@@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.
congrats, i hope i get one too am on similar journey
@@bbyxbt5097 good luck 🤞
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
Started working on reactjs because i watched join teaching reactjs , the best reactjs teacher ever 🔥🔥🔥
John helped me to get my first job as a Software Developer, thank you brother
I was just in need and looking for this course what an amazing timing just super amazing
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.
haha lol!
I watched the entire course and I can say it is one of the best courses provided by John Smilga
I am really fan of John Smilga. His tutorials like your friend is teaching you something :) Great job John
This is by far the best react tutorial that i have come across. Thank you for the amazing content, mate. Cheers!
this tutorial enough to get job?
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.
bro did he explained any projects
One of my favorite React/Redux tutor. I love the subtle humor too 😁
I am excited to start it😍
Is it beginner friendly?
@@amaanullah13 yes, but you need to know some html css javascript before this
@@abubakar-emumba I know the first two but I am not so well versed in JavaScript💀
Not just the code, but also the optimizing.. super... love this....👍👍
I am a vue developer and i am looking forward in learning react Thank you john for your amazing simple and easy tutorial
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!
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! 😄
Hello! I know html,css,javascript and python, do i need anything else to get through this tutorial?
@@shakthi6351 response at 9:05
thank you john for this course, clear explanation, quality content, I recommend it to anyone who wants to start learning react.
9.5 hours in and I'm enjoying it, his way of teaching is damn good.
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! 😁
why am i not having this settings.json file in my folder (to add emmet setup code) 1:00:19
i have the same problem did u find any solution ?@@dhruvsharma2869
Amazing course. Thank you for this!
You guys are amazing, still in the frontend react section.
Thanks plenty, this was so helpful mastering hooks, context api and redux.
Right in time!
Thank you so much! :)
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.
Did i finish the course how was it?
@@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.
@@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?
@@inaamkhan7886 it is worth spending time on.
Thank you, pretty easy examples to understand the core
I really like John's way of teaching. He try to elaborate things in the easiest way possible.
If you say so I'll def give it a chance
@@amaanullah13 was it worth it?
Thanks for this amazing course.
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❤❤❤❤
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
too slow you are.
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.
This was a very good tutorial to refresh my knowledge. Thank you for all your efforts. ♥
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.
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
thank you mr john
You have my gratitude ☺️, for you I wish health, wealth and happiness
"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.
Great 😃. Another refresher
you're incredible. thanks for everything
Finally I have completed the tutorial after months of procrastination It's worth the time
best of luck.. what's ur next plan?
Hi, I'm from São Paulo! Excelente!!!
I'm in 4:47:00 (planning to complete it in this week); thanks for the course, the explanations are great (are practical and concise).
Now I am in 6:40:16
Now I am in 8:02:40
I just started Learning React and Redux and you'll put this 14hr bomb...💯😂
This tutorial was amazing! I am grateful for your excellent job sir 🤝
this tutorial enough to get job?
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!
Does he read just theories or even show the practically with example????
Lord, bless you fcc. Just when I needed it the most, I found it.
straight for learning react
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
The legend does it again!
Best react course thank you for this
Excellent teaching!!
John is my mentor. He tutored me without knowing me
THANK YOU FOR THE COURSE
Awesome guys!
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
Thank you john and freecodecamp
Cant wait to binge watch this
Most appreciated!!
Brilliant content Thanks!
Adding Timestamps would be just soo amazing
Thankx for all your efforts in making this video for free
The timestamps are in the description but TH-cam has a bug where videos over 12 hours don't always show chapters on the timeline.
@@freecodecamp You guys are the best ever. All love
Nice one, John 👍
Really full course, nice course
" The Best Teacher Educate With Their Hearts , Not Just With Their Mind " John Smilga is one of them . Huge Respect from Pakistan.❤
The best teacher I have ever seen in my entire life
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
},
},
nvm he explain this at the end of the video 14:06:13
thank you, very good :)
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
Is he german?
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"}
John is best teacher out there for Mern stack. He's not appreciated enough. It's sad
The best REAT tutorial on the internet
nice dude with cool tutorial👏👍
Amazing course
thank for sharing!
thank you so much sir 🤝
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.
Nice work
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
bro do u have the readme file of the course?
John is the best 💯
really helpful course
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
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!
I love this.
Damn John is back
learned a lot
Awesome 👌