परिचय

रिएक्ट, यूजर इंटरफेस के निर्माण के लिए एक शक्तिशाली जावास्क्रिप्ट लाइब्रेरी आधुनिक वेब विकास के लिए आवश्यक हो गई है। रिएक्ट में उतरने से पहले, मूल जावास्क्रिप्ट अवधारणाओं की ठोस समझ होना महत्वपूर्ण है। ये मूलभूत कौशल आपके सीखने की प्रक्रिया को आसान बना देंगे और आपको अधिक कुशल और प्रभावी रिएक्ट एप्लिकेशन बनाने में मदद करेंगे। यह आलेख आपको उन शीर्ष जावास्क्रिप्ट अवधारणाओं के बारे में मार्गदर्शन करेगा जिन्हें आपको रिएक्ट सीखने से पहले मास्टर करने की आवश्यकता है।

चर और डेटा प्रकार

वेरिएबल को समझना

वेरिएबल्स किसी भी प्रोग्रामिंग भाषा में मौलिक हैं, और जावास्क्रिप्ट कोई अपवाद नहीं है। जावास्क्रिप्ट में, वेरिएबल कंटेनर होते हैं जिनमें डेटा मान होते हैं। आप var, Let, या const का उपयोग करके वेरिएबल घोषित कर सकते हैं।

var name = 'John';
let age = 30;
const isDeveloper = true;

जावास्क्रिप्ट में डेटा प्रकार

जावास्क्रिप्ट में कई डेटा प्रकार हैं, जिनमें शामिल हैं:

• आदिम प्रकार: संख्या, स्ट्रिंग, बूलियन, शून्य, अपरिभाषित, प्रतीक, और BigInt।
• संदर्भ प्रकार: ऑब्जेक्ट, ऐरे और फ़ंक्शंस।

यह समझना कि ये डेटा प्रकार कैसे काम करते हैं और उनका प्रभावी ढंग से उपयोग कैसे करें, रिएक्ट के साथ काम करने के लिए महत्वपूर्ण है।

फ़ंक्शन और एरो फ़ंक्शंस

पारंपरिक कार्य

फ़ंक्शन कोड के पुन: प्रयोज्य ब्लॉक हैं जो एक विशिष्ट कार्य करते हैं। पारंपरिक फ़ंक्शन सिंटैक्स इस तरह दिखता है:

function greet(name) {
  return `Hello, ${name}!`;
}

एरो फ़ंक्शन

ईएस6 में प्रस्तुत, एरो फ़ंक्शंस एक छोटा सिंटैक्स प्रदान करते हैं और इस मान को शाब्दिक रूप से बांधते हैं। यहां बताया गया है कि आप एरो सिंटैक्स का उपयोग करके समान फ़ंक्शन कैसे लिख सकते हैं:

const greet = (name) => `Hello, ${name}!`;

रिएक्ट घटकों और हुक के साथ काम करते समय फ़ंक्शन, विशेष रूप से एरो फ़ंक्शन को समझना आवश्यक है।

ES6 सिंटैक्स

चलो और स्थिरांक

ES6 ने ब्लॉक-स्कोप्ड वैरिएबल घोषणाओं के लिए लेट और कॉन्स्ट पेश किया। var के विपरीत, जो फ़ंक्शन-स्कोप्ड है, Let और const स्कोप समस्याओं के कारण बग से बचने में मदद करते हैं।

let count = 0;
const PI = 3.14;

टेम्पलेट शाब्दिक

टेम्पलेट शाब्दिक आपको स्ट्रिंग शाब्दिक के अंदर अभिव्यक्तियों को एम्बेड करने की अनुमति देते हैं, जिससे स्ट्रिंग संयोजन अधिक पठनीय हो जाता है।

let name = 'John';
let greeting = `Hello, ${name}!`;

डिस्ट्रक्चरिंग असाइनमेंट

डिस्ट्रक्चरिंग आपको सरणियों से मानों या वस्तुओं से गुणों को अलग-अलग चर में अनपैक करने की अनुमति देता है।

let person = { name: 'John', age: 30 };
let { name, age } = person

आधुनिक जावास्क्रिप्ट लिखने और रिएक्ट के साथ काम करने के लिए ईएस6 सिंटैक्स में महारत हासिल करना महत्वपूर्ण है।

एसिंक्रोनस जावास्क्रिप्ट

कॉलबैक

कॉलबैक वे फ़ंक्शन हैं जो अन्य फ़ंक्शन के लिए तर्क के रूप में पारित किए जाते हैं और कुछ ऑपरेशन पूरा होने के बाद निष्पादित होते हैं।

function fetchData(callback) {
  setTimeout(() => {
    callback('Data fetched');
  }, 1000);
}

वादे

वादे अतुल्यकालिक संचालन को संभालने के लिए एक साफ-सुथरा तरीका प्रदान करते हैं और इन्हें जंजीर में बांधा जा सकता है।

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Data fetched'), 1000);
});

promise.then((message) => console.log(message));

Async/प्रतीक्षा

Async/await सिंटैक्स आपको एसिंक्रोनस कोड को सिंक्रोनस तरीके से लिखने की अनुमति देता है, जिससे पठनीयता में सुधार होता है।

async function fetchData() {
  let response = await fetch('url');
  let data = await response.json();
  console.log(data);
}

रिएक्ट अनुप्रयोगों में डेटा प्राप्त करने से निपटने के लिए एसिंक्रोनस जावास्क्रिप्ट को समझना महत्वपूर्ण है।

दस्तावेज़ ऑब्जेक्ट मॉडल (डीओएम)

डोम क्या है?

DOM वेब दस्तावेज़ों के लिए एक प्रोग्रामिंग इंटरफ़ेस है। यह पृष्ठ का प्रतिनिधित्व करता है ताकि प्रोग्राम दस्तावेज़ संरचना, शैली और सामग्री को बदल सकें।

DOM में हेरफेर

आप DOM में हेरफेर करने, तत्वों का चयन करने और उनकी विशेषताओं या सामग्री को संशोधित करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं।

let element = document.getElementById('myElement');
element.textContent = 'Hello, World!';

रिएक्ट प्रत्यक्ष DOM हेरफेर को दूर करता है, लेकिन डिबगिंग और प्रदर्शन को अनुकूलित करने के लिए यह समझना आवश्यक है कि यह कैसे काम करता है।

घटना से निपटना

इवेंट श्रोताओं को जोड़ना

जावास्क्रिप्ट में इवेंट हैंडलिंग में क्लिक और कीप्रेस जैसे उपयोगकर्ता इंटरैक्शन को सुनना और तदनुसार प्रतिक्रिया देना शामिल है।

let button = document.getElementById('myButton');
button.addEventListener('click', () => {
  alert('Button clicked!');
});

इवेंट बबलिंग और कैप्चरिंग

घटनाओं को कुशलतापूर्वक संभालने के लिए घटना प्रसार को समझना महत्वपूर्ण है। इवेंट बबलिंग और कैप्चरिंग उस क्रम को निर्धारित करते हैं जिसमें इवेंट हैंडलर निष्पादित होते हैं।

// Bubbling
document.getElementById('child').addEventListener('click', () => {
  console.log('Child clicked');
});

// Capturing
document.getElementById('parent').addEventListener(
  'click',
  () => {
    console.log('Parent clicked');
  },
  true
);

इवेंट हैंडलिंग रिएक्ट अनुप्रयोगों में उपयोगकर्ता इंटरैक्शन का एक मुख्य हिस्सा है।

ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग (ओओपी)

वर्ग और वस्तुएं

जावास्क्रिप्ट कक्षाओं और ऑब्जेक्ट के माध्यम से ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग का समर्थन करता है। कक्षाएं ऑब्जेक्ट बनाने के लिए ब्लूप्रिंट हैं।

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, my name is ${this.name}`;
  }
}

let john = new Person('John', 30);
console.log(john.greet());

विरासत

विरासत आपको मौजूदा कक्षाओं के आधार पर नई कक्षाएं बनाने की अनुमति देता है, जिससे कोड के पुन: उपयोग को बढ़ावा मिलता है।

class Developer extends Person {
  constructor(name, age, language) {
    super(name, age);
    this.language = language;
  }

  code() {
    return `${this.name} is coding in ${this.language}`;
  }
}

let dev = new Developer('Jane', 25, 'JavaScript');
console.log(dev.code());

ओओपी अवधारणाएं जटिल रिएक्ट अनुप्रयोगों की संरचना और प्रबंधन के लिए मूल्यवान हैं।

मॉड्यूल और आयात

आयात और निर्यात

मॉड्यूल आपको अपने कोड को पुन: प्रयोज्य टुकड़ों में तोड़ने की अनुमति देते हैं। आप किसी मॉड्यूल से फ़ंक्शंस, ऑब्जेक्ट या प्रिमिटिव को निर्यात कर सकते हैं और उन्हें अन्य मॉड्यूल में आयात कर सकते हैं।

// module.js
export const greeting = 'Hello, World!';

// main.js
import { greeting } from './module';
console.log(greeting);

आपके रिएक्ट कोडबेस को कुशलतापूर्वक व्यवस्थित करने के लिए मॉड्यूल को समझना आवश्यक है।

जावास्क्रिप्ट वादे

वादे बनाना

वादे एक अतुल्यकालिक ऑपरेशन के अंतिम समापन या विफलता का प्रतिनिधित्व करते हैं।

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Data fetched'), 1000);
});

promise.then((message) => console.log(message));

वादों की श्रृंखला

क्रम में कई अतुल्यकालिक संचालन को संभालने के लिए वादों को जंजीर में बांधा जा सकता है।

promise
  .then((message) => {
    console.log(message);
    return new Promise((resolve) => setTimeout(() => resolve('Another operation'), 1000));
  })
  .then((message) => console.log(message));

रिएक्ट में एसिंक्रोनस डेटा फ़ेचिंग और संचालन को प्रबंधित करने के लिए वादों में महारत हासिल करना महत्वपूर्ण है।

डिस्ट्रक्चरिंग और स्प्रेड ऑपरेटर

सरणी और वस्तुओं को नष्ट करना

डिस्ट्रक्चरिंग से सरणियों से मान निकालना या वस्तुओं से गुणों को निकालना सरल हो जाता है।

let [a, b] = [1, 2];
let { name, age } = { name: 'John', age: 30 };

स्प्रेड ऑपरेटर

स्प्रेड ऑपरेटर आपको किसी पुनरावृत्त (जैसे एक सरणी) या किसी ऑब्जेक्ट के गुणों के तत्वों का विस्तार करने की अनुमति देता है।

let arr = [1, 2, 3];
let newArr = [...arr, 4, 5];

let obj = { a: 1, b: 2 };
let newObj = { ...obj, c: 3 };

संक्षिप्त और पठनीय रिएक्ट कोड लिखने के लिए डिस्ट्रक्चरिंग और स्प्रेड ऑपरेटर को समझना आवश्यक है।

सामान्य प्रश्न

प्रतिक्रिया के लिए आवश्यक कोर जावास्क्रिप्ट अवधारणाएं क्या हैं?

मुख्य अवधारणाओं में चर, डेटा प्रकार, फ़ंक्शन, ईएस6 सिंटैक्स, एसिंक्रोनस जावास्क्रिप्ट, डीओएम हेरफेर, इवेंट हैंडलिंग, ओओपी, मॉड्यूल, वादे और डिस्ट्रक्चरिंग शामिल हैं।

एसिंक्रोनस जावास्क्रिप्ट को समझना रिएक्ट के लिए क्यों महत्वपूर्ण है?

रिएक्ट एप्लिकेशन में अक्सर डेटा फ़ेचिंग और एसिंक्रोनस ऑपरेशन शामिल होते हैं। कॉलबैक, वादे और एसिंक/प्रतीक्षा में महारत हासिल करने से इन कार्यों का सुचारू संचालन सुनिश्चित होता है।

ES6 सुविधाएँ प्रतिक्रिया विकास को कैसे बढ़ाती हैं?

तीर फ़ंक्शन, टेम्पलेट शाब्दिक और डिस्ट्रक्चरिंग जैसी ईएस6 सुविधाएं कोड पठनीयता और दक्षता में सुधार करती हैं, जिससे रिएक्ट विकास अधिक सुव्यवस्थित और प्रबंधनीय हो जाता है।

रिएक्ट में DOM की क्या भूमिका है?

जबकि रिएक्ट प्रत्यक्ष DOM हेरफेर को सारांशित करता है, DOM को समझना डिबगिंग, प्रदर्शन को अनुकूलित करने और यह समझने के लिए महत्वपूर्ण है कि रिएक्ट UI अपडेट को कैसे प्रबंधित करता है।

मॉड्यूल और आयात प्रतिक्रिया में कैसे मदद करते हैं?

मॉड्यूल और आयात बेहतर कोड संगठन की अनुमति देते हैं, जिससे कोड को पुन: प्रयोज्य, स्वतंत्र टुकड़ों में विभाजित करके बड़े रिएक्ट कोडबेस को प्रबंधित और बनाए रखना आसान हो जाता है।

निष्कर्ष

रिएक्ट में उतरने से पहले, इन जावास्क्रिप्ट अवधारणाओं में महारत हासिल करने से मजबूत और कुशल अनुप्रयोगों के निर्माण के लिए एक ठोस आधार मिलेगा। प्रत्येक अवधारणा आपकी रिएक्ट विकास यात्रा को सुचारू और अधिक उत्पादक बनाने में महत्वपूर्ण भूमिका निभाती है। हैप्पी कोडिंग!