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 🙂
https://www.youtube.com/channel/UCsKsymTY_4BYR-wytLjex7A?sub_confirmation=1
Here is the source code
https://github.com/briancodex/react-website-v1/tree/starter
Codeacademy Pro Review
https://youtu.be/Ca5QvDw92wo
source
Get the source code here:
https://www.codavilla.com/posts/react-website-travel-website-design
damn cant get the solution to get the images displayed as cards.. 🙁
yooo this tutorial just showed me every single thing i needed to learn in one place much appreciated
why after i add {button && <Button buttonStyle='btn–outline'>How It Works?</Button>} my localhost turn into white page? 🥲
goood
uf you can send me the link to the font awsome cdn or do you have to upgrade to pro
For future people, if your nav-menu is not rendered as 42:42, remember to add justify-content: start to the .nav-menu.active in Navbar.css as following:
.nav-menu.active {
background: #242222;
left: 0;
opacity: 1;
transition: all 0.5s ease;
z-index: 1;
justify-content: start;
}
it doesn't show on browser
Thanks for your tutorial!
And for everyone who got stuck at 54:20: if your page doesn't show up, at first try using Routes (don't forget to import it from react-router-dom) instead of Switch. And in <Route/> use element instead of component. And if it still doesn't work try adding < and /> around Home. This helped for me, so maybe this will prevent u guys from searching and searching on google! Code example below:
<Router>
<Navbar/>
<Routes>
<Route path="/" element={<Home/>}/>
</Routes>
</Router>
If you are failing to render image at 1:15:29 and your images folder is in the public folder, go to the App.css file and change
this 👉🏾 .services {
background-image: url("/images/img-2.jpg"); ….to this 👉🏾 .services {
background-image: url("/public/images/img-2.jpg");
Module not found: Error: You attempted to import /videos/video-1.mp4 which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
Pleease help me on this tq
The video arent displaying foe me but i followed correctly every steps.. Any idea what can be my problame?
What emmet extension are you using?
Very good night <3
I'm like your way of thinking, how you organize your projects. Thanks)
1. Instead of component={Home} you need use element={<Home />} in App.js;
2. Also instend of <video src="./example"></video>, you need import video in HeroSection.js: import video from "../assets/videos/video-1.mp4" – format required!!! And after import use: <video src={video}></video>
—————–
I don't know why it's working, but it's working :0
Thank you , very much dear bro 💙
Hey im trying to follow along, but when I’ve followed the button components building, its still displaying as a bullet point list any fix appreciated or suggestions
If you're following along now, you'll also need to make sure your Route in App.js is using an element prop in order to ge your page content to display. So for home for example, it would be this:
<Route path='/' exact element={<Home/>} />
For those using react router v6:
function App() {
return (
<>
<Router>
<Navbar />
<Routes>
<Route path='/' element={<Home />} />
</Routes>
</Router>
</>
);
}
above will fix your path so that the Home page will show up every time.
Anyone else having issues with <video src> part, or the backgroun-image: url(), I tried moving the files to src but no luck
Hey I'm not sure if you still react to comments on here but,
When actually using a logo for the header instead of the text with the font awesome icon, the image does not scale with the rest and makes everything misaligned, I also would like the logo to stay on mobile view as well.
The issues with normal scaling is that the black bar shortens more than the end of the screen does (so you start to see the background) and when even smaller the image just floats away. Any tips to fix it?
Hey – how are you getting the elements to create simply by typing some kind of alias? It's not working for me
i put npx create in the terminal but its not working
Can I use this project in my portfolio? Is it legal?
I think I managed to learn the essentials through this video…
where to write code, can some one reply me please i m new for this but i wanted to create aa website on my own.
which theme are you using in vscode?
having issues with this error – Module not found: Error: Can't resolve './Components/Navbar' in '/Users/admin1/website/src'
Hi, could you make a video on,How to fetch data from sql server database stored procedure to react app frontend
what is the type={type} attribute in the button for? it's never used. wouldn't it give you error?
Thanks for thanks
for those who has problem to display the video, change the code like this and it will work
import Video from '../videos/video-2.mp4' ;
<video src={Video} autoPlay loop muted />
does anyone got the navbar css. he deleted it in git
Excellent work 🙏