React JS tutorial for beginners: Tutorial 6 - Make a mobile menu with state hooks

In this video we'll be using using the useState hook to open and close a mobile menu.
#LearnReact #100DaysOfCode #FreeCodeCourse #ReactJS
Download the code:
github.com/QuentinWatt/React-...
Follow me on social media:
Twitter: @QuentinWatt
Facebook: @quentinwatt
Instagram: @quentinwatt
Looking for a job? Try one of these referral links.
-----
Europe: (London, Germany, The Netherlands, Barcelona & more)
app.honeypot.io/ref/mDJbyi5GM2...
South Africa: (Cape Town, Johannesburg & Pretoria)
www.offerzen.com/z/V0ImHT
---
Subscribe:
/ quentinwatt
I also make videos here:
/ quentin
Donate with Paypal:
www.paypal.com/cgi-bin/webscr...

[@diegoa1984]

10/10 video not using libraries for everything and explaining the logic behind.

[@talalahmedsiddiqi9263]

Thats just a perfect and really very useful video. Amazing concept of State Hook

[@kultrol6440]

Just wanted to say thank you, I'm new to react and was having some trouble coming up with the menu logic, but you made this seem pretty simple

[@thomaslochner9068]

Very simple and well explained. Thank you for helping me build my web portfolio!

[@QuentinWatt]

Great to hear!

[@dfcw]

Thank you for these videos!

[@QuentinWatt]

My pleasure!

[@RVKAWAAA]

Thanks Quentin!

[@QuentinWatt]

It's a pleasure.

[@mahmoudhussein271]

amazing keep it up

[@ziasahil4016]

best video ever on youtube for sidebar with react..

[@QuentinWatt]

Thanks.

[@ngocvunguyen4695]

bravo bravo!! I subscribed your channel. I wish I could found your videos sooner. big thanks, brother!

[@QuentinWatt]

Thanks for the sub!

[@NASA_VAULT]

love it

[@QuentinWatt]

I hope you don't get insulted. :)

[@FrancoisBeyers]

This React course taught me more in 2 hours than most 40 hour courses did! Thanks Quentin. One question though, how would I be able to make the menu push from the left rather than overflow the content? So when you click the burger the whole screen shifts to the right as the menu comes in?

[@QuentinWatt]

The solution you are looking for would be mostly css based.
When you click a button the margin on the left should slowly grow for 0.3 - 0.5 seconds. that's all css based. You only need javascript to trigger the margin in the left to grow or shrink.

[@luizzitol]

nice video overheeereeee ;)

[@QuentinWatt]

Thanks 😁

[@NathanielScottYT]

Does anyone know how he gives elements css properties just by adding a class, such as 'fixed'?

[@aliahmadchour]

Tailwind css

[@NathanielScottYT]

@@aliahmadchour ty

[@Ninerpack]

Does anyone know how you would be able to toggle a different menu based on a media query or based on screen size?

[@QuentinWatt]

Something like this:
/* outside the media query */
.little-menu {
display: none;
}
.big-menu {
display: block;
}
@media only screen and (max-width: 600px) {
.big-menu {
display: none;
}
.little-menu {
display: block;
}
}

[@LvRezery]

Could you please add the github link for the icons?

[@QuentinWatt]

Sorry about that. It's "font awesome", it's a 2 second Google search away though.