Learn to construct a responsive React web site utilizing React Hooks and React Router on this newbie tutorial. We’re going to construct the entrance finish UI utilizing React JS. The principle sections of the location are made with reusable parts which you could customise and add wherever you need.
If you wish to comply with me alongside my coding journey, make sure you subscribe š
https://www.youtube.com/channel/UCsKsymTY_4BYR-wytLjex7A?sub_confirmation=1
Timeline
0:00 What we’re constructing
4:50 Create React App in terminal
9:30 Creating the pages folder
14:10 Putting in React Router
15:00 Including React Icons
28:53 Creating the Button Element
48:10 Entry the supply code
58:48 Creating the Hero part
1:10:15 Creating the Homepage
1:26:06 Including the Footer Element
1:30:27 Creating the Pricing Element
1:52:24 Updating the Routes pages
1:59:22 Including an exterior hyperlink in Footer
Watch my different React Web site Design Tutorial Right here
Right here is the supply code
https://github.com/briancodex/react-website-v2/tree/starter
You’ll want to like and subscribe! Be at liberty to refactor my code to make it higher. Additionally, let me know any cool tips or suggestions that I can add to enhance my subsequent mission
source
Get the source code here:
https://www.codavilla.com/posts/react-website-using-hooks-and-router-with-reusable-components
Having run time script error..guide me
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.
Hey Brian! how could I set different links on HomeSection for the buttonlabels on Data.js? without having the buttons next to each other
Awesome tutorial, 10/10. Liked and subscribed.
I liked that you always tell which commands you are typing, which is pretty important for beginners. Good design with responsiveness. I am a beginner, so I am not sure how snapshot tests would fit in development for a page like this (in the sense of: do we need to do it or you just did not do it because it wasn't the purpose of this tutorial?).
38:20
Just want to say thank you so much for sharing love your content man
i lost it when u started talking about Button,i guess for begginers like me this is too much
Hi Brian how do you move get started and the text to center can you explain please and reply asap i don't require an image
Thank you this is great! Can you also make a react bootstrap website?
does the user login and sign up show
Hello
How can i get the source code?
The code dosnt appear in the Github link you attached