जानें कि React क्या है, अपना सबसे पहला कॉम्पोनेंट लिखें, और JSX के बुनियादी नियम सीखें।
इस पाठ को Kodokon में खोलेंReact एक JavaScript लाइब्रेरी है, दूसरे शब्दों में तैयार-उपयोग-योग्य कोड का एक टूलबॉक्स, जो यूज़र इंटरफ़ेस बनाने के लिए तैयार किया गया है: वह सब कुछ जो आप स्क्रीन पर देखते हैं और जिसके साथ आप इंटरैक्ट करते हैं (बटन, मेन्यू, फ़ॉर्म...)। इस मॉड्यूल के लिए एकमात्र पूर्व-आवश्यकता JavaScript की मूल बातें हैं (वेरिएबल, फ़ंक्शन, ऐरे)। यह समझने के लिए कि React क्यों मायने रखता है, आइए पहले देखें कि React के बिना आप किसी पेज को कैसे बदलते हैं।
const el = document.getElementById("title");
el.textContent = "Hello!";
el.style.color = "green";यह तरीका काम करता है, लेकिन जैसे ही पेज बड़ा होता है, आपको हर एलिमेंट को खोजना होता है, उसे सही समय पर अपडेट करना होता है, और कभी किसी को नहीं भूलना होता... यह जल्दी ही असंभालने-योग्य हो जाता है। React एक अलग विचार पेश करता है: इंटरफ़ेस को कॉम्पोनेंट में बाँट दें। एक कॉम्पोनेंट एक JavaScript फ़ंक्शन है जो इंटरफ़ेस के एक हिस्से (एक बटन, एक कार्ड, एक मेन्यू) का वर्णन करता है। लेगो ईंटों की तरह, आप उन्हें जोड़कर एक पूरा पेज बनाते हैं, और React आपके लिए स्क्रीन को अपडेट रखने का काम संभालता है।
import { createRoot } from "react-dom/client";
function Hello() {
return <h1>Hello!</h1>;
}
const root = createRoot(document.getElementById("root"));
root.render(<Hello />);Hello फ़ंक्शन एक कॉम्पोनेंट है: यह ऐसा कुछ लौटाता है जो सीधे JavaScript के अंदर लिखे HTML जैसा दिखता है। इस सिंटैक्स को JSX कहा जाता है। याद रखने के लिए तीन नियम: एक कॉम्पोनेंट एक ही पैरेंट एलिमेंट लौटाता है; कुछ एट्रिब्यूट के नाम बदल जाते हैं (class बन जाता है className); हर टैग को बंद करना ज़रूरी है (उदाहरण के लिए <img />)। JSX में एक महाशक्ति है: कर्ली ब्रेसेस { } आपको आउटपुट में कोई भी JavaScript वैल्यू डालने देते हैं।
function Welcome() {
const firstName = "Sarah";
return <h2>Welcome, {firstName}!</h2>;
}