Web site created using create-react-app
Link for the tutorial: https://youtu.be/6HfMm9D4jpU
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-sidebar.git
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
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 ]
Please support this channel by buying me a coffee🥰: https://www.buymeacoffee.com/CodeBucks
[𝐈 𝐬𝐭𝐫𝐨𝐧𝐠𝐥𝐲 𝐬𝐮𝐠𝐠𝐞𝐬𝐭 𝐲𝐨𝐮 𝐭𝐨 𝐰𝐫𝐢𝐭𝐞 𝐜𝐨𝐝𝐞 𝐚𝐥𝐨𝐧𝐠 𝐰𝐢𝐭𝐡 𝐦𝐞 𝐬𝐨 𝐲𝐨𝐮 𝐜𝐚𝐧 𝐥𝐞𝐚𝐫𝐧 𝐭𝐡𝐞 𝐟𝐥𝐨𝐰 𝐨𝐟 𝐜𝐫𝐞𝐚𝐭𝐢𝐧𝐠 𝐭𝐡𝐢𝐬]
𝗙𝗼𝗹𝗹𝗼𝘄 𝗺𝗲 𝗼𝗻 👇 𝘄𝗵𝗲𝗿𝗲 𝗜'𝗺 𝘀𝗵𝗮𝗿𝗶𝗻𝗴 𝗹𝗼𝘁'𝘀 𝗼𝗳 𝘂𝘀𝗲𝗳𝘂𝗹 𝗿𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀! 𝐈𝐍𝐒𝐓𝐀𝐆𝐑𝐀𝐌 📫: https://www.instagram.com/code.bucks
Like, Sub🥂 & Share! ♥
Learn More About,
Build Responsive website with ReactJS, Styled-Components & GSAP❣️: https://youtu.be/aAEfBxcGpJ8
If you want to learn Redux as a beginner here is Tutorial for you 💖: https://youtube.com/playlist?list=PLjxZxD6BDkeYHNuoy6nX2KS4468C2neHS
Build Devto Clone in React: https://youtube.com/playlist?list=PLjxZxD6BDkebDKxYH4El8P4Obb5VzcGlX
Build Awesome stuff with ReactJs (Playlist) : https://youtube.com/playlist?list=PLjxZxD6BDkebOPXoqccGpiinfdY9zybXm
React Advanced Topic (Playlist) : https://www.youtube.com/playlist?list=PLjxZxD6BDkeZoRU6v7gMyQ7BirGD6u0Lt
If you have any suggestions regarding any topics in Web Development feel free to reach out or just comment below.
Thank You for watching! 😉
Buy me a coffee and Support this channel🥰: https://www.buymeacoffee.com/CodeBucks
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
Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.
Looking to hire Node js developers? One of the top Node js development companies in India & USA offers cost-effective Node js web development services.
Hire dedicated Node JS developers & programmers in India for custom full-stack NodeJS web development projects on hourly/full-time basis. Strict NDA, 16+ years exp & 2500+ clients|450+ Experts
SISGAIN is the top rated node js development company providing professional services on node js web and mobile development.