Get started with React.js & React Router 6+
ฝัง
- เผยแพร่เมื่อ 14 ต.ค. 2024
- React.js is the most popular frontend JavaScript library you can learn these days. Get started with React.js, its core concepts & advanced topics like routing with React Router 6.4+.
🖥️ Official Website & Courses
academind.com/...
👨💻 Learn React.js Today
acad.link/reactjs
📝 Other Resources
Bestselling + 5 ⭐️ Rated React Book: www.amazon.com...
👋 Social Media
/ maxedapps
/ academind_real
/ academind_real
/ academindchannel
💬 Academind Community on Discord
/ discord
----------
🎓 Course content:
00:00:00: Introduction
00:01:03: What Is React?
00:06:37: React requirements
00:08:43: Creating a React project
00:12:07: Exploring a new React project
00:15:31: Understanding how React works & the role of components
00:23:14: Building & using a custom component
00:34:26: Outputting dynamic values
00:39:27: Reusing components
00:45:24: Working with “props”
00:51:35: Styling & working with CSS Modules
01:01:39: Time to practice
01:08:07: Preparing the app for “state”
01:11:49: Listening to (user) events
01:19:37: Adding & using “state” (via useState())
01:29:33: Lifting state up
01:38:38: The special “children” prop
01:45:56: Rendering content conditionally
01:54:52: Sharing components & more state management
02:02:39: Adding form buttons
02:06:10: Handling form submission
02:12:25: Updating state based on previous state
02:17:53: Outputting list data
02:24:29: Connecting frontend & backend
02:30:36: Sending a POST request
02:34:46: Handling side effects with useEffect()
02:43:48: Handling “loading” state
02:48:08: Understanding & adding “Routing”
02:52:01: Adding routes with “React Router” (v6+)
02:57:34: Adding layout routes
03:01:40: Refactoring route components & more nesting
03:07:12: Adding links & navigation
03:15:19: Data fetching via “loader” functions
03:24:23: Submitting data via “action” functions
03:35:28: Adding dynamic routes
03:44:06: Summary
----------
📁 Attachments:
Starting project: github.com/aca...
Extra CSS & JS files: github.com/aca...
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
I've been doing React for a few years now, and your video is just so good that I am watching it entirely, it is not that I don't know the stuff, it is that it is so enjoyable. It is the best video course/tutorial, I have ever seen, to be honest, I wish I had had teachers like you when I started. I found you because is time to move on to the new react router 6.4+ but stayed for the rest of the information!
Already about to complete the course Max! I would really suggest the one seeking to learn react should get his course in udemy. Excellent course. Thankyou
The course published 6 years ago. Is it still relevant. I know more videos added in the last years, but sometimes its not enough and in some reviews of courses in udemy there are complains about things that not updated.
@@sagiv30 he just updated the course
@@sagiv30 Course is fully updated
Thnx .. Finally ! Someone giving us a new course of 2023 and not from ages ago ... Hope i could be comfy with react once i finish this one
are u comfy now?
@@unknownman1 🤣🤣
Really first time I understand what is the difference between imperative and declarative coding approach
Thanks for making this available. I took one of your other courses (paid), and was surprised when I found you (Maximillian) doing this one!
Amazing Crash Course. Thanks a lot for always keeping your courses up to date.
Your courses are awesome. Could you please make a course on FastAPI which is a Python Framework for backend. It would be valuable to learn FastAPI from you.
is there a lot difference between this and that of 2021?
I 'm watching 2021 and 1hour left to finish it, is it better to complete it first then watch this video? please
Max, thank you for the amazing course, you're my favorite teacher! Are performance issues addressed in any other courses? For example, topics like UseMemo and UseCallback. This is interested because React often triggers unnecessary component renders.
That's amazing! Learning from scratch and being able to write a program after watching just one video is fantastic!
MAX great job as usual. I just want to add some feedback. In today's industry you never see a react application without typescript and this changes substantially how react looks. I understand there are courses for both, but it would be really nice to have a crashcourse like this with React and typescript.
Thats what i thought when i started the vid today. And maybe add tailwind to it
@@panicdispenser6586 he has a new video, react with typescript in UDEMY
Thanks man, just finishing it up! So useful, did'nt knew you could do all that with the router implementation, thanks so much, keep up the great work!
Thanks for the course Max, it was what I needed in the right time 👍
oh man how i missed Max saying "ultiMATEly". the sheer joy!
Will you make a nuxt3js course soon?
Wow that is awesome - greate crash course 😊 Thank You to share this on YT - this by the way is a great idea for promo - with that quality - I'm your client - this what I learned here make me hungry for more - finally someone who explain me react as should be 😊 Thank You Max and Academind 🙏 😊
I'm overjoyed to see this crach course. Thank you Max, for providing this amazing course.❤️
Hi Max, is this the same content in Udemy?
I took your complete web development course 2.0 on udemy once, and it got me started on my job in a better way.
Nice to see you again in this crash course for react as well.
You Solved my ReACT Router Problem i was facing in lastest version
Thanks man
Thank you very much would you make a similar new crash course for react native
?
Amazing job! Ihncredible in depth explanations for every part. You are one of the best . Thank you man
Excellent, excellent, excellent. Thank you so much Max. You're explanations are the best.
Done. Thank you very much. I think I should try the Full Stack course instead. :D
Thorough and concise tutorial, thank you!
thanks for all of the amazing courses
As always from Maximillian, the best tutorials ever!
I will buy your book about React because i loved your NodeJS, Angular and React course. I learned a lot from you on udemy and youtube. This year i will learn react native with your course on udemy too
Amazing crash course youtube video
what's the app you're using to create rectangles with the computer's cursor???
I've gone back to the root of CRA, which is webpack, its simple to build, I like bein in the control seat
You have a react crash course for beginners 2021
Is it true to watch it first even we are in 2023
I have no idea about react
Thanks for the free crash course
Another great Crash Course from The best instructor Max ❤
Amazing course, great stuff! Thanks!
Coming from the Angular background, React looks quite simple.
Hi Max. What is the name of the VS extension that you use to auto-format react code?
Based on his 2021 react crash course, it's "Prettier".
The king is back ♥
Everything worked perfectly until 3:08:00. Now I'm getting "[plugin:vite:import-analysis] Failed to resolve import "react-router-dom" from "src\main.jsx". Does the file exist?" Did something change with React Router? Another tutorial I saw was importing { BrowserRouter, Routes, and Route } and not { RouterProvider, createBrowserRouter }.
i want to know that this course is updated react version or older react version. please tell me i want to know
@@venkateshburra9174 The video was posted a year ago. I'm assuming it was up-to-date a year ago.
Amazing Course
My most awaiting video😍
Maybe can do a course update for React 18 and Next 13.
please the part where you use onChange so that when you click on the back the form disapear. i had try to by pass it but mine not going .the form still remain. please how can i go about it?
I wonder why I couldn't find this course early and wondered around
Any reason why you don't use typescript in your react?
because TS is for another course i think. he probably doesnt want to expose too much in a single course. smart move i must say.
Did you update your course on udemy ?
Amazing, as always.
hey max, my auto reformating upon saving is not working :)
I'm happy for the video
Please do next 13 course too
What about "delete", "edit" post functionality for each individual post? Does this crash course cover this? Or only premium Udemy course has this? Thanks
Max we need updated next js course ...react course is done for.us
Thanks Max once again...
I was making good progress until I installed react icons and tried fixing audit errors. I am now stuck and cannot restart the server app😢😢😢
Apparently need to downgrade my nodejs🙁😟😏
1:21:35 its very important to understand how react works but it is not the most viewed! and this is the common mistakes made by ppl who want to learn new techs ! they omit how things are working under the hood!
Coming from VueJS, trying react is painful for being such a organizational mess.
I wish I never needed to use React ever!
where is the starting snapshot?
Great !
Thanks for the tutorial. But things are weird. "Yeah, the form's state content is gonna be tied directly of the first post in the list. Forget the other list items."
I guess this due to the component's logic you are trying to instill in us but it feels like there is too many curve balls.
Thanks max
Hey can anyone help me to solve the issue of npm run dev command is not runnning and throwing error after everytime i closed the project and opening it after some days??
please help
Less go!
Thans❤
1:30:00
3:15:37
max is great
1.08
10:00
too many confuse variable to understand clearly
Anybody making notes
am I first???
Am i the first one😁
these people are all sounding like they were paid to intentionally dont create a logic connection of interaction of languages, their specific purposes, based on available products, 3 hours 45 minutes 29 seconds for a element, not being duplicated in another example, coming to a generalized conclusion, forcing people to get irritated. thats not good. They are like unmature kindergarden book readers.
2h 1m
react is a mess
yeah and i still wonder why people use it
At this point everyone knows react its not even skill anymore
funny how the Bavarian accent is disappearing :-)
max are you update the big course in Udemy ?
❤❤😍😍😍😍😍😍❤❤❤❤
1:03:00
2:31:51