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 🙂
https://www.youtube.com/channel/UCsKsymTY_4BYR-wytLjex7A?sub_confirmation=1
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
https://youtu.be/I2UBjN5ER4s
Here is the source code
https://github.com/briancodex/react-website-v2/tree/starter
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
source
Get the source code here:
https://www.codavilla.com/posts/react-website-using-hooks-and-router-with-reusable-components
With latest version of react js … I am not able to shadow same behaviour. Hero section is not working at all. I tried to clone your project nd run in local env but that is also not working. Please let me know anyone else is able to run
Is anyone else having an issue with the images not lining up correctly?
Where do you get these nice looking SVGs? Or did you make them yourself?
Amazing tutorial. Impressive CSS wizardry.
Thank you sir
bro getting all Errors why while importing ( import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; ) please respond brother
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 />}"
Help!!!
What is the extension that creates html element with the classes by typing a dot, that is so useful.
Hi Brian. It seems like the source code folder is not available?
for auto class creation go to settings in VS Code by pressing Shift + Control + P type settings.json into the search. Open Settings (JSON)
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": { "javascript": "javascriptreact" }
Hey he got an amazing font theme. I want the same, can someone tell me which theme is he using
You make really good videos man! please keep with this great work!!
where is the source cod?
The tutorial is good but make sure you stick with the version of the module is using , using latest version of react will get you a lot of error
another update regarding dom v6 => change this within the app.js ( <Route exact path='/' component={Home} />) TO (<Route path="/" element={<Home />} />)
hey brian! what extension you use for the folder and file icons?
Amazing Skills, but the return function in Button.js is broken and the site will not load. Cannot complete the tutorial in 2022.
srcButton.js
Line 28: Parsing error: Unexpected token (28:0)
srccomponentspagesNavbar.js
Line 28:12: Parsing error: Unexpected token, expected "," (28:12)
Hey Brian thanks so much for the awesome video, I am still new to React and you did an awesome job at explaining your code. However i got lost during the Button.js component creation, is that the react styled components way of building components you used or its something else, may you please make a tutorial that explains what you did there or just a tutorial to help us understand the concept you used when you created the Button.js component
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)
19:25 Switch has been changed to Routes (react-router-dom v6)
This is the 100th time I'm pressing cmd+s (my habit whenever a code editor is open 😌) while the video is playing, and chrome pops up the webpage saving dialogue 😩
woooow your video is very very cool
amazing tutorial thanks!!
You look like Latino but you sound like Afro-american btw AWESOME TUTORIAL
which icon extension is using
Hi Brian! thank for this amazing tutorial. I had no idea about how react works! I followed your tutorial, and tried to practice this. However I am not able to compile anything other than the navbar. Vs code doesn't show any error. But the HeroSection is not loading? (text and SVG, everything in Data.js) could you tell me what I could be doing wrong here. So glad I found your tutorials. You have a new sub!
1:10:16
58:46
Anyone have an idea why svg images no longer are showing ? They were at first
Great video! Amazing tutorial! Thanks
Great videos man. Learning a lot from you! But I feel stupid… lol. The only part I’m not getting is how you make the navbar menu items appear and disappear. What part of the code does that? Is it the JS or the CSS? Can’t figure it out.
nice
sdsadasd
nice
Great job… I want to ask.. the website content overlaps (mobile) how do I wrap it ?
How can I add a line break in the description:' ' within the data.js? Sorry for the question but I'm new to this. I will appreciate the help. Thanks! Cool tutorial by the way! 😛
there no package .json file
the father of responsive thnks
Wish you slowed down a bit and explained why and how things worked a bit more but thank you I learned a lot from this.