React Website Responsive Tutorial - Beginner React JS Project Using Hooks and Router
HTML-код
- Опубликовано: 13 июн 2024
- 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 :)
/ @briandesign
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
• React Website Tutorial...
Here is the source code
github.com/briancodex/react-w...
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
Get the source code here:
www.codavilla.com/posts/react-website-using-hooks-and-router-with-reusable-components
@@ninjadev4676 it's on master branch
the css
there is no source code available
@@RoshanKrSoni what do you mean?
@@briandesign nothing. it was my mistake
Amazing tutorial, I’ve learned a lot about React and the main ideas surrounding it. Thanks, you’ve earned a new sub!
Awesome, thank you!
Just the begining alone showing what to delete and what error messages to worry/not worry about is invaluable. thank you.
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.
thanks!
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!!!!
Thanks Victoria!
Decided to follow this for my intro to web dev class...I never knew how I made sites without react. Thanks King
Nice! yeah it's way different than just regular HTML,CSS and JS
Brian design thank you for the awesome content. Your programming skills are insane. Keep up the good work, man.
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.
Glad it was helpful!
Love your videos bro. They are simple and easy to understand. I also like your approach towards react. Looking forward to seeing more videos, keep up the good work. Cheers.
Thanks Jesse!
Thank you man! You're offering real value here, appreciate it!
So much to learn from this tutor, he has a wealth of knowledge
dude just created his own buttons library inside his project and im just here repracticing some styling lmao
I'm starting learn react and this tutorial help me a lot, it is amazing! thanks
You're a fantastic dev and a great teacher. Many thanks from Zimbabwe.
Thanks Tsabora!
You make really good videos man! please keep with this great work!!
Amazing vids! Straight away started following!
Keep on the good work!
Also supported with buying the smooth scroll project you did... Keep killing it
Appreciate it Milos! Thanks
Your videos are brilliant and very descriptive!
I was able to follow your video all the way without any problems and I’m about to finish my own project inspired by what I’ve learned.
Brilliant. Keep it up 🌟
Awesome to hear Ciaran!
Thanks Brian - your videos are always helpful. You are helping a lot of us man! Cheers
Thanks Banks! Glad to hear!
Great channel dude, keep going with those Project tutorials!!!
Thanks from Argentina
Thanks!
Yes, I completed this. Thanks @Brian :) Learn so many things from you.
Awesome! glad it helped
Just want to say thank you so much for sharing love your content man
Amazing tutorial video, I learn a lot about react in here.
Thanks Nicola!
i love it. Exactly what i wanted. Keep it up. Thank You
Excelente Brian, me ha servido mucho para aprender React como principiante.
Aún me falta conocimiento en JS pero este video lo he entendido a la perfeccion
Saludos de Argentina!!
I really like your tutorial and that you taught so many shortcut hot keys. Thank you!!
Thanks! Yeah there are so many more shortcuts out there
Awesome video Bro, I love these modern, clean designs.
Aye thanks Syed!
amazing tutorial thanks!!
Thanks for the tutorial, pretty great landing page.
Great video! Amazing tutorial! Thanks
This video helped me a lot Brian, Thank you.
Glad it helped!
awesome! The style is perfect. Thank you!
Thanks Agustin!
awesome design, super clean and very pleasen to clients. Thx keep it up.!!
Thanks!
Thankyou so much Brian. i learn a lot from your tutorial..
when i following your tutorial, i also tranform your code to typescripts (for me to learn more about typescripts).your tutorial is so simple and easy to understand.
Great Job brian !
Thanks Alexander!
Man your content is getting better every day ❤
Thanks Saksham!
19:25 Switch has been changed to Routes (react-router-dom v6)
Amazing tutorial. Impressive CSS wizardry.
Awesome vids! It helped me a lot. Thank U
Im quite amaze man. You just doing this for 6 months wow. you are ntural
Thanks!
great tutorial, subbed and hoping for more!
Thanks Kevin!
Congrats!!! It was amazing work.
Thanks Edson!
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!
Awesome!
thank you!
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?).
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" }
Wow! I'm starting with React, and was looking now for a video like this, thank god I found it. Thanks a lot! I'm starting coding along with you now.
Cheers from Brazil.
And of course, +1 subscriber
Awesome! Thanks Bruno!
and yeah I noticed there was like 0 videos showing how to make a react site with a common website design, so I figured I'd just make my own vid
Great tutorial.. Keep it Rolling.. Best of luck.. Love your Teaching..
Thanks Romel!
such a great video! thank you!
Thanks Roice!
I subscribed for amazing stuffs like this❤️
Thanks Pradeep!
Man you are amazing 😍 👏
Thanks Hamza! 🙌
Thank you so much for this!
Thanks Oserefemhen!
Awesome tutorial!
Thanks!
Thanks for the tutorial!
Anytime!
Easy sub, good stuff 💯
Thanks for the sub!
so beatiful and helpful thank you so much
anytime!
This video was awesome! One of the best react tutorials I've seen so far, thank you! Do you have any tutorials on react router params? For example fetching data from an API then implementing dynamic Links to view each single/full page of data.
Thanks! As far as apis I made a simple vid about a crypto api and showing the different values, but I haven’t made one with Params yet
@@briandesign That would be super sweet if you did some day :) Your teaching style is excellent. Thank you for your reply.
Thanks for this most wonderful content
Thanks Hassan!
Thank you so much again, Brian, for your awesome tutorial. Especially for this video. I could make a suggestion that you might include in your next video, it would be how to whenever I'm changing pages, the mouse scroll will be back to the top again.
So I made few changes. I put into each components in each folder in HomePage (except Footer folder) before return function:
useEffect(() => {
window.scrollTo(0, 0)
}, [])
And it works like a charm!
Nice! Yeah I made a video on my channel with the react scroll to top component, but looks like you figured it out already
Thank you so much bro! 🥰👍🏽
No problem 👍
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)
Finaly get to learn how to manage responsivity ( if that's a thing ) in a react app. Thank you !
Thanks James!
first of your kind finally an actual project and not another todo app
haha thanks Shane! I did make a todo app tho incase you wanna see that lol
Thanks for the tutorial.
no prob! thanks
Great video Brian! I am currently using it as a framework to become a better developer and build my website! I have one that does not use react, it's just basic HTML, CSS, and JavaScript. I have found that after about 10 pages, this quickly becomes too much work to keep updating and improving without a framework. I do have some questions/improvement requests for another video! looking forward to your content!
Thanks for watching! Yeah there's so much extra code if you were to make a similar design with just html and css. Feel free to recommend any website designs/video ideas!
3:00 "Let me copy this like a million times".
"1 2 hit save"
the father of responsive thnks
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={}"
thankssss dude
React Js v6 and its updates
Your video is awesome 😘
Thanks!
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
I love your page and style bro
Thanks Nick!
great project but that button section blew my brain open not sure how beginner friendly that was. have subscribed to your channel cheers bro
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
You’re inspiring me to do some more code-alongs in the future. Nice stuff
aye do it man! There's a ton of things that people are always searching, but nobody has made a video tutorial on, so you could easily rank for those topics since you already have a channel vs. someone on stackoverflow or a blog site
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.
You Have Good eye Jade ! I have just losing hope than the all this people done this tutorial and tested this code !?!?! Luckily WE are here :D !!! any suggestion with this issue ? Greetings and Have you great day and perfect Vision all the time ! ;)
same happenned to me
There is an error in the nav-menu css class aligning to bottom. It's a duplicate declaration so can just be deleted
Really great tutorial..
Thank you! Cheers!
open settings in vscode in json format and paste this: "emmet.includeLanguages": {
"javascript": "javascriptreact"
}
Muito bom, obrigado pelo conteudo \o/
Thank you sir
不错的教程～～
What is the best way to add SEO, create forms (front-end and back-end), and push to a hosting account?
woooow your video is very very cool
Hi! Just wondering, if I change the design a little, can I deploy this website? :)
Thank you, Great tutorial. I just want you to know that in my case the mobile navbar get hide with handleClick function, instead with the closeMobileMenu function. Could be a good discussion topic know why this happen. Tku again
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.
excellent job.
Thanks Peter!
This is awesome
Thanks Absolu!
Bro you are best
Thanks Raghvendra!
Thanks for your content !!!,, It's great,
Don't mind me, I'm just gonna press the subs button
Thanks for the sub!
Awesome tutorial...
Thanks!
@@briandesign Welcome ))
This was a great video. How do you accept props passed by other package in index.js which has only ReactDOM.Render in it?
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.
Great job... I want to ask.. the website content overlaps (mobile) how do I wrap it ?
Great content! Are you planning to link it up to an actual backend?
Good job, go more))
will do!
New subs bro🖐️
Dope content ❤️🙌🙌
Thanks Aniket!
Brian Design Welcome Brian! Would love to see for React Native as well 😌😊
@@AniketKumar-ym7mi I have plans for that in the future, so I'll most likely make some vids of that too
Hey, brian, thanks for this video it will help me a lot. Just one thing, what extension you are using to complete the HTML like when you div.className, my work just in HTML file don't happen to js file?
ruclips.net/video/ph65TPiNmKo/видео.html I made a vid here
what was the extention you used when you wrote (.navbar) and clicked tab ?
Hi, thanks for sharing this video. But can you share me the name of the Plugin that you use to type ".navbar..." and is auto create the HTML component inside? I am using VSCode. Many thanks for that.
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
UN GENIO
Good content
thanks Carlos!