React में कंपोनेंट आधारित दृष्टिकोण का परिचय

मान लीजिए कि हमारे पास एक वेबसाइट है। इस वेबसाइट पर हम कुछ ब्लॉक्स को अलग कर सकते हैं: हेडर, कंटेंट, साइडबार, फूटर इत्यादि। प्रत्येक ब्लॉक को छोटे उप-ब्लॉक्स में विभाजित किया जा सकता है। उदाहरण के लिए हेडर में आमतौर पर लोगो, मेनू, संपर्क ब्लॉक इत्यादि को अलग किया जा सकता है।

React में ऐसे प्रत्येक ब्लॉक को कंपोनेंट कहा जाता है। प्रत्येक कंपोनेंट के अंदर छोटे कंपोनेंट हो सकते हैं, और उनके अंदर फिर और भी छोटे कंपोनेंट हो सकते हैं और यह क्रम चलता रहता है।

React में प्रत्येक कंपोनेंट src फोल्डर में स्थित एक ES6 मॉड्यूल से मेल खाता है। मॉड्यूल वाली फाइल का नाम बड़े अक्षर से लिखा जाता है और उस फंक्शन से मेल खाना चाहिए जो इस मॉड्यूल के कोड में स्थित होती है।

उदाहरण के लिए, App.js नाम की फाइल के अंदर App फंक्शन होना चाहिए:

App.jsimport React from 'react';

function App() {
  // कंपोनेंट का कोड
}

export default App;

एक कंपोनेंट मुख्य होना चाहिए - वह जिसमें अन्य कंपोनेंट जोड़े जाते हैं। React में डिफ़ॉल्ट रूप से ऐसा कंपोनेंट App कंपोनेंट होगा। इस कंपोनेंट में अन्य कंपोनेंट जोड़े जाएंगे। यह कैसे किया जाता है - इस पर हम आगे ट्यूटोरियल में चर्चा करेंगे।