प्रतिक्रिया ट्यूटोरियल

रिएक्ट होम प्रतिक्रिया परिचय प्रतिक्रिया आरंभ करें प्रतिक्रिया ES6 रिएक्ट रेंडर एचटीएमएल प्रतिक्रिया JSX प्रतिक्रिया घटक प्रतिक्रिया वर्ग प्रतिक्रिया सहारा प्रतिक्रिया घटनाक्रम प्रतिक्रिया सशर्त प्रतिक्रिया सूचियाँ प्रतिक्रिया प्रपत्र प्रतिक्रिया राउटर प्रतिक्रिया ज्ञापन प्रतिक्रिया सीएसएस स्टाइलिंग प्रतिक्रिया सास स्टाइलिंग

प्रतिक्रिया हुक

एक हुक क्या है? राज्य का उपयोग करें उपयोग प्रभाव उपयोग प्रसंग उपयोग रेफरी रेड्यूसर का उपयोग करें कॉलबैक का उपयोग करें मेमो का उपयोग करें कस्टम हुक

प्रतिक्रिया अभ्यास

प्रतिक्रिया प्रश्नोत्तरी प्रतिक्रिया अभ्यास प्रतिक्रिया प्रमाण पत्र

प्रतिक्रिया ES6 विनाशकारी


विनाशकारी

विनाश को स्पष्ट करने के लिए, हम एक सैंडविच बनाएंगे। क्या आप अपना सैंडविच बनाने के लिए सब कुछ रेफ्रिजरेटर से निकालते हैं? नहीं, आप केवल उन्हीं वस्तुओं को बाहर निकालते हैं जिन्हें आप अपने सैंडविच में उपयोग करना चाहते हैं।

विनाश बिल्कुल वैसा ही है। हमारे पास एक सरणी या वस्तु हो सकती है जिसके साथ हम काम कर रहे हैं, लेकिन हमें इनमें से केवल कुछ वस्तुओं की आवश्यकता है।

विनाशकारी केवल वही निकालना आसान बनाता है जिसकी आवश्यकता है।


सरणियों को नष्ट करना

यहाँ एक चर के लिए सरणी आइटम निर्दिष्ट करने का पुराना तरीका है:

पहले:

const vehicles = ['mustang', 'f-150', 'expedition'];

// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];

यहाँ एक चर के लिए सरणी आइटम निर्दिष्ट करने का नया तरीका है:

विनाशकारी के साथ:

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car, truck, suv] = vehicles;

सरणियों को नष्ट करते समय, चर घोषित किए जाने का क्रम महत्वपूर्ण है।

अगर हम केवल कार और एसयूवी चाहते हैं तो हम ट्रक को छोड़ सकते हैं लेकिन अल्पविराम रख सकते हैं:

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car,, suv] = vehicles;

जब कोई फ़ंक्शन एक सरणी देता है तो विनाशकारी काम आता है:

उदाहरण

function calculate(a, b) {
  const add = a + b;
  const subtract = a - b;
  const multiply = a * b;
  const divide = a / b;

  return [add, subtract, multiply, divide];
}

const [add, subtract, multiply, divide] = calculate(4, 7);


w3schools CERTIFIED . 2022

प्रमाणन हासिल करें!

रिएक्ट मॉड्यूल को पूरा करें, अभ्यास करें, परीक्षा दें और w3schools प्रमाणित बनें !!

$95 नामांकन

विनाशकारी वस्तुएं

किसी फ़ंक्शन के अंदर किसी ऑब्जेक्ट का उपयोग करने का पुराना तरीका यहां दिया गया है:

पहले:

const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red'
}

myVehicle(vehicleOne);

// old way
function myVehicle(vehicle) {
  const message = 'My ' + vehicle.type + ' is a ' + vehicle.color + ' ' + vehicle.brand + ' ' + vehicle.model + '.';
}

किसी फ़ंक्शन के अंदर किसी ऑब्जेक्ट का उपयोग करने का नया तरीका यहां दिया गया है:

विनाशकारी के साथ:

const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red'
}

myVehicle(vehicleOne);

function myVehicle({type, color, brand, model}) {
  const message = 'My ' + type + ' is a ' + color + ' ' + brand + ' ' + model + '.';
}

ध्यान दें कि ऑब्जेक्ट गुणों को किसी विशिष्ट क्रम में घोषित करने की आवश्यकता नहीं है।

हम नेस्टेड ऑब्जेक्ट को संदर्भित करके और फिर नेस्टेड ऑब्जेक्ट से आवश्यक वस्तुओं को फिर से नष्ट करने के लिए एक कोलन और घुंघराले ब्रेसिज़ का उपयोग करके गहराई से नेस्टेड ऑब्जेक्ट्स को नष्ट कर सकते हैं:

उदाहरण

const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red',
  registration: {
    city: 'Houston',
    state: 'Texas',
    country: 'USA'
  }
}

myVehicle(vehicleOne)

function myVehicle({ model, registration: { state } }) {
  const message = 'My ' + model + ' is registered in ' + state + '.';
}


व्यायाम के साथ खुद को परखें

व्यायाम:

नाम के एक चर में, सरणी से केवल तीसरे आइटम को निकालने के लिए विनाशकारी का उपयोग करें suv

const vehicles = ['mustang', 'f-150', 'expedition'];

const [] = vehicles;