React Website Tutorial - Beginner React JS Project Fully Responsive

Learn how to build a React website from scratch in this tutorial. We will use React Hooks and React Router for this beginner React JS Project. The website is fully responsive as well. Feel free to refactor the code and send me your versions!

Timeline
0:00 What we are building
2:58 Creating React app in terminal
7:50 Getting the source files
24:10 Creating the Button Component
45:00 Creating the Hero Component
52:04 Creating our Pages
59:30 Creating the Card Components
1:16:10 Creating the Footer Component
1:40:36 Replace Video Background with Image

If you want to follow me along my coding journey, be sure to subscribe :)

Here is the source code

Codeacademy Pro Review

[alques-dias]

Some notes from people who are going to code this now:

In react-router-dom v6, "Switch" is replaced by routes "Routes". You need to update the import from



import { Switch, Route } from "react-router-dom";


to



import { Routes, Route } from 'react-router-dom';

[icyrealm]

Yes! A nice modern reactjs tutorial (others were from 2 years ago!), straight to point and effective! THanks!

[imaninjakinda]

You killing it man, everything is super clear, and I have never worked with React and everything makes sense and I am making my own sites and doing more things with the skeleton example you provided. Thank you so much man !!!

[paulburg]

Your Button components were really interesting, the way you used the functions to change the CSS was brilliant. I'm new to React, but I'm definitely taking a lot from this! Thanks so much for the upload!!

[jalenmickey]

I'm 20 minutes in this video as of 11/8/2023 and some things have changed. I will post more along this thread as I go through the video. Please upvote this comment to help those looking to learn by using this video!

Must change App.js import to: import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

The app.js file should instead look like the following, Switch is no longer part of React-Router:
<>
<Router>
<Navbar />
<Routes>
<Route path="/" exact />
</Routes>
</Router>
</>

To get the hamburger menu working correctly, I'm sure it doesn't appear for most of you:
'fa-solid fa-bars' instead of 'fas fa-bars'

[fernandosegre]

I have been struggling with coding for rmonths, not getting the hang of it. Your video just enlightened the path!! Thank you very much for sharing your know-how Brian!!

[j-williamsuckau]

Honestly so great. This helped me get started in so many ways- thank you for putting so much effort into this tutorial, it is much appreciated!

[urbanadventures]

As a beginner frontend developer this video increase my awareness. I can figure out the ReactJS better and I am encouraged about my development journey with this video. Many thanks!

[urmomapollo]

This is great demonstration of React and its various uses! Also great for new engineers like myself that want a simple and clean website. GREAT JOB!!!

[severedghost]

Don't forget to take the Footer component out of the Home component, and put it into the App component. That way the footer is on every page.

[linusyong]

For those stuck at 53:16, you have to change the component to element, like this: <Route path='/' exact element={ <Home />}></Route>. I hope this helps

[arianmm-]

Amazing tutorial Brian!! I've spent like 4 hours trying to understand all the code and solve hundreds of errors, but it was totally worth it! U won a subscriber

[OMorningStar]

I'm sure I can recreate this, but I love coding along. Thank you, jumping in soon.

[jwhubert]

Holla for the peeps who made it to 1:37:20 and were just soldiering on when Brian said "If you've made it this far go ahead and hit that like." So well deserved. Thanks for this awesome tutorial.

[notmanymore]

Thank you so so much! I'm a student of web dev and I've just started learning React, while I got the basic concepts of how it works and the general syntax, it was hard to see how it actually works but your video really helped me put it all together! Huge thanks!

[fernandocoelho]

This was amazing man, thank you so much for this awesome work! Good job!

[MrFsudude]

This is really well explained and a beautiful site. Excellent content, thanks Brian

[marcusramirez]

Thanks Brian! Smooth and easy to follow. I look forward to watching more of your content!

[mitochondriaof]

So far the best React JS beginner tutorial video here in Youtube! keep it coming bro. ✌️

[sappasa]

Thank you, Brian! The content is focused and engaging!