Get started with React.js & React Router 6+

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/courses/
👨‍💻 Learn React.js Today
acad.link/reactjs
📝 Other Resources
Bestselling + 5 ⭐️ Rated React Book: www.amazon.com/React-Key-Conc...
👋 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/academind/react-co...
Extra CSS & JS files: github.com/academind/react-co...
----------
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!

[@untalivan1350]

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!

[@hossamayman3587]

I'm overjoyed to see this crach course. Thank you Max, for providing this amazing course.❤️

[@anton9410]

Thorough and concise tutorial, thank you!

[@buyssd]

That's amazing! Learning from scratch and being able to write a program after watching just one video is fantastic!

[@bakhtiyor_sulaymonov]

Thanks for the course Max, it was what I needed in the right time 👍

[@hliasfasilakhs6765]

Amazing job! Ihncredible in depth explanations for every part. You are one of the best . Thank you man

[@aelohinjuz]

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!

[@madae160]

Excellent, excellent, excellent. Thank you so much Max. You're explanations are the best.

[@WillBelden]

Thanks for making this available. I took one of your other courses (paid), and was surprised when I found you (Maximillian) doing this one!

[@kim92se64]

Really first time I understand what is the difference between imperative and declarative coding approach

[@dm-bn4nq]

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

[@codingwithhafiz]

You Solved my ReACT Router Problem i was facing in lastest version Thanks man

[@numaanjaved]

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.

[@rafidev2099]

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 🙏 😊

[@subhamsahu5600]

thanks for all of the amazing courses

[@PurpleWarlock]

Done. Thank you very much. I think I should try the Full Stack course instead. :D

[@CarlosHenriqueBarbosa]

Amazing course, great stuff! Thanks!

[@hichemblackwish2046]

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

[@unknownman1]

are u comfy now?

[@khalilmarzouki636]

@@unknownman1 🤣🤣

[@eng-sarah]

Thank you very much would you make a similar new crash course for react native ?

[@becbet1670]

Another great Crash Course from The best instructor Max ❤

[@swarnimpaudyal]

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

[@sagiv30]

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.

[@eriikelnino6545]

@@sagiv30 he just updated the course

[@PeterNatasha11]

As always from Maximillian, the best tutorials ever!

[@Shubhamkumar-lz2br]

My most awaiting video😍

[@meenakshighodke2935]

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.

[@ismailk5990]

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

[@ua2894]

oh man how i missed Max saying "ultiMATEly". the sheer joy!

[@guilhermecamargo5469]

Amazing, as always.

[@kollabor8]

I've gone back to the root of CRA, which is webpack, its simple to build, I like bein in the control seat

[@SharCourse]

I'm happy for the video

[@DJCava3000]

what's the app you're using to create rectangles with the computer's cursor???

[@FRITS-Kh]

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.

[@rcastillo8686]

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.

[@panicdispenser6586]

Thats what i thought when i started the vid today. And maybe add tailwind to it

[@rcastillo8686]

@@panicdispenser6586 he has a new video, react with typescript in UDEMY

[@sanaullahaq5568]

Thanks for the free crash course

[@RAMANKUMAR-fc8sf]

Thanks Max once again...

[@mohammedazharuddin7393]

Thanks max

[@wassupdoc7742]

The king is back ♥

[@atalibcodinglevel7518]

Amazing Course

[@MohamedSalem-qu8et]

Will you make a nuxt3js course soon?

[@kasper369]

Less go!

[@akhmadulloshokirov1427]

Hi Max. What is the name of the VS extension that you use to auto-format react code?

[@ronnelrodriguez8312]

Based on his 2021 react crash course, it's "Prettier".

[@calvinwilliams729]

I wonder why I couldn't find this course early and wondered around

[@saidakbarmahmudxojaev3508]

Great !

[@rusiraliyanage6643]

hey max, my auto reformating upon saving is not working :)

[@mel-182]

Hi Max, is this the same content in Udemy?

[@babar-khan]

Did you update your course on udemy ?

[@wibowomuhmmad]

Amazing crash course youtube video

[@discreetninja]

Maybe can do a course update for React 18 and Next 13.

[@asakurayoh3909]

Coming from the Angular background, React looks quite simple.

[@takurichardtaku4187]

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?

[@brajagopalmukherjee1588]

Max we need updated next js course ...react course is done for.us

[@Hersi-nj2hl]

Thans❤

[@aadityavijayvargiya2299]

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

[@businessuser5146]

Please do next 13 course too

[@umzzate]

where is the starting snapshot?

[@cancelbubble6535]

Any reason why you don't use typescript in your react?

[@haroldsomehands4271]

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.

[@ismailk5990]

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

[@higherpurpose1212]

Vue is better.

[@chippandenga6722]

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🙁😟😏

[@mizanurrahmankhan692]

max is great

[@mrfabulous3303]

1:30:00

[@janithchamikara3062]

3:15:37

[@Lamberson_]

1.08

[@CoconutwCoco]

1:03:00

[@MAHDI-ky3bp]

10:00

[@PurpleWarlock]

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.

[@traversethedom]

So many good instructors these days just focus mostly on React. Almost like it is the only framework. It's a very popular framework, but I feel it is getting way too overblown now. Just wish we had a very good tutor who teaches Angular as well as Max teaches and loves React.

[@andTutin]

absolutely agree

[@duztv5370]

Exactly.

[@waleedsharif618]

We should only have one good framework and react is perfect

[@traversethedom]

@@waleedsharif618 How is React the perfect framework?

[@QuocToanVu]

I think the reason there are so many react tutorials is that react NEED tutorial :) other frameworks are just simpler, better documentation or batteries included :))

[@BMikel]

What about "delete", "edit" post functionality for each individual post? Does this crash course cover this? Or only premium Udemy course has this? Thanks

[@whitykhan-ny3oi]

Anybody making notes

[@zakariabelassal1410]

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!

[@AntonioCabralNumberOne]

Coming from VueJS, trying react is painful for being such a organizational mess. I wish I never needed to use React ever!

[@higherpurpose1212]

Yep, pretty much like spaghetti coding, too many codes in too many places and it's becoming too irritating, plus now having too many frameworks to be used, starting to be overblown.

[@devsomu1352]

Am i the first one😁

[@connygu]

am I first???

[@kim92se64]

2h 1m

[@williamnaymin2415]

too many confuse variable to understand clearly

[@andTutin]

react is a mess

[@haroldsomehands4271]

yeah and i still wonder why people use it

[@higherpurpose1212]

@@haroldsomehands4271because in an organization, a senior dev with only React exp as front-end, will suggest to start building the system using React, then he will leave halfway, then company will hire more React Devs to continue work, or hire devs with basic react experience to maintain the system, so the dev becomes senior after 2 years and leave, start in a new company and use React because that's the only one he's good at, then build another system and the cycle never stops

[@ob34915]

At this point everyone knows react its not even skill anymore

[@martinlietz5375]

funny how the Bavarian accent is disappearing :-)

[@0164046424]

max are you update the big course in Udemy ? ❤❤😍😍😍😍😍😍❤❤❤❤

[@ExpatTraderFX]

2:31:51