Learn React Portal In 12 Minutes By Building A Modal

🚨 IMPORTANT:
Full React Course: courses.webdevsimplified.com/...
React is a complex library to use and the fact that everything is nested inside a component can make certain tasks much more difficult. One of those tasks is rendering popups and modals. It doesn't make sense for them to be rendered inside a component, but you need to access them inside a component. This would lead to a impossible problem to solve, but React thought of this for you. Portals are a way for you to render an element somewhere else while still having access to it in the component you are working on. They are a bit complex at first, though, so in this video I breakdown React portals step by step.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/R...
React Portal Blog Article: blog.webdevsimplified.com/201...
🧠 Concepts Covered:
- How to use portals in React
- How to create a modal in React
- Portal best practices
- How events are handled in portals
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#ReactPortal #WDS #ReactJs

[@jstamariz]

This guy makes me want to teach someone else everithing i know. I'm so grateful about this channel. ❤️

[@ridl27]

actually, when you teach someone else, you start to understand things even deeper. cuz you kinda need to look at these things from different perspective.

[@somsaksahawangmeak6911]

kzbin.info/www/bejne/bIm3g3iii6aNb7s

[@noashi45]

I am an experienced developer with 5 years of experience and it amazes me how much knowledge you have and how well you explain everything. This proves how well you know what you are teaching. I am far far away from your level and I was considering myself good haha. Need to watch more your videos and get better ! thank you

[@allsunday1485]

If 5 years into the job you watch this and find ANYTHING that makes you say "wow how much this guy knows!", you're either the worst developer ever or just trolling.

[@robertgioeli3211]

​@@allsunday1485 🤡 I don't care if you're a developer for 10 years, there is always more to learn.

[@user-kp1zd7on1d]

@@robertgioeli3211 this is nothing knew dear fellow, i haven't got my first job yet and see i'm here on this video, now you imagine where i will be in next 5 years.

[@Go_with-Christ]

@@robertgioeli3211 These videos are catored to beginners, not experienced devs. If youre any competent as an engineer you don't wow anywhere here

[@vinu7473]

i've been a developer for 2 days & I just made a modal. give me your job pls.

[@goldenfibonacci7860]

Thanks for this tutorial! I’ve been learning about full stack development for the past year and your videos have been immensely helpful. Thanks for always getting straight to the point and keeping these videos short and sweet. Take care.

[@md.akib5124]

I am more and more falling in love with your teaching style. Specially to understand react at deep level your tuts are so amazing

[@NeoDragonEWW]

I love practical tutorials and creating a modal is so common in real apps. I've never used portals before, so I loved this. Thanks for this video, Kyle. :)

[@razvan.cirlugea]

Last week I heard about Portals at work and didn’t actually know what they are, so I was planning to take a look at them. This video was exactly what I needed, love this channel ❤️

[@nickstaresinic9933]

Concise and well-presented with very informative content -- and all in only 12 minutes. Very good job.

[@uzairabdullah208]

That cool, calm and graceful style made me grasp a concept that I wasn't able to get for ages! Thankyou so much!!!!!!!!

[@Avarn388]

Good job. I'm working on a react project where we need to do a forum submission and I was thinking of using a Modal. I'll definitely be utilizing this to do it. Thank you very much.

[@alexwall7204]

An incredibly high-quality and helpful tutorial, thank you!

[@dudzpedra]

you are amazing! you can make it even easier than using an external library for just that purpose of creating a modal! I loved and I'm gonna use portals in every project from here on! I've also implemented functionality to click anywhere outside the Modal and trigger the event of closing the modal, it works great!

[@simonnjengaa]

Thank you so much, Kyle, am learning react and popups has been difficult for me to implement, you have really simplified this for me.

[@okereobinna5033]

Thanks Kyle for this short and practical tutorial. Time to get hands-on with Portals

[@DaWizardOfOz7]

I go to React Docs and read about portals and not really get what it is for. I come to Kyle's channel and understand what it is for and how to use it. So thankful for your lessons, man 🙏

[@ameyakeskar5577]

Until now, I use to straightaway use the Popper/Dialogue component's from Material UI lib. They also use React Portals to implement the Popup, but I never understood why Portals were used, until today. Thanks Kyle, I always learn a lot from your videos!

[@prashantkumar-oz2in]

Specially signed in to comment that all of your tutorials are just amazing!... Thank you

[@rezakajbaf6702]

Short, and to the point. Great tutorial.

[@farhadinho9]

So much more simple than I thought. Thanks!

[@jamezrin]

Thank you, you are a beast. I created a modal myself a while ago but fortunately (or not!) I didn't get to experience the side effects of not using portals, I didn't know the context of zindex... Thanks for this tutorial, it's something I didn't know I needed.

[@kuei-chinhuang815]

Kyle, you're a life-saver!! Thank you for the awesome contents!!

[@philippec4448]

OMG thanks so much, I've been searching for days a way to solve this !!! Thanks a lot !!!

[@cristianouzumaki2455]

I am concerned that if this guy's courses become famous, we are not going to get awesome vids like these. I learn so much each time your vids come out. I have already recommended this Channel to so many guys.

[@akashpatil8839]

Thanks Man... really was scratching head reading docs, and you made the concept clear!!

[@Felipe-53]

Thanks, my friend. You're a talented instructor.

[@ThisIsLiving__]

Thanks a lot for this tutorial i was using a package before you arrived without really understanding how to deal with Modal

[@gerryramosftw]

awesome video! thank you for making this so clear and concise, I've subscribed and looking forward to more of your content

[@fadfooood]

Helpful and just on time as always.

[@MaddyChessVision]

Great work boy! Really appreciate your work.

[@mtsurov]

Just what I needed. Thank you Kyle.

[@AfraAmaya]

Thank you so much for this amazing content ! Your knowledge is saving me so much time and effort !

[@mohamedcherif7638]

well explained and quick boost. thank you so much Kyle.

[@masoudmohajeri6644]

You are awesome Kyle 😍 Tanks for all your PERFECT tutorials 😙😉

[@gavquinny]

Great tutorial, TY. Keep up the good work pal :)

[@MartinPerez-mi1ty]

Thanks for constantly sharing your knowledge

[@JamesQQuick]

Great video. I’ve been meaning to learn about react portal!

[@ololade002]

Wow, look who we have here; I appreciate you James. Thank you for all you do

[@sskdev5116]

Oh my God!!! This solved a issue I was having and simply gave up. Thank you!!!!!

[@user-tr2jt9he3e]

This is what I've been looking for!

[@zeke4567]

Always love your content man 👍🏾

[@teufelsborg176]

Thanks for this dude. Shit was driving me nuts. Now I feel like I can make modals anywhere/everywhere.

[@ernestomotta5178]

Dude, you are awesome, thank you for the explanation

[@kubaw2882]

Thank you very much for very good explanation. I really appreciate this content!

[@geralt36]

Holy smokes! I've been wanting to make something like this without using a library for a long time but haven't really had a clue on how I would go about doing it and now I know thanks to you! :)

[@douggale5962]

It is a noble cause to avoid libraries. You will be very powerful someday.

[@user-lb1qy7rp5k]

Thanks for all cool videos, man!

[@xk2102]

Great explanation Kyle, thank you!

[@willmakk]

Incredibly underrated feature, extremely powerful.

[@Cav203]

I been needing this video!

[@surajitdas94]

Very nice and clear explanation. ❤️

[@huseynfy]

Thank you so much for the great explanation!

[@user-jq3or2ph2n]

i was having weird styling errors like i couldnt get all the components to have same modal style and some styling was not applying. i used portal and it just fixed everything in less than 1 min Love you dude Thank you so much

[@johnacsyen]

Thanks. Learned something new today.

[@bobnem2839]

This elegant approach work with my nextjs project too! Thank you.

[@doronsages983]

how?

[@MsAnnieHuang]

Amazed something that was created that 2 years ago is still relevant to understand some react concept that we seldom used.

[@pedrokielma]

genius, thank you, saved my life!

[@promus2]

Awesome content my friend. Regards from Brazil

[@Aj-po9dc]

Man... I was just watching a video....... For like 23 minutes and 13 seconds, watching this other guy's video, on the same topic. The video was like 40 minutes long and I didn't even learn half of what you taught here in 12 minutes here! I love your vids man, I'm definitely going to be checking out your course!

[@carloscloudwebdeveloper1099]

You're amazing this helps a lot!

[@marianagrnk]

OMG Thank you, I could finally understand! you're THE BEST

[@dharmang]

10:55 I just learnt this today what you taught is called event bubbling. 😅👍 And that is the feature of Javascript. You can even do the opposite of event bubbling which is event capturing or trickling which will call the onclick of child before parent as opposite of bubbling. JS has bubbling enabled by default.

[@rovixen8668]

And i just leaner from you that the name of "that thingie with arrow functions" is called event bubbling and capturing

[@9dwd]

Thanks so much man You solve my day

[@ambinintsoahasina]

I don't know what kind of mind-reading technique you're using but I just wondered about a better way to handle my modals in React (cause I really messed up a project) I did a research just now, and saw your video.... and found out it was just uploaded like today!! thank you though

[@samandarboymurodov8941]

Thank you for nice tutorial!

[@thecodeninjaeu]

I don't know your name but dude, you are a blessing. You just helped me solve a major problem, man. Thank you so much

[@fearzyn]

THANK YOU I HAD NO IDEA ABOUT THIS

[@jotadcastro]

Muchas gracias.. genial el contenido que haces... fácil y sencillo!!!

[@Technicalstockmarket12]

Explained really well 👍

[@jimbojones8713]

Hey Kyle, thanks for the video! Is there an issue with just putting the Modal as the last component in App, so its on top of all other elements (such as "other content" in this video), and then not using z-index or the portal?

[@authenticnaturalnoises]

thanks man, very helpful!!!!

[@robertminardi4268]

Yet another great topic and amazing video. I added this functionality to my new website as soon as I finished the video. It would be great if you could expand this and add something like viewing a PDF with react-pdf-viewer. Have a portal modal open the viewer and display a pdf. That's a totally random idea and doesn't apply directly to the functionality I'm adding....I swear. :)

[@santespro]

This was really helpful! Could you also make a video on how Redux works with React and how to properly use it, cause it looks confusing

[@subarashii__]

beautifully explained

[@freecee8446]

Amazing tutorial :)

[@juliantomasvergaracifuente9627]

que forma tan facil y agradable de explicar !!!

[@marios4604]

Thank you Kyle!

[@maor44]

nice dude! thanks for that!

Thank you so much Kyle!

[@thanishnatarajan5382]

Thanks man!

[@KaguraDun]

Awesome tutorial

[@lonnybulldozer8426]

How did you add the talking circle in the bottom right? Was that React Portal?

[@_.sunnyraj._]

Really ? 😂

[@aliezadkhaha9439]

nice tutorial, thank you

[@HiagoxX]

Thank you so much!

[@lelyalelyalelya]

Thank you!

[@akashddeepchitransh4537]

Best explanation on React Portals

[@adr1m]

Great as always! Could you please make a short video on how to make a Modal using ReactRouter 6? Thank You!

[@faiyazrafeek2628]

Thank you man

[@govinda399]

I like your video before I watch it. The reason is quality content.

[@MichaelCampbell01]

Didn't know anything about portals before today; like I didn't even know they existed.

[@rodbrowning]

You're the best, thank you.

[@luklukas6194]

Awesome, easy to follow Video! As I am following along, I find my overlay working properly without having build the portal yet. Did something in React change as of the day this Video was created? Thank you!

[@ByantJames]

Thanks a lot 🙂

[@edgbaston149]

Thank you so much💗💗💗

[@teosurch]

Thanks!

[@vaibhavsomani2687]

How come you always have something new to teach? I searched "best way to create a model?", and landed here from Reddit!

[@brunoa.colturato5868]

Thanks man

[@leeyahav4754]

thnx so much I really liked the content of that video

[@dean6046]

Thank you Kyle the Robot guy!

[@carlosraul6578]

Thanks a lot

[@Kapalkiewicz]

good job!

[@stanislavmalyshev5209]

Good tutorial. I'm didn't know yet what portals exist in another root div

[@underzombie6037]

thank you bro

[@shaunpx1]

Great info, I'd really like to know what camera you use for your videos, su h good quality 👌