React.js का उपयोग करके वेब एप्लिकेशन बनाने पर ट्यूटोरियल

React.js एक लोकप्रिय फ्रंट-एंड डेवलपमेंट लाइब्रेरी है जिसका उपयोग इंटरैक्टिव यूजर इंटरफेस (UI) बनाने के लिए किया जाता है। फेसबुक द्वारा विकसित React.js का उपयोग इंस्टाग्राम, एयरबीएनबी और व्हाट्सएप सहित कई प्रमुख कंपनियों द्वारा किया जाता है। यदि आप प्रभावी, तेज़ और रिस्पॉन्सिव वेब एप्लिकेशन बनाना चाहते हैं, तो React.js आपके लिए सही विकल्प हो सकता है।

पेंडाहुलुआन

शुरू करने से पहले, सुनिश्चित करें कि आपके कंप्यूटर पर Node.js और npm (नोड पैकेज मैनेजर) इंस्टॉल हैं। Node.js और npm आवश्यक हैं क्योंकि ये React.js का उपयोग करके वेब एप्लिकेशन विकसित करने के लिए आवश्यक वातावरण और उपकरण प्रदान करते हैं।

चरण 1: रिएक्ट प्रोजेक्ट को आरंभ करना

एक नया React.js एप्लिकेशन बनाने के लिए, हम Create React App नामक एप्लिकेशन निर्माण टूल का उपयोग कर सकते हैं, जो प्रारंभिक कॉन्फ़िगरेशन को कम से कम करता है। अपने टर्मिनल या कमांड प्रॉम्प्ट में निम्न कमांड चलाएँ:

“बैश
npx बनाएँ-प्रतिक्रिया-ऐप my-app
सीडी माय-ऐप
npm शुरू
"`

यह कमांड `my-app` नाम की एक नई डायरेक्टरी बनाएगी, सभी आवश्यक डिपेंडेंसी डाउनलोड और इंस्टॉल करेगी, और डेवलपमेंट सर्वर शुरू करेगी। अब आप ब्राउज़र खोलकर `http://localhost:3000` पर जाकर डिफ़ॉल्ट React.js एप्लिकेशन देख सकते हैं।

चरण 2: फ़ोल्डर संरचना

आइए Create React App द्वारा बनाई गई फ़ोल्डर संरचना पर एक नज़र डालते हैं:

"`
मेरा-ऐप/
├── नोड_मॉड्यूल्स/
├── सार्वजनिक/
│ └── index.html
└── स्रोत/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── लोगो.svg
"`

– `node_modules/`: इसमें आपके प्रोजेक्ट की सभी निर्भरताएँ शामिल हैं।
– `public/`: इसमें स्थैतिक फाइलें शामिल हैं, जिनमें `index.html` भी शामिल है, जो एप्लिकेशन का प्रवेश बिंदु है।
– `src/`: यह वह जगह है जहाँ आप अपना अधिकांश समय व्यतीत करेंगे। इसमें रिएक्ट कंपोनेंट्स, सीएसएस फाइलें और अन्य एसेट्स शामिल हैं।

चरण 3: अनावश्यक फ़ाइलों को हटाना

नए सिरे से शुरुआत करने के लिए, आइए कुछ अनावश्यक फ़ाइलों को हटा दें। `src/` फ़ोल्डर के अंदर मौजूद `logo.svg` और `App.test.js` फ़ाइलों को हटा दें। फिर, `App.css` और `index.css` फ़ाइलों को खोलें और उनमें मौजूद सभी CSS कोड को हटाकर एक साफ़ स्टाइलशीट से शुरुआत करें।

चरण 4: अपना पहला घटक बनाना

React.js एक कंपोनेंट-आधारित प्रोग्रामिंग भाषा है। कंपोनेंट आपके वेब एप्लिकेशन के मूलभूत तत्व हैं। आइए, अपना पहला कंपोनेंट बनाने के लिए `App.js` फ़ाइल को संशोधित करें।

`src/App.js` फ़ाइल खोलें और उसमें निम्नलिखित कोड डालें:

"`जेएसएक्स
'प्रतिक्रिया' से आयात प्रतिक्रिया;
import './App.css';

फ़ंक्शन ऐप () {
वापसी (

);
}

निर्यात डिफ़ॉल्ट ऐप;
"`

`App.js` फ़ाइल में React कोड को JSX (JavaScript XML) का उपयोग करके प्रारंभ करें, जिससे हम JavaScript के भीतर HTML जैसी संरचना लिख ​​सकते हैं। अपने परिवर्तनों को सहेजें और परिणाम अपने ब्राउज़र में देखें।

चरण 5: नए घटक जोड़ना

अब चलिए कुछ नए कंपोनेंट्स जोड़ते हैं। `src` फोल्डर के अंदर `components` नाम का एक नया फोल्डर बनाएं। फिर `components` फोल्डर में `HelloWorld.js` नाम की एक नई फाइल बनाएं।

"`जेएसएक्स
'प्रतिक्रिया' से आयात प्रतिक्रिया;

फ़ंक्शन HelloWorld() {
वापसी (

);
}

निर्यात डिफ़ॉल्ट हैलोवर्ल्ड;
"`

`App.js` फ़ाइल खोलें और अभी-अभी बनाए गए `HelloWorld` कंपोनेंट को इम्पोर्ट करें:

"`जेएसएक्स
'प्रतिक्रिया' से आयात प्रतिक्रिया;
import './App.css';
import HelloWorld from './components/HelloWorld';

फ़ंक्शन ऐप () {
वापसी (

);
}

निर्यात डिफ़ॉल्ट ऐप;
"`

अब, `App.js` मुख्य पृष्ठ पर `HelloWorld` घटक को रेंडर करता है।

चरण 6: useState का उपयोग करके स्टेट मैनेजमेंट जोड़ना

React में स्टेट को मैनेज करने के लिए बहुत ही शक्तिशाली हुक्स मौजूद हैं। चलिए, अपने एप्लिकेशन में कुछ स्टेट जोड़ते हैं। उदाहरण के लिए, एक काउंटर जोड़ते हैं जो हर बार बटन क्लिक होने पर बढ़ता है।

`HelloWorld.js` फ़ाइल खोलें और उसमें स्टेट और `useState` हुक जोड़ें:

"`जेएसएक्स
'react' से React, { useState } आयात करें;

फ़ंक्शन HelloWorld() {
स्थिरांक [गिनती, सेटकाउंट] = उपयोगस्टेट(0);

const incrementCount = () => {
सेटकाउंट(गिनती + 1);
}

वापसी (

);
}

निर्यात डिफ़ॉल्ट हैलोवर्ल्ड;
"`

`count` स्टेट को 0 के मान से इनिशियलाइज़ किया जाता है, और हर बार बटन पर क्लिक करने पर, `incrementCount` फ़ंक्शन इस मान को बढ़ा देगा।

चरण 7: स्टाइलिंग जोड़ना

स्टाइलिंग जोड़ने के लिए, हम `App.css` फ़ाइल में CSS का उपयोग कर सकते हैं या styled-components जैसी CSS-in-JS लाइब्रेरी का उपयोग कर सकते हैं। फिलहाल हम मानक CSS का ही उपयोग करेंगे।

`App.css` फ़ाइल खोलें और उसमें कुछ स्टाइलिंग जोड़ें:

“`सीएसएस
।अनुप्रयोग {
पाठ संरेखित: केंद्र;
}

.ऐप-हेडर {
पृष्ठभूमि-रंग: 282c34;
न्यूनतम ऊंचाई: 100vh;
प्रदर्शन: फ्लेक्स;
फ्लेक्स-दिशा: कॉलम;
संरेखित-आइटम: केंद्र;
औचित्य-सामग्री: केंद्र;
फ़ॉन्ट-आकार: calc(10px + 2vmin);
सफ़ेद रंग;
}

बटन {
गद्दी: 10px 20px;
मार्जिन टॉप: 20px;
font-size: 16px;
}
"`

चरण 8: रिएक्ट राउटर के साथ रूटिंग जोड़ना

अपने एप्लिकेशन में विभिन्न पेजों के बीच नेविगेशन जोड़ने के लिए, हम React Router का उपयोग कर सकते हैं। निम्नलिखित कमांड चलाकर React Router इंस्टॉल करें:

“बैश
एनपीएम प्रतिक्रिया-राउटर-डोम स्थापित करें
"`

फिर, `components` फोल्डर में `Home.js` और `About.js` नाम के दो नए कंपोनेंट बनाएं।

`Home.js`:
"`जेएसएक्स
'प्रतिक्रिया' से आयात प्रतिक्रिया;

फ़ंक्शन होम() {
वापसी (

);
}

डिफ़ॉल्ट होम निर्यात करें;
"`

`About.js`:
"`जेएसएक्स
'प्रतिक्रिया' से आयात प्रतिक्रिया;

फ़ंक्शन के बारे में() {
वापसी (

);
}

निर्यात डिफ़ॉल्ट के बारे में;
"`

इसके बाद, `App.js` फ़ाइल खोलें और राउटिंग सेट करें:

"`जेएसएक्स
'प्रतिक्रिया' से आयात प्रतिक्रिया;
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import './App.css';
import HelloWorld from './components/HelloWorld';
'./components/Home' से होम आयात करें;
'./घटकों/अबाउट' से 'के बारे में' आयात करें;

फ़ंक्शन ऐप () {
वापसी (

);
}

निर्यात डिफ़ॉल्ट ऐप;
"`

इसके साथ ही हमने अपने एप्लिकेशन में विभिन्न पृष्ठों के बीच बुनियादी नेविगेशन सुविधा जोड़ दी है।

पेनुतुप

यह React.js का उपयोग करके वेब एप्लिकेशन बनाने का एक बुनियादी ट्यूटोरियल है। हमने प्रोजेक्ट सेटअप, कंपोनेंट निर्माण, स्टेट मैनेजमेंट, स्टाइलिंग और राउटिंग को कवर किया है। React.js में कई लाइब्रेरी और टूल मौजूद हैं, जो आपको अधिक जटिल वेब एप्लिकेशन बनाने में मदद कर सकते हैं।

आपको शुभकामनाएँ! मुझे उम्मीद है कि यह ट्यूटोरियल आपको React.js के साथ अपनी यात्रा शुरू करने में मदद करेगा!