React Responsive Navbar Tutorial - Beginner React JS Project
HTML-код
- Опубликовано: 20 май 2024
- Lets learn how to create responsive navbar using react js. This is a part of our react js course. In this tutorial, we will make a professional looking navbar using basic react js. After creating our navbar, we will also learn how to deploy our react project on GitHub & Netlify.
Code Sandbox: codesandbox.io/
Logo: logoipsum.com/
Difficulty Level 2: • React Navbar Tutorial ...
GitHub repo: github.com/tech2etc/React-Nav...
SourceCode1: www.buymeacoffee.com/tech2etc...
SourceCode2: ko-fi.com/s/3219c3644a
All Source Codes: www.buymeacoffee.com/tech2etc
⛔❌Do Not CLICK This Link: bit.ly/3lJLyLY
Need any help? Join my Discord: / discord
⭐️ Merch ⭐️
👕 Merchandise: tech2-etc.creator-spring.com
If you enjoyed this video, then please please 👍LIKE and SUBSCRIBE this channel & press the bell icon for future videos.
Thank you.
=============
SUPPORT ME 💪
=============
🎁 Support and Buy Me A Coffee for exclusive episodes, discord and more!
www.buymeacoffee.com/tech2etc
🎀 Donate Me By Paypal: www.paypal.com/paypalme/tech2etc
==========================
Free Course to Improve Your Skills
==========================
✅ WordPress Insider:
• WordPress Tutorial
✅ Learn Bootstrap With Projects:
• Bootstrap Website Tuto...
✅ Web Development For Beginners:
• Learn Web Design & Lea...
✅ Responsive Web Design With Projects:
ruclips.net/user/Tech2etcpl...
✅ Learn JavaScript With Projects:
• JavaScript Projects Fo...
✅ Learn Python With Projects:
• Python Projects
===============================
Connect with me & get daily updates👇
===============================
Discord: / discord
Instagram: / fahimulkabir.tech2etc
Twitter: / tech2etc
LinkedIn: / fahimulkabirchowdhury
Group: / 14295322
FB (Personal): / mdfahimulkabir
FB Page: / tech2etc
Chapters:
0:00 Intro
2:18 Code Sandbox
8:50 Creating Components
9:59 Create Navbar
15:47 Navbar Styling
22:24 Responsive Navbar
39:55 Deploy Your Project
44:52 Download Your Project
#reactjs #webdevelopment #javascript
Create Portfolio Using React JS 👉👉 ruclips.net/video/0h2b4ftbZcU/видео.html
Guys SUBSCRIBE & Help us to react 200k SUBS 🔥🔥
Chapters:
0:00 Intro
2:18 Code Sandbox
8:50 Creating Components
9:59 Create Navbar
15:47 Navbar Styling
22:24 Responsive Navbar
39:55 Deploy Your Project
44:52 Download Your Project
can you share link for specific tut that solve my react js navigation problem that navigate another page through nav option
Wow, the best tutorial on responsive navbar so far, there are few moments that I don't understand (mostly the positions of the CSS), but overall a great tutorial. Thank you
Great tutorial man!! 💯 No BS, straight to the point 👌🏻
this is the first video that has explained this to me very well. well done sir, thank you
Your videos are really helpful!! Thank-you for your efforts and the projects! I love this channel.
I was searching for a basic responsive navbar video. Searched a lot but never find. In the end, I found your video. It is just Awesome. Thank you for making it!
Your most welcome. Please share this project on your social media. Will appreciate that.
Can I run it on vs code
ty so much, i spend a day for fix this ,after watch your video ,i fixed
Thank you for this great explanation and great knoweledge.
Thank you very much man, I am not really a frontend guy, but this was very helpful in my most recent project
Great tutorial, thank you!
Very nice sir.. Please continue this reactjs series.. you explain so well
Thank you, your video was very useful in my project, regards from Chile
Amazing as always!
Thanks for labour and info sharing!
Your most welcome. Please share this project on your social media. Will appreciate that.
Your explanation was too good even after i dont know class based components still I'm making it
Amazing tutorial..
Thanks much from me.
Really helpful
so easy so easy it take just 3.30 hour just btw nice i have done my first project thank you man..
excellent tutorial
I liked this! Though I agree with the other guy that you're better off using hooks instead of changing it to a class component. Something else that bugged me is that you added the 'active' className to just the 'Home' list item, but didn't actually include handling to switch which menu item would be active as you switch pages, which makes this navbar feel incomplete.
Exactly, i am wondering that this is soo much hardcoded. and he is saying react based project. it is just a HTML CSS page
Thank you so much It helped me alot
Your video is very helpful, thank you very much
Awesome 👌👌👌
Thanks for this, really helpfull
awesome bro
great tutorial, It helps a lot
Thnku sir me bhut time se presan thi mera ho hi nhi ra tha ye menu vala part
Great explanation but consider you could use the state hook instead of turning the component into a class
> const [clicked, setClicked] = useState(false);
Thanks for the wonderful suggestion. I will try to use them in my future videos.
exactly what I thought.
Its sorta scary when people making tutorials mislead viewers with practices that aren't up to date, then we end up picking up bad habits 🤦♂
Can I run it on vs code
@@rishabhgarg5914 this is a React feature and the editor doesn't matter. You can code in Notepad if you wanted
const [clicked, setClicked] = useState(false);
const handleClick = () => {
setClicked(!clicked);
};
Thank you so much Sir
Thank u so much!!!
Thank you bro❤
Waiting for this video 😍
Thank you very much. Please share this project on your social media. I will appreciate that.
Nice explanation bro good video at all
Thank you for this bruda ❤. I have one doubt bro how can I give routing to respective for those listed items. I mean like inside Anchor tag how can I give routing can you please tell me. Thank you in advance
When I maximize the the output screen I'm not getting the icons separately on navbar...it still shows just the logo and menu. Can you please help.
Thank you
Please continue to reactjs
More tutorials are coming soon.
@@Tech2etc thanks
@@Tech2etc we are waiting
Can I run it on vs code
helpfull🤯🥳
Awesome Content
Is possible create a navbar respondive with mobile js?
Awesome 👍😎
Thank you so much. Please share this project on your social media. Will appreciate that.
Bro Pleace make a video of country picker using css html and js
my fa bars didnt show up
Thannnnnnnnnnnnnk u
plz help.......I'm done with all thing that mention in tut but , I want to make next page of "contact" and that have to be connect with navbar contact button........
Please checkout our react js playlist for more advance projects.
@@Tech2etc I watched but, there is no relevant solution for connect another page with our main page navbar.
share that link....plzzz
@@Tech2etc
Setting up React using Vite only takes a couple of seconds.
Nice
Thank you very much. Please share this project on your social media. I will appreciate that.
fas fa-bars not working
bongali babu!!
Hindi mai kiu nhi upload kiye
Bro just use useState hook instead of changing the whole component to class based component
make clones in react js like linkeding instagram etc.
Sure, new videos are coming soon.
when you are doing everything in function, why you need to create a class.
Not good because it isn't showing how to use react router and he is using class instead of functions
At the very first beginning of the video I already mentioned that its a basic react navbar. I also mentioned another advance react navbar tutorial is coming & it was already been published long time ago.
Go to the description and watch that video before passing any irrelative arguments.
Thanks.
It is clear, what it is. It is you fault if you are complaining because you need a pear but this is an apple (an it`s 100% clear that this is an apple)
So the problem is you, not the video.
Not using react router
Shkran Shqiq !! Yarhamuk Allah !! Subhana Allah !! I sucessed in my system
bro !!!!!!!!!!
50 min for navbar........
Yarbi lhmd li 3t9ni
awesome bro