Build A React JS Website From Scratch - Beginner Tutorial Using React Router Dom

Follow along and see how I built this space travel website in React JS. We will be using a couple react packages such as "React Icons" and "React Router Dom V6" so we can have multiple pages in our React application. The homepage features a full width video hero component that we will create. Also, we will be passing in dynamic data via props to a hero image class component we create allowing us to reuse a component while adding different data to each page. I would appreciate any feedback from you. Thank you for following along.

Free Resume Template

ZeroTo Mastery:

Coding Challenges!

React-Router-Dom Version 6 Video:

☕ Buy me a Coffee ☕

Instagram 💪

Time Stamps:
00:02:45 - Install React Icons & React-Router-DOM
00:03:50 - App File Structure
00:05:05 - Create Home Component
00:09:20 - Setting up React-Router-Dom
00:12:20 - Navbar Component (useState Hook)
00:27:01 - Video Hero Component
00:38:09 - Footer With React-Icons
00:53:40 - Hero Class Component Passing in Props
01:00:45 - Pricing Component
01:11:10 - Training Component
01:24:01 - Contact Component
01:32:05 - Change Navbar Color When Scrolling

🔥 My Coding Equipment 🔥

[ІгорТкаченко-мп]

12:30 Navbar
15:30 Hamburger
28:00 Video
38:05 Footer
51:40 Pricing (route/page)
53:50 HeroImage (56:17 backgroud img)
1:00:00 Pricing props
1:00:40 Pricing (component)
1:11:15 Training (route/page)
1:13:30 Training (component)
1:24:24 Form

[drishtisaraf]

I have watched so many tutorials on React but this one has been the best. I don't think I'll ever have a problem again.

[Ssvah]

I was having some trouble working with routes and this video finally helped me understand and make my project finally working exactly how I wanted!

[jozi_jozi]

I'm so grateful for this tutorial. It was thoughtful (the part where he went like, 'everybody's gotta start somewhere', when talking about the media queries), well taught and well paced. Thank you so much Code Commerce!

[maycondouglas]

I'm Brazilian and I love your videos, it helps me a lot and I learn a lot from you, please keep making more videos like this <3

[ulugbekuktamov]

that was amazing practise thanks for that

[theentrepreneur]

Absolutely amazing tutorial and guide, honestly! Thank you for your time and effort, this has helped me learn tremendously. You have gained a subscription from both of my accounts. When I can I will be back to buy you a few coffees I promise. Take care and thanks again!

[Petahsaur]

You are amazing, nice modern design and straight to the point, thanks and good job!

[robertminardi]

Just finished, the tutorial. Great Job! I'm going to do the Netflix app next!

[SuperArnie]

Great Tutorial just finished the build.

[Joynal]

Love from Bangladesh. This video was too much helpful. Best wishes to you.

[newtontimos]

Good evening, thanks for the lecture, please, the video and the photos you used, in the assets folder, where can I get it?

[elmoustaphameimou]

thanks, sir very clear, hope you make more projects on react js.

[pascalmusabyimana]

my react-router is not working when i use npm start : ERROR in ./src/App.js 6:0-28
Module not found: Error: Can't resolve './routes' in

[LeanPerez]

Great tutorial men, thanks! i'm interest in improve skills in css-responsive and react, its a great video, greetings!

[orielamar]

I cant render the Home.js h1 example you did at 11:56. can i get any help ? i followed exactly what you did. im using react 18 tho and i used createRoot instead of ReactDOM.render. as google told me to xD. you got any discord i can crash in ?

[chrisvaughan]

could you please link the animation and images you're using. . . Couldn't find them in description!

[cjfranca]

Very good! congrats. Please tell me how I can set the social media link?

[paramgandhi]

can u use display:flex more as compared to grid?

[DailyNevFacts]

Hey there, I have hit a snag at 59.34 - image for 'Pricing Page' will not show. Could I have some guidance please?