Back to Browse

React Modal Tutorial using Hooks and Portals from scratch ๐Ÿ”ด

9.2K views
Jun 9, 2021
28:06

How to build efficient Modal in React Js using portals๐Ÿ˜‡ Demo Link๐Ÿ–ค: https://react-reusable-components.vercel.app/ As per the official documentation of CRA, โžก๏ธNote: LibSass and the packages built on top of it, including Node Sass, are deprecated. If you're a user of Node Sass, you can migrate to Dart Sass by replacing node-sass in your package.json file with sass. Hi there ๐Ÿ‘‹, In this video I am going to show you how to create interactive modal in react from scratch. For this project we're going to use, โ–ถ๏ธ React Hooks โ–ถ๏ธ node-sass Don't forget to watch whole videos, we're going to learn a lot of stuff like, โ–ถ๏ธ React Hooks โ–ถ๏ธ Creating Modal layout โ–ถ๏ธ Dynamic content rendering in Modal โ–ถ๏ธ How to use react portals to create Modal โ–ถ๏ธ Adding close events in Modal โ–ถ๏ธ Animating Modal โ–ถ๏ธ How you can create frost-glass UI with just one line of code Get Awesome wallpapers from : https://trianglify.io/ Learn more about portals in react: https://youtu.be/lOrV40oLUXA Watch whole video in order to understand so that you can easily build and customize Modal component for your own projects. Final CODE: https://github.com/codebucks27/React-reusable-components/tree/master/react-modal [๐ˆ ๐ฌ๐ญ๐ซ๐จ๐ง๐ ๐ฅ๐ฒ ๐ฌ๐ฎ๐ ๐ ๐ž๐ฌ๐ญ ๐ฒ๐จ๐ฎ ๐ญ๐จ ๐ฐ๐ซ๐ข๐ญ๐ž ๐œ๐จ๐๐ž ๐š๐ฅ๐จ๐ง๐  ๐ฐ๐ข๐ญ๐ก ๐ฆ๐ž ๐ฌ๐จ ๐ฒ๐จ๐ฎ ๐œ๐š๐ง ๐ฅ๐ž๐š๐ซ๐ง ๐ญ๐ก๐ž ๐Ÿ๐ฅ๐จ๐ฐ ๐จ๐Ÿ ๐œ๐ซ๐ž๐š๐ญ๐ข๐ง๐  ๐ญ๐ก๐ข๐ฌ] 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โฃ๏ธ: 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! ๐Ÿ˜‰ Music Credits๐ŸŽต: Ezzy - Focus https://chll.to/cbcd0a55 Philanthrope, mommy - soupeddd! https://chll.to/98090020 Mama Aiuto - Small Town Palm Trees https://chll.to/10023c1e Get more awesome music from https://chillhop.com Where else you can find me: ๐“๐–๐ˆ๐“๐“๐„๐‘ ๐Ÿค : https://twitter.com/code_bucks ๐ˆ๐๐’๐“๐€๐†๐‘๐€๐Œ ๐Ÿ“ซ: https://www.instagram.com/code.bucks ๐„๐Œ๐€๐ˆ๐‹ ๐Ÿ“ง: [email protected] Disclaimer: All videos are for educational purpose and use them wisely. Any Resources used in this video are for educational purpose only. #ReactModal #ModalinReactJS #ReacPopup

Download

1 formats

Video Formats

360pmp439.9 MB

Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.

React Modal Tutorial using Hooks and Portals from scratch ๐Ÿ”ด | NatokHD