Discover ways to construct a React web site from scratch on this tutorial. We are going to use React Hooks and React Router for this newbie React JS Undertaking. The web site is totally responsive as properly. Be at liberty to refactor the code and ship me your variations!
Timeline
0:00 What we’re constructing
2:58 Creating React app in terminal
7:50 Getting the supply information
24:10 Creating the Button Element
45:00 Creating the Hero Element
52:04 Creating our Pages
59:30 Creating the Card Parts
1:16:10 Creating the Footer Element
1:40:36 Substitute Video Background with Picture
If you wish to comply with me alongside my coding journey, you should definitely subscribe 🙂
https://www.youtube.com/channel/UCsKsymTY_4BYR-wytLjex7A?sub_confirmation=1
Right here is the supply code
https://github.com/briancodex/react-website-v1/tree/starter
Codeacademy Professional Evaluate
source
Get the source code here:
https://www.codavilla.com/posts/react-website-travel-website-design
I got an error saying react doesn’t have an import called “switch”
He- what is up everybody…
Stupid me- the ceiling
Which vs code customization he is using
I got stuck at 'npm install react-router-dom' due to high vulnerability error "Inefficient Regular Expression Complexity in nth-check package:nth-check patched in: >=2.0.1 dependency of: react-scripts [dev]"
I tried moving 'react-scripts' from 'dependencies' to 'devDependencies' in package.json then running npm audit –production but still getting the error.
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'
This was really helpful!! Though 3 yrs old now, I was able to get the entire thing working (with some help from the comments) 🙂
i am not knowing where to start from scratch.
Can anyone please help me? I followed the steps to create a navbar, and I was able to get it. However, in the mobile version, especially on iPhone XR, iPhone SE, and Galaxy S8, my header doesn't span the full width of the screen. Additionally, my menu extends beyond the screen width, causing horizontal scrolling (only when clicking on the menu icon). This gives it an unprofessional appearance. Please help me fix it if you have any suggestions.
Can anyone please help me? I'm using Visual Studio Code (version 1.83.1) with ES7 React/Redux/GraphQL/React-Native snippets, JS JSX Snippets, and Reactjs code snippets. However, I'm unable to use snippets in JSX within my App.js file. I can still use snippets in HTML files
i'm not able to see the hero section
can anyone help me?
this is just what i needed to practice after studying some theory part of the hooks and all that help me with gaining confidence. Thanks Man👍
Thanks for your efforts in making this amazing video. I already downloaded it but from where i can receive the images please?
Great job, brother! Thank you for your guide.
Hamburger menu items are not aligned properly, any solutions?
To have your autocomplete back you have to uninstall the 'ES7+ React/Redux/React-Native snippets' extension
maybe you can install it again when you need it
I followed the Tutorial, but it have problems showing me that HeroSection part with video?
Much appreciated for this tutorial, looking forward to more contents like this to come! Thx a lot😊
Thanks Brian for sharing your knowledge. I created my first ever react static website cause of this video. Thanks a lot!
Just a quick tip: if emmet isn't working for you on the .js files, just rename the file to .jsx. The extensions are pretty much the same thing so you won't have to change your code
How do i make my cards larger?
Good day , Where I can find codes of this project ?
Check the render method of `App`.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `App`.
taking a error like this,how should I fix it?
very instructive, thanks..
Card images not showing up, anyone have a solution for this?
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
thanks
Great explanation!
btw if you are having problem with video bg not showing up, fix it with: <video src={process.env.PUBLIC_URL + '/Videos/video-2.mp4'} autoPlay loop muted />
.input-areas{
text-align: center;
}
you forgot this in footer.css
I saw all the videos, then I found your video, You told me, you have done a good reaction in it. In the rest of the video, I used it in HTML, I wrote the link in the response, as I do it in HTML, you have adopted the correct date. i think your video is awesome