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
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 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.
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.
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.
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
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 ❤️
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.
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 🙏
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.
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.
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!
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. :)
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!
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!
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.
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
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?
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! :)
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. :)
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 :)
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 ..
Hey, I really, really like your style and I can tell by your code that you are solid. And I found you at just the right time. I need to learn React for my job and I’m overwhelmed by the sheer number of React courses (really, there are too many options that deciding on one is almost impossible). Do you go over hooks in your course? Our project is being done in functional components, hooks, and in Typescript and martial-ui. A lot to have to learn from scratch and it’s overwhelming quite frankly. Also, do you go over webpack or no? One thing I’m curious about is do enterprises actually use create react app or do they start from scratch and add things as needed? My gut tells me we should start from scratch but it’s hard to know based on my lack of experience in this tech. Plus I don’t think my boss will want to invest the time to start from scratch unless I have a specific reason. Do you teach all from scratch?
It is based on hooks. I do not cover webpack in the course but in enterprise work you won't really need to mess with webpacj much and if you do you then can learn it as needed. You never need to be a webpack expert.
@@WebDevSimplified Hey thanks for responding so quickly. I went ahead and bought it and I like the pace so far. Very concise and to the point. However, I had no idea using it with TypeScript would be sooo different. I'm struggling to do the most basic things because I don't know what types the compiler expects for common things like elements or events or props or state etc. It's frustrating because in JS it just works, but in TS it's very disciplined and...well... like a statically typed language! I just need to find some documentation on the list of types you'd normally use to make the compiler and linter happy. eslint and the compiler are constantly giving me negative feedback. Could be good or bad, I don't know. This is a totally different world, though, I can say that. I feel like once I wrap my head around it it'll be good.
Just learn react - you can spend loads of time debugging your webpack - once you've got a handle on react you'll understand better if you situation requires you to know webpack. I wasted so much time on learning the ever changing and evolving webpack - I really wish I had focused on react
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
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.
@@allsunday1485 🤡 I don't care if you're a developer for 10 years, there is always more to learn.
@@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.
@@robertgioeli3211 These videos are catored to beginners, not experienced devs. If youre any competent as an engineer you don't wow anywhere here
i've been a developer for 2 days & I just made a modal. give me your job pls.
This guy makes me want to teach someone else everithing i know. I'm so grateful about this channel. ❤️
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.
th-cam.com/video/6XTRElVAZ9Y/w-d-xo.html
what is the difference between using portals and tag? and whats better to use?
Thanks a lot for this tutorial
i was using a package before you arrived without really understanding how to deal with Modal
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.
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
Great video. I’ve been meaning to learn about react portal!
Wow, look who we have here; I appreciate you James. Thank you for all you do
I am more and more falling in love with your teaching style. Specially to understand react at deep level your tuts are so amazing
That cool, calm and graceful style made me grasp a concept that I wasn't able to get for ages! Thankyou so much!!!!!!!!
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 ❤️
Thanks Kyle for this short and practical tutorial. Time to get hands-on with Portals
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.
And i just leaner from you that the name of "that thingie with arrow functions" is called event bubbling and capturing
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 🙏
How did you add the talking circle in the bottom right? Was that React Portal?
Really ? 😂
Thanks, my friend. You're a talented instructor.
Specially signed in to comment that all of your tutorials are just amazing!... Thank you
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
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.
Short, and to the point. Great tutorial.
Thanks Man... really was scratching head reading docs, and you made the concept clear!!
Concise and well-presented with very informative content -- and all in only 12 minutes. Very good job.
you first made modal in general way then said what's wrong with this then go ... this is the best teching technique
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.
Best explanation on React Portals
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!
Amazed something that was created that 2 years ago is still relevant to understand some react concept that we seldom used.
Thank you so much, Kyle, am learning react and popups has been difficult for me to implement, you have really simplified this for me.
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. :)
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!
An incredibly high-quality and helpful tutorial, thank you!
Oh my God!!! This solved a issue I was having and simply gave up. Thank you!!!!!
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!
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.
Just what I needed. Thank you Kyle.
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
So much more simple than I thought. Thanks!
Incredibly underrated feature, extremely powerful.
This elegant approach work with my nextjs project too! Thank you.
how?
well explained and quick boost. thank you so much Kyle.
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?
Thanks for constantly sharing your knowledge
Kyle, you're a life-saver!! Thank you for the awesome contents!!
Thank you so much for this amazing content ! Your knowledge is saving me so much time and effort !
OMG thanks so much, I've been searching for days a way to solve this !!! Thanks a lot !!!
Great info, I'd really like to know what camera you use for your videos, su h good quality 👌
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! :)
It is a noble cause to avoid libraries. You will be very powerful someday.
Very nice and clear explanation. ❤️
THANK YOU I HAD NO IDEA ABOUT THIS
How come you always have something new to teach? I searched "best way to create a model?", and landed here from Reddit!
genius, thank you, saved my life!
Awesome content my friend. Regards from Brazil
No stack to Full stack ❤️🔥
Great as always! Could you please make a short video on how to make a Modal using ReactRouter 6? Thank You!
Great explanation Kyle, thank you!
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. :)
I like your video before I watch it. The reason is quality content.
Helpful and just on time as always.
Thanks so much man
You solve my day
Explained really well 👍
beautifully explained
You are awesome Kyle 😍 Tanks for all your PERFECT tutorials 😙😉
Thank you so much for the great explanation!
Thanks
Thank you Kyle!
Good tutorial. I'm didn't know yet what portals exist in another root div
Great work boy! Really appreciate your work.
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
This is what I've been looking for!
Thanks. Learned something new today.
I would love to take your react course. Has it been updated to React 18?
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 :)
awesome video! thank you for making this so clear and concise, I've subscribed and looking forward to more of your content
Do you reckon it is a good idea to use portal as a authguard or login page?
thanks Kyle
Thank you very much for very good explanation. I really appreciate this content!
Thanks for this dude. Shit was driving me nuts. Now I feel like I can make modals anywhere/everywhere.
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 ..
nice tutorial, thank you
ty Kyle.
Thanks for the video!
Question: Can the modal be moved outside of the window? (ie., can it be dragged to the other screen?)
instead of putting null you can put the button there and put useState along with the modal component.
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?
Dude, you are awesome, thank you for the explanation
Awesome tutorial
Plz could You make a video of creating responsive navigation bar in react ? Thanks in advance.
Didn't know anything about portals before today; like I didn't even know they existed.
this is really cool!
I have one doubt please reply me ...web dev simplified .. can i use react portals for sign in or sign up form
Thank you Kyle the Robot guy!
que forma tan facil y agradable de explicar !!!
Thank you for nice tutorial!
Thank you man
you really look like a Hollywood star. Btw this one was a lifesaver Thanksssss!!!!!
Thank you so much Kyle!
you pure gold ❤️ please make a simplified video on redux
Thank you!
Thanks man!
OMG Thank you, I could finally understand! you're THE BEST
Awesome. Very helpful!
Hey, I really, really like your style and I can tell by your code that you are solid. And I found you at just the right time. I need to learn React for my job and I’m overwhelmed by the sheer number of React courses (really, there are too many options that deciding on one is almost impossible). Do you go over hooks in your course? Our project is being done in functional components, hooks, and in Typescript and martial-ui. A lot to have to learn from scratch and it’s overwhelming quite frankly. Also, do you go over webpack or no?
One thing I’m curious about is do enterprises actually use create react app or do they start from scratch and add things as needed? My gut tells me we should start from scratch but it’s hard to know based on my lack of experience in this tech. Plus I don’t think my boss will want to invest the time to start from scratch unless I have a specific reason. Do you teach all from scratch?
I haven't taken Kyle's course myself, but I do know that it is entirely based on hooks
It is based on hooks. I do not cover webpack in the course but in enterprise work you won't really need to mess with webpacj much and if you do you then can learn it as needed. You never need to be a webpack expert.
@@WebDevSimplified Hey thanks for responding so quickly. I went ahead and bought it and I like the pace so far. Very concise and to the point. However, I had no idea using it with TypeScript would be sooo different. I'm struggling to do the most basic things because I don't know what types the compiler expects for common things like elements or events or props or state etc. It's frustrating because in JS it just works, but in TS it's very disciplined and...well... like a statically typed language! I just need to find some documentation on the list of types you'd normally use to make the compiler and linter happy. eslint and the compiler are constantly giving me negative feedback. Could be good or bad, I don't know. This is a totally different world, though, I can say that. I feel like once I wrap my head around it it'll be good.
Just learn react - you can spend loads of time debugging your webpack - once you've got a handle on react you'll understand better if you situation requires you to know webpack. I wasted so much time on learning the ever changing and evolving webpack - I really wish I had focused on react