Everything about React Portals in 10 minutes

In this video you will learn how to use React Portals to create amazing modals in your React App. You will also learn the advantages of React Portals and when and why to use them. You will also learn topics like event delegation and event bubbling.
📚 Materials/References:
- VS Code Extensions: • 5 Must Have Visual Stu...
- Create react app: reactjs.org/docs/create-a-new...
- React Portals Docs: reactjs.org/docs/portals.html
- GitHub Code for the project: github.com/FullstackSimplifie...
🧠 Concepts Covered:
- React Portals
- Event Delegation
- Event Bubbling
- Creating Modal with Portals
🌎 Find Me Here:
My Website: prasoon.me
LinkedIn: / prosoon-goswami
Twitter: / prasoongoswami4
GitHub: github.com/FullstackSimplified
Instagram: / prasoon_goswami

[@gritsienkooleg3447]

Thank you, Bro! Very helpfull!

[@Amvflix7]

Very well explained

[@kritigoswami7382]

Good work again. Keep posting 🙂

[@FullstackSimplified]

Thank you

[@ashishkumarsingh9857]

Keep posting informative video.

[@FullstackSimplified]

Thanks alot

[@rahulkrishna164]

Learnt new thing today.

[@FullstackSimplified]

Thanks alot. Hope it helped you get the topic.

[@Pareshbpatel]

React Portals, beautifully explained. Thanks. {2023-07-24}

[@FullstackSimplified]

Glad this helped

[@oncoding4520]

I had to come out here from a well known udemy course.... your explanations was amazing

[@FullstackSimplified]

Glad it helped. Thanks for watching

[@user-kp1zd7on1d]

same here

[@akashbose3682]

Well explained 👍

[@FullstackSimplified]

Thanks alot

[@thecareercoach231]

Thankyou for sharing your knowledge🤝

[@FullstackSimplified]

You're welcome

[@tanupriya9849]

Great explanation🤗🤗

[@FullstackSimplified]

Thanks alot

[@ramesh90010]

Good content. Keep up🙂

[@FullstackSimplified]

Thanks for the feedback

[@habibulislam3386]

great explaination..

[@FullstackSimplified]

Thanks for watching. Glad this helped

[@KAMIL-jc8nn]

Great tutorial

[@FullstackSimplified]

Thank you! Cheers!

[@azaamabubacker]

Well explained

[@FullstackSimplified]

Glad it helped. Thanks for watching

[@avertry9529]

I noticed you had modal : 100% can you not use vh vw? I've used modals in react without portal.

[@FullstackSimplified]

Absolutely you can use modal without portal. But at times you have situations where you don’t want to render a modal deep inside a nested dom but also want to keep the parent child relationship intact. In these cases portal seems to be much handy. More over you always want your modal to be above all the contents. Using css will just make it visible at the top but eventually your modal will be nested deep inside decreasing the accessibility of your website.

[@_its-vikash]

position : fixed

[@FullstackSimplified]

Position fixed would add the modal to the under the same patent which we do not want portal doesn't only gives us styling options but also provides us the way to render elements out side the nested dom tree.