React Sidebar Navigation Menu Tutorial 🤩 [ Using Router + Page Transition with Frame-Motion ]

Veröffentlicht am: 26 Mai 2021
auf dem Kanal: CodeBucks

21,403

467

Build Sidebar navigation menu in ReactJS with react router and framer-motion for cool page transition effects😇

Demo Link🖤: https://react-sidebar.vercel.app/

Hi there 👋,

In this video we're going to build cool react sidebar using react-router and framer-motion.

(Make sure to install all the required files 👇)

Starter-Code Files👇:
Write this whole line in your command Prompt,
git clone --single-branch --branch starter-code https://github.com/codebucks27/react-...

For this project we're going to use,
▶️ React Hooks
▶️ Styled-components
▶️ React-router-dom
▶️ Framer-motion

Don't forget to watch whole videos, we're going to learn a lot of stuff like,
▶️ React Hooks
▶️ Creating hamburger menu effect purely in css
▶️ How we can leverage advantages of react router (Navlink)
▶️ How to use Framer-motion for page transition animation

TimeStamps🕒:

Channel Intro: @0:00:00
Demo: @0:00:10
Installation & Setup: @0:01:00
Initial cleaning and styling: @0:04:00
Building Sidebar Component: @0:08:15
Add more pages to navigate : @0:50:58
Adding Router : @0:52:10
Let's add Framer-motion: @1:03:48

Watch whole video in order to understand so that you can easily build and customize sidebar on your own projects and also learn page transition using framer-motion and react-router.

[ Note🙏 : Sorry for few glitches in the video I have to reconfigure OBS settings to record quality video ]

[𝐈 𝐬𝐭𝐫𝐨𝐧𝐠𝐥𝐲 𝐬𝐮𝐠𝐠𝐞𝐬𝐭 𝐲𝐨𝐮 𝐭𝐨 𝐰𝐫𝐢𝐭𝐞 𝐜𝐨𝐝𝐞 𝐚𝐥𝐨𝐧𝐠 𝐰𝐢𝐭𝐡 𝐦𝐞 𝐬𝐨 𝐲𝐨𝐮 𝐜𝐚𝐧 𝐥𝐞𝐚𝐫𝐧 𝐭𝐡𝐞 𝐟𝐥𝐨𝐰 𝐨𝐟 𝐜𝐫𝐞𝐚𝐭𝐢𝐧𝐠 𝐭𝐡𝐢𝐬]

𝗙𝗼𝗹𝗹𝗼𝘄 𝗺𝗲 𝗼𝗻 👇 𝘄𝗵𝗲𝗿𝗲 𝗜'𝗺 𝘀𝗵𝗮𝗿𝗶𝗻𝗴 𝗹𝗼𝘁'𝘀 𝗼𝗳 𝘂𝘀𝗲𝗳𝘂𝗹 𝗿𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀!
Twitter🐤 :   / code_bucks
LinkedIn 🔗:   / codebucks
Instagram 📫:   / code.bucks
Email 📧: codebucks27@gmail.com

In upcoming videos, I'm going to create lots of cool stuff with JavaScript and react so make sure to subscribe.

Like, Sub🥂 & Share! ♥

Learn More About,

Build Responsive website with ReactJS, Styled-Components & GSAP❣️:
   • React Website🤩 : Build Responsive web...

If you want to learn Redux as a beginner here is Tutorial for you 💖:
   • React Redux Tutorial for beginners

Build Devto Clone in React:
   • Build Dev.to Clone in React

Build Awesome stuff with ReactJs (Playlist) :
   • Build with ReactJs

React Advanced Topic (Playlist) :
   • React Advanced Concepts | Every React...

If you have any suggestions regarding any topics in Web Development feel free to reach out or just comment below.

Thank You for watching! 😉

Music Credits🎵:

Toonorth - Far From Home https://chillhop.com

No Spirit - Forest Lake Walk https://chillhop.com

No Spirit - Leaves covered by snow https://chillhop.com

Mama Aiuto - Small Town Palm Trees https://chll.to/10023c1e

Ezzy - Focus https://chll.to/cbcd0a55

Get more awesome music from https://chillhop.com

Where else you can find me:
Twitter🐤 :   / code_bucks
LinkedIn 🔗:   / codebucks
Instagram 📫:   / code.bucks
Email 📧: codebucks27@gmail.com

Disclaimer:
All videos are for educational purpose and use them wisely. Any Resources used in this video are for educational purpose only.

#ReactSidebar
#SidebarinReactJS
#ReactSidebarMenu

Auf dieser Seite können Sie das Online-Video React Sidebar Navigation Menu Tutorial 🤩 [ Using Router + Page Transition with Frame-Motion ] mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer CodeBucks 26 Mai 2021 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 21,403 Mal angesehen und es wurde von 467 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

3,497