React Directly in HTML

React Directly in HTML
React का पहला अनुभव: HTML और JavaScript के साथ React के Structure को समझें!

React सीधे HTML और JavaScript में क्यों?

आपने अगर HTML, CSS और JavaScript की दुनिया में कदम रखा है, तो React का सफर शुरू करने से पहले इसकी बेसिक संरचना (structure) को समझना बेहद ज़रूरी है। React Directly in HTML – इसका मतलब है कि हम React की संरचना को किसी भी एडवांस टूल या npm सेटअप के बिना, सीधा HTML और JavaScript का उपयोग करके देखेंगे।

Note: प्रोडक्शन-ग्रेड React ऐप बनाने के लिए आपको अपने सिस्टम में Node.js और npm इंस्टॉल करना अनिवार्य है इसे हम आगे विस्तार से समझेंगे। फिलहाल, React का Structure जानने के लिए HTML और JavaScript का प्रयोग करते हुए कुछ कोड लिखते हैं, तो आइए React के basic structure को समझते हैं। 🎯

पहला कदम: प्रोजेक्ट सेटअप (Folder and File Structure)

React सीखने के लिए, आपको एक छोटा-सा प्रोजेक्ट सेटअप बनाना होगा। इसके लिए:

अपने सिस्टम पर एक नया फोल्डर बनाएं।
- फोल्डर का नाम आप अपनी सुविधा के अनुसार रख सकते हैं, जैसे: react-intro, basic-react, या my-first-react-project।
- उदाहरण: project1।
इस फोल्डर को VS Code में Open करें।
फोल्डर के अंदर नीचे दिखाया गया है फाइल्स बनाएं:
```
project1/
├── index.html
└── index.js
```

HTML फाइल (index.html): बेसिक React संरचना

अब, इस प्रोजेक्ट के अंदर index.html फाइल में नीचे दिया गया कोड कॉपी करें और Paste करें।

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>React Basics</title>
</head>

<body>
  <!-- Root Div -->
  <div id="root"></div>

  <!-- JavaScript File -->
  <script src="index.js"></script>
</body>

</html>

🚀 अगर आप HTML जानते हैं, तो ये कोड आपके लिए बेहद आसान होगा।

इस कोड में क्या खास है?

Bootstrap Link: हम CSS को स्टाइलिश और तेज़ बनाने के लिए Bootstrap CDN का इस्तेमाल कर रहे हैं।
<div id="root"></div>: React का दिल!
- यह वह Div है जिसमें पूरा React Code(Structure) Render होगा।
<script src="index.js"></script>: आपकी JavaScript की entry point फाइल। React में यही काम Webpack या Vite जैसे टूल्स करते हैं।

JavaScript फाइल (index.js): React के Components बनाना

अब अपनी index.js फाइल में नीचे दिया गया कोड कॉपी करें और Paste करें।

index.js

// Massage function: HTML string return करता है
function Massage() {
  return (
    `
    <h1 class="text-primary">Hello Welcome to React Basics!</h1>
    `
  );
}

// App function: Massage को कॉल करता है
function App() {
  return (
    `
      <div>
        ${Massage()}
      </div>
    `
  );
}

// index function: App function के HTML को 'root' div में inject करता है
function index() {
  const root = document.getElementById('root');
  root.innerHTML = App();
}

// index function को कॉल करें
index();

यह कोड कैसे काम करता है?

Massage() Function:
- यह एक बेसिक function component है, जो HTML को string के रूप मै return करता है।
App() Function:
- यह Massage() function को कॉल करता है और इसे HTML string में जोड़ता है।
- जो भी Massage() function से return आयेगा वो App() Function के string में जो html है उसमे add करता है
index() Function:

const root = document.getElementById('root'); यह HTML में से root div को find करता है और उस div को Access करता है और root variable मध्ये pass करता है।
root.innerHTML = App(); फिर App() फंक्शन को कॉल करके App Function से Return हुआ HTML उस root div के अंदर रेंडर करता है या Inject करता है।
React में, यह process createRoot() और render() methods द्वारा की जाती है। ये कैसे होता है ये हम आगे देख लेंगे

आपने ऊपर दिए गए कोड में एक common बात देखी होगी कि `Massage()` और `App()` functions के नाम का पहला letter capital है और ये functions string form में HTML को return करते हैं।

इन functions के return में जो HTML लिखा जाता है, उसे JSX (JavaScript XML) कहा जाता है।

Component क्या होता है?

React में जो functions JSX return करते हैं और जिनके नाम का पहला letter capital होता है, उन्हें Component कहा जाता है।
React का Component एक JavaScript function होता है, जो HTML जैसा JSX return करता है।

JSX क्या है?

JSX का मतलब है JavaScript XML, जो React में HTML को लिखने का एक तरीका है।
React में JSX का उपयोग करके HTML-like structure लिखा जाता है, लेकिन यह असल में JavaScript का हिस्सा होता है।

महत्वपूर्ण बात:

जब भी आप किसी function को Component के रूप में इस्तेमाल करना चाहते हैं, तो उसके नाम का पहला letter capital होना चाहिए।

इस Chapter में क्या सीखा?

इस Chapter में हमने React के basic code structure को समझा।

Component क्या है?
- Component एक JavaScript function होता है।
- यह JSX को return करता है।
JSX क्या है?
- JSX HTML जैसा दिखता है, लेकिन यह JavaScript का हिस्सा होता है।
Code Structure Flow:
- App Component में सभी Components को एक साथ जोड़ा गया।
- Index function ने App Component को call किया।
- App Component से जो HTML return हुआ, उसे main HTML file में render किया गया।

निष्कर्ष:

React में Component और JSX का उपयोग कोड को structured और organized बनाता है।
React का यह basic structure हमें बड़े Applications को छोटे-छोटे हिस्सों (Components) में divide करने की सुविधा देता है।

क्या GIF या Images ज़रूरी हैं?

इस ब्लॉग में React के basic structure को दिखाने के लिए एक छोटा सा GIF helpful होगा, जो HTML और JavaScript फाइल्स को create करने और output देखने की प्रक्रिया को दिखाए।
एक Flowchart या Diagram भी helpful होगा, जो React के render process को दिखाए।

क्या ये पढ़ने में मज़ेदार था?

अगर आप React को सीधे HTML और JavaScript से सीखने की इस प्रक्रिया को लेकर उत्साहित हैं, तो नीचे कमेंट करें या अपनी राय साझा करें। 😊

Search This Blog

A1 Guru