React Portals क्या हैं
createPortal API समझें और जानें कि root div के बाहर रेंडर करना उपयोगी क्यों है
React Portals क्या हैं, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
स्वागत है
सामान्य React DOM पदानुक्रम
पोर्टल क्या है
import { createPortal } from 'react-dom';
function Modal({ children }) {
return createPortal(
children,
document.body // render into body, not parent
);
}पोर्टल क्यों मौजूद हैं
इवेंट बबलिंग अब भी काम करती है
पोर्टल लक्ष्य बनाना
// index.html
<body>
<div id="root"></div>
<div id="modal-root"></div>
</body>
// Modal.jsx
createPortal(children, document.getElementById('modal-root'));पोर्टल का जीवनचक्र उसके React पैरेंट से जुड़ा होता है
पोर्टल के आर-पार संदर्भ काम करता है
स्थिति के साथ createPortal का उपयोग
function App() {
const [open, setOpen] = useState(false);
return (
<div>
<button onClick={() => setOpen(true)}>Open</button>
{open && createPortal(
<div className="overlay">
<button onClick={() => setOpen(false)}>Close</button>
</div>,
document.body
)}
</div>
);
}सर्वर-साइड रेंडरिंग और पोर्टल
त्वरित जाँच
पुनरावलोकन
आगे का पाठ
एआई शिक्षक के साथ React सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 88
- पाठ
- 324
अक्सर पूछे जाने वाले प्रश्न
क्या “React Portals क्या हैं” पाठ निःशुल्क है?
हाँ—“React Portals क्या हैं” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“React Portals क्या हैं” में मैं क्या सीखूँगा?
createPortal API समझें और जानें कि root div के बाहर रेंडर करना उपयोगी क्यों है आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“React Portals क्या हैं” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- React Portals क्या हैं
- Portals से Modal घटक बनाना
- Modals में Focus और Keyboard Trap संभालना
- Portals से Tooltips और Dropdown मेनू