Get started with React.js & React Router 6+

Рет қаралды 135,521

Жыл бұрын

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!

Пікірлер: 103

@hossamayman3587 Жыл бұрын

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

@anton9410 Жыл бұрын

Thorough and concise tutorial, thank you!

@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!

@aelohinjuz 7 ай бұрын

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!

@bakhtiyor_sulaymonov 11 ай бұрын

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

@buyssd 7 ай бұрын

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

@kim92se64 Жыл бұрын

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

@madae160 Жыл бұрын

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

@hliasfasilakhs6765 Жыл бұрын

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

@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 7 ай бұрын

@@sagiv30 he just updated the course

@subhamsahu5600 Жыл бұрын

thanks for all of the amazing courses

@WillBelden 6 ай бұрын

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

@numaanjaved 7 ай бұрын

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.

@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

@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 🤣🤣

@becbet1670 Жыл бұрын

Another great Crash Course from The best instructor Max ❤

@eng-sarah Жыл бұрын

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

@Shubhamkumar-lz2br Жыл бұрын

My most awaiting video😍

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

@PurpleWarlock Жыл бұрын

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

@PeterNatasha11 Жыл бұрын

As always from Maximillian, the best tutorials ever!

@ua2894 Жыл бұрын

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

@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 11 ай бұрын

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

@guilhermecamargo5469 Жыл бұрын

Amazing, as always.

@DJCava3000 Жыл бұрын

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

@rcastillo8686 8 ай бұрын

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 7 ай бұрын

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

@rcastillo8686 6 ай бұрын

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

@sanaullahaq5568 5 ай бұрын

Thanks for the free crash course

@FRITS-Kh 3 ай бұрын

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.

@SharCourse Жыл бұрын

I'm happy for the video

@mel-182 Жыл бұрын

Hi Max, is this the same content in Udemy?

@wassupdoc7742 Жыл бұрын

The king is back ♥

@kollabor8 Жыл бұрын

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

@RAMANKUMAR-fc8sf Жыл бұрын

Thanks Max once again...

@wibowomuhmmad 7 ай бұрын

Amazing crash course youtube video

@MohamedSalem-qu8et Жыл бұрын

Will you make a nuxt3js course soon?

@mohammedazharuddin7393 Жыл бұрын

Thanks max

@akhmadulloshokirov1427 Жыл бұрын

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

@ronnelrodriguez8312 11 ай бұрын

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

@rusiraliyanage6643 Жыл бұрын

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

@atalibcodinglevel7518 10 ай бұрын

Amazing Course

@babar-khan Жыл бұрын

Did you update your course on udemy ?

@takurichardtaku4187 10 ай бұрын

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?

@kasper369 Жыл бұрын

Less go!

@saidakbarmahmudxojaev3508 Жыл бұрын

Great !

@discreetninja Жыл бұрын

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

@calvinwilliams729 11 ай бұрын

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

@aadityavijayvargiya2299 10 ай бұрын

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

@asakurayoh3909 Жыл бұрын

Coming from the Angular background, React looks quite simple.

@umzzate 7 ай бұрын

where is the starting snapshot?

@businessuser5146 Жыл бұрын

Please do next 13 course too

@Hersi-nj2hl 28 күн бұрын

Thans❤

@brajagopalmukherjee1588 Жыл бұрын

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

@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 2 ай бұрын

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

@BMikel 9 ай бұрын

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

@mizanurrahmankhan692 Жыл бұрын

max is great

@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.

@mrfabulous3303 10 ай бұрын

1:30:00

@janithchamikara3062 11 ай бұрын

3:15:37

@whitykhan-ny3oi Жыл бұрын

Anybody making notes

@MAHDI-ky3bp 2 ай бұрын

10:00

@zakariabelassal1410 4 ай бұрын

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!

@CoconutwCoco 11 ай бұрын

1:03:00

@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 :))

@Lamberson_ Жыл бұрын

1.08

@AntonioCabralNumberOne 10 ай бұрын

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

@higherpurpose1212 3 ай бұрын

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.

@connygu Жыл бұрын

am I first???

@devsomu1352 Жыл бұрын

Am i the first one😁

@williamnaymin2415 Жыл бұрын

too many confuse variable to understand clearly

@kim92se64 Жыл бұрын

2h 1m

@andTutin Жыл бұрын

react is a mess

@haroldsomehands4271 Жыл бұрын

yeah and i still wonder why people use it

@higherpurpose1212 3 ай бұрын

@@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