Learn React Portal In 12 Minutes By Building A Modal

Подписаться 1,6 млн

Просмотров 238 тыс.

50% 1

🚨 IMPORTANT:
Full React Course: courses.webdev...
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/Web...
React Portal Blog Article: blog.webdevsim...
🧠 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.webdevsim...
My Courses: courses.webdev...
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/Web...
CodePen: codepen.io/Web...
#ReactPortal #WDS #ReactJs

Опубликовано:

29 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 236

@jstamariz 4 года назад

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

@ridl27 4 года назад

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 Год назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6XTRElVAZ9Y.html

@johnacsyen 4 года назад

Thanks. Learned something new today.

@authenticnaturalnoises 4 года назад

thanks man, very helpful!!!!

@ridl27 4 года назад

ty Kyle.

@umanzorgerson 4 года назад

Out of curiosity, is it a good practice to avoid semi colons while doing React?

@sojumoscow 4 года назад

Yes it is. Its still valid.

@snnsnn 3 года назад

Not if you are not using a linter that checks for automatic semicolon insertion mistakes.

@lonnybulldozer8426 4 года назад

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

@_.sunnyraj._ 4 года назад

Really ? 😂

@noashi45 2 года назад

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.

@SaadMahimkar Год назад

@@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 11 месяцев назад

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

@vinu7473 10 месяцев назад

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

@JamesQQuick 4 года назад

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

@ololade002 3 года назад

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

@anuvette 10 месяцев назад

what is the difference between using portals and tag? and whats better to use?

@MichaelCampbell01 4 года назад

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

@dharmang 4 года назад

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 2 года назад

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

@jimbojones8713 2 года назад

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?

@uness4511 4 года назад

Plz could You make a video of creating responsive navigation bar in react ? Thanks in advance.

@Avarn388 2 года назад

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.

@ThisIsLiving__ 4 года назад

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

@hiteshsuthar1097 3 года назад

No stack to Full stack ❤️🔥

@luklukas6194 3 года назад

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!

@nakulsingh8444 4 года назад

Mongodb please

@chris94kennedy 4 года назад

Hi Kyle, please can you explain why this trend for creating style objects and using inline style properties in the JSX has appeared? Is it for performance, like no need to load stylesheets? or what? because to me it looks cluttered when you could just import a stylesheet and define in there. thanks :)

@parthshah4536 Год назад

Could you just remove Modal component from BUTTON_WRAPPER_STYLE div

@vault_cat Год назад

It seems that if we remove psoition:relative on both BUTTON_WRAPPER and OTHER_CONTENT, the 'other content' won't jump on top of modal, hence solved the issue. Can anyone help explain why dont we go for this solution? frontend beginner here. thanks!

@md.akib5124 4 года назад

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 4 года назад

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. :)

@tomliem1514 4 года назад

please make a video on how to make a realtime collaboritive digital whiteboard.

@Felipe-53 4 года назад

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

@keeplearning5647 Год назад

thank you so much for you explanation but i have on question : is reactDom.createPortal add the id="portal " automatically

@sskdev5116 4 года назад

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

@kuei-chinhuang815 3 года назад

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

@ManojKumar-bu1of 2 года назад

Hey bro, I've experience on React and Node and I want to become Blockchain developer, could you please guide me with the roadmap and best recourse?

@MasterLee0423007bond 2 года назад

I have only watched 17seconds of the video for now. But I'am allready irritated. Where are you? Why is the room so empty and why is your hair so perfect. How can somone with such aesthetic hair sit in such an ugly empty room?

@techacademy6542 Год назад

this gives an error "target container is not a DOM element" in the production build (works fine in dev). Any suggestions?

@cristianouzumaki2455 4 года назад

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.

@AfraAmaya Год назад

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

@muscl-cuts 4 месяца назад

I am understanding the concept , explaination and the reason but I am not able to understand the code that too when it become bigger..why ?

@shaunpx1 2 года назад

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

@jimbok21 2 года назад

I have a long webpage. If I scroll, the background scrolls too. How do I stop this?

@maheshmurugan5527 3 года назад

I have one doubt please reply me ...web dev simplified .. can i use react portals for sign in or sign up form

@govinda399 2 года назад

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

@Pavankumar_Mhaske Год назад

thanks sir

@himavamsi1834 2 года назад

Hi sir, Is there any way to open model and close model using samebutton.

@promus2 2 года назад

Awesome content my friend. Regards from Brazil

@taylorfullstack Год назад

Could you please show an updated version with a native Dialog element and portals?

@suvankaradhikary9582 Год назад

you are looking like jordy ENP with BWC

@Pareshbpatel Год назад

React Portal, beautifully explained. Thanks, Kyle. {2023-10-02}, {2023-11-02}

@СергейСазонов-х4л 3 года назад

it was necessary to add the disappearance of the id portal from HTML

@pranupranav6279 2 года назад

Thanks

@kokodev3719 2 года назад

I would love to take your react course. Has it been updated to React 18?

@willmakk 4 года назад

Incredibly underrated feature, extremely powerful.

@nesa6582 7 месяцев назад

Thats all nice but how to send props to the modal????? :D

@arunreddy9189 2 года назад

how to disable background events and pointer actions when portal is open

@razvan.cirlugea 4 года назад

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 ❤️

@dishanamdev2620 2 года назад

Why you are so handsome? plus your voice is so soothing

@douggale5962 2 года назад

Ahhhh. They propagate the events do they? That explains everything.

@pedrokielma 2 года назад

genius, thank you, saved my life!

@DevOpsHasan 3 года назад

Very nice. Could you please show multiple modal within singe react app.

@chauhan035 2 года назад

Why dont you cover all react advanced questions in one of the videos

@famildoor 3 года назад

can anyone explain me what role does transform translate play there ?

@nickstaresinic9933 2 года назад

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

@ionutenache6473 2 года назад

Any solution for this error: "document is not defined" ?

@Aj-po9dc 2 года назад

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!

@pcg4mer427 4 года назад

One quesiton . how these ideads come into your mind how logics come into your mind like in your recent videos . your mind is great

@RahulGupta-pj1ux 4 года назад

Yes Kyle, please tell us.

@abhijeetshikharvlog1444 2 года назад

Hi please tell me how to close pop-up when i click outside of modal

@webber5629 2 года назад

How to make popup closes when clicked outside

@namesare4fools 3 года назад

if u need quick solution.. save yourself from learning this by using react-modal library.. remember the 3 rules of programming.. 1. reuse 2. reuse 3. reuse

@pcg4mer427 4 года назад

how many likes for KYLE ?

@alekyeremeef1152 4 года назад

Hi Kyle thanks for your videos they really help, I tried this Modal example in my project but I ran into a problem. Here is a link to my issue on Stack over flow stackoverflow.com/questions/63998018/react-randomly-populated-promo-code-inside-coupon-modal-keeps-changing-every-s Noone could answer this question, maybe you can check it out if you have a minute. Basically the problem is with my code inside this Modal. This modal creates a random promotion code every second due to timer thats running on the background. I dont want that, i just want it to show one of the values from the Array inside my Modal, but looks like this popup gets rendered together with the timer on the background. I'm new to React (just 2 weeks) and newbie in programming in general.

@robertminardi4268 2 года назад

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. :)

@marianagrnk 2 года назад

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

@charbelayrouth3955 Год назад

how to remove scrollbar when the modal is open

@ambinintsoahasina 4 года назад

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

@lalit00716 4 года назад

Thanks once again sir.please make communication app like Facebook/Instagram using angular,deno,firebase etc.

@thecodeninjaeu 2 года назад

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

@devilstrela 4 года назад

i love this channel man, learned me so much... but did you ever made video about files structure, abrastaction of code etc. of react for example?? If not, do you consider it?? because I am watching you for about 6 months, learned me so much, I can create a fully working apps at fast rate, but I was told at interview that my code is such a mess.. And I am trying really hard to make it as not messy as posibble, so maybe there is some rules and practices I dont know about ..

@Marjolein_1979 2 месяца назад

Awesome. Very helpful!

@SaadAfzal-y9o Год назад

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

@adr1m 2 года назад

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

@akashddeepchitransh4537 2 месяца назад

Best explanation on React Portals

@GOODIESS 2 года назад

Can we create embaddable widget like this ??

@vaibhavsomani2687 7 месяцев назад

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

@samandarboymurodov8941 Год назад

Thank you for nice tutorial!

@alexwall7204 3 года назад

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

@snoudoubts1745 3 года назад

Thanks for the video! Question: Can the modal be moved outside of the window? (ie., can it be dragged to the other screen?)

@aliezadkhaha9439 4 года назад

nice tutorial, thank you

@prashantkumar-oz2in 2 года назад

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

@connorbailey308 4 года назад

Have you done a video on event listeners and how to use them in React? Specifically the weird ones like onScroll that can trigger a huge number of times in a small time frame?... I always run into the 'too many re-renders' error using those when they are connected to state. I think you have to use the useEffect hook to tell React when to respond to the state changes, but even then sometimes it can break React.

@akashpatil8839 2 года назад

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

@masoudmohajeri6644 3 года назад

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

@kubaw2882 4 года назад

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

@XbattlepopeX 4 года назад

Wouldnt making absolute pos div with higher z index work the same?

@mohamedcherif7638 Год назад

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

@qcmira2024 4 года назад

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

@9dwd Год назад

Thanks so much man You solve my day

@usajasbir 5 месяцев назад

how to make webpage popup in c#.

@okereobinna5033 10 месяцев назад

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

@kirarevcrow 4 года назад

This looks complicated for what it is

@rodbrowning Год назад

You're the best, thank you.

@MsAnnieHuang Год назад

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

@md.shariarkabir7350 4 года назад

you first made modal in general way then said what's wrong with this then go ... this is the best teching technique

@aliahmadchour 2 года назад

React portals to the rescue!! 💙 💙

@goldenfibonacci7860 3 года назад

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.