React Website Responsive Tutorial - Beginner React JS Project Using Hooks and Router

Learn how to build a responsive React website using React Hooks and React Router in this beginner tutorial. We are going to build the front end UI using React JS. The main sections of the site are made with reusable components that you can customize and add wherever you want.

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

Timeline
0:00 What we are building
4:50 Create React App in terminal
9:30 Creating the pages folder
14:10 Installing React Router
15:00 Adding React Icons
28:53 Creating the Button Component
48:10 Access the source code
58:48 Creating the Hero section
1:10:15 Creating the Homepage
1:26:06 Adding the Footer Component
1:30:27 Creating the Pricing Component
1:52:24 Updating the Routes pages
1:59:22 Adding an external link in Footer

Watch my other React Website Design Tutorial Here

Here is the source code

Be sure to like and subscribe! Feel free to refactor my code to make it better. Also, let me know any cool tricks or tips that I can add to improve my next project

[isaacsante]

Decided to follow this for my intro to web dev class...I never knew how I made sites without react. Thanks King

[kylehorton]

If anyone else has an issue with the code completion that Brian talks about at 11:30, I'll post below what I did to resolve it! Awesome vid!

- open "find a file" search bar (ctrl + p on windows)
- search ">settings.json" and open it
- paste in :
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
- reload vs code!

[jnoe]

for auto class creation go to settings in VS Code by pressing Shift + Control + P type settings.json into the search. Open Settings (JSON)
true,

"emmet.includeLanguages": { "javascript": "javascriptreact" }

[dabzbmg]

Man, honestly the way you explain things is a huge change from different tutorials. Other tutorials are cool, but I appreciate you being real with your explanations. Ill be watching a lot of your videos.

[bianchialex]

Just the begining alone showing what to delete and what error messages to worry/not worry about is invaluable. thank you.

[JohnDoe-rjkf]

open settings in vscode in json format and paste this: "emmet.includeLanguages": {
"javascript": "javascriptreact"
}

[trevometer]

If your app won't render at 1:14:24 like Brian's does (I had this issue). Go to app.js line 12, replace "exact component={Home}" with "element={<Home />}"

[secnytsecnyt]

Amazing tutorial, I’ve learned a lot about React and the main ideas surrounding it. Thanks, you’ve earned a new sub!

[sayka_tech]

19:20 You just have to change Router to BrowserRouter as Router (at the import) to let the error go away. Other changes (Switch, Routes) are not needed (at that point)

[victoriagray]

Finally a React video that I can follow and understand!!! I am a beginner and appreciate that you went slow and showed everything! thank you!!!!

[napoleaonbonaparte]

This is definitely not a beginner tutorial, I have to say what you did there is just awesome. I've learned so much from watching it, keep up the good content.

[Tsabora]

You're a fantastic dev and a great teacher. Many thanks from Zimbabwe.

[sayka_tech]

19:25 Switch has been changed to Routes (react-router-dom v6)

[bswill]

Im quite amaze man. You just doing this for 6 months wow. you are ntural

[godfreyndiritu]

So much to learn from this tutor, he has a wealth of knowledge

[jadeferreira]

Great tutorial! Thanks, Brian!

Just one thing to note, the mobile menu works fine in Chrome, however in Firefox, the mobile menu items are positioned at the bottom of the page.

[Felix-dhtl]

12:00 Just select the appropriate Language mode at the bottom-right on the screen: set it from JavaCript to JavaScript React.

[renatolins]

Thats a good tuto, but I recommend everyone to consider using Styled components: Easier for maitaining code as it avoids name clashes by default, it adds prefixes by default, gives the power of Javascript to styling, allows making more shareable/self-contained components, and if everything is a component, everything can be tested. Cheers

[pablotapia]

dude just created his own buttons library inside his project and im just here repracticing some styling lmao

[ulisesmak]

You make really good videos man! please keep with this great work!!