Deep Dive into React Portals
summary
Shows that React 16 Portals let a modal escape parent CSS like overflow:hidden by rendering into a dedicated DOM node (an app-level div) while keeping the component logically as a child, with working demo code and a live login modal that moves out of the header and still receives props and state updates. Also shows portals rendering into non-React DOM (even another div outside the app) and that Enzyme mount/shallow tests still work and portal target div#modal is the simple implementation.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 1:00Example
- 2:40Login
- 11:14Login Box
- 13:35App Layout
- 16:10Advanced Model
- 18:00Login Model
- 20:50Profile Model
- 23:35Profile Page
- 26:10Docking Button
