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/do...
React Portals Docs: reactjs.org/do...
GitHub Code for the project: github.com/Ful...
🧠 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/Ful...
Instagram: / prasoon_goswami

[@rahulkrishna164]

Learnt new thing today.

[@FullstackSimplified]

Thanks alot. Hope it helped you get the topic.

[@oncoding4520]

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

[@FullstackSimplified]

Glad it helped. Thanks for watching

[@SaadMahimkar]

same here

[@singh03ashish]

Keep posting informative video.

[@FullstackSimplified]

Thanks alot

[@kritigoswami7382]

Good work again. Keep posting 🙂

[@FullstackSimplified]

Thank you

[@tanupriya9849]

Great explanation🤗🤗

[@FullstackSimplified]

Thanks alot

[@akashbose3682]

Well explained 👍

[@FullstackSimplified]

Thanks alot

[@habibulislam3386]

great explaination..

[@FullstackSimplified]

Thanks for watching. Glad this helped

[@Pareshbpatel]

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

[@FullstackSimplified]

Glad this helped

[@KAMIL-jc8nn]

Great tutorial

[@FullstackSimplified]

Thank you! Cheers!

[@thecareercoach231]

Thankyou for sharing your knowledge🤝

[@FullstackSimplified]

You're welcome

[@azaamabubacker]

Well explained

[@FullstackSimplified]

Glad it helped. Thanks for watching

[@gritsienkooleg3447]

Thank you, Bro! Very helpfull!

[@Amvflix7]

Very well explained

[@ramesh90010]

Good content. Keep up🙂

[@FullstackSimplified]

Thanks for the feedback

[@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.