JSX में "निर्यात डिफ़ॉल्ट" क्या करता है?

Question

मैं पूछना चाहता हूं कि अंतिम वाक्य का क्या मतलब है और क्या करता है (डिफ़ॉल्ट HelloWorld निर्यात करता है?) लेकिन मुझे इसके बारे में कोई ट्यूटोरियल नहीं मिल सकता है।

// hello-world.jsx

import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld;

Answer 1

निर्यात की तरह export default HelloWorld;और आयात , इस तरह के रूप import React from 'react'का हिस्सा हैं ES6 मॉड्यूल प्रणाली ।

एक मॉड्यूल एक आत्म निहित इकाई है जो अन्य मॉड्यूल का उपयोग करके परिसंपत्तियों को उजागर कर सकता है export, और उपयोग करने वाले अन्य मॉड्यूल से संपत्ति प्राप्त कर सकता है import।

आपके कोड में:

import React from 'react'; // get the React object from the react module

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld; // expose the HelloWorld component to other modules

ES6 में दो प्रकार के निर्यात होते हैं:

नामित निर्यात - उदाहरण के export function func() {}लिए एक नामित निर्यात है func। नामांकित मॉड्यूल का उपयोग करके आयात किया जा सकता है import { exportName } from 'module';.इस मामले में, आयात का नाम निर्यात के नाम के समान होना चाहिए। उदाहरण में फ़ंक को आयात करने के लिए, आपको उपयोग करना होगा import { func } from 'module';। एक मॉड्यूल में कई नामित निर्यात हो सकते हैं।

डिफ़ॉल्ट निर्यात - वह मान है जो मॉड्यूल से आयात किया जाएगा, यदि आप साधारण आयात विवरण का उपयोग करते हैंimport X from 'module' । X वह नाम है जिसे मान को सम्‍मिलित चर पर स्‍थानीय रूप से दिया जाएगा, और इसे मूल निर्यात की तरह नाम नहीं दिया जाना चाहिए। केवल एक डिफ़ॉल्ट निर्यात हो सकता है।

एक मॉड्यूल में नामित निर्यात और डिफ़ॉल्ट निर्यात दोनों शामिल हो सकते हैं, और उनका उपयोग करके एक साथ आयात किया जा सकता है import defaultExport, { namedExport1, namedExport3, etc... } from 'module';।

Answer 2

export default एक स्क्रिप्ट फ़ाइल से एक एकल वर्ग, समारोह या आदिम निर्यात करने के लिए उपयोग किया जाता है।

निर्यात के रूप में भी लिखा जा सकता है

export default class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

आप इसे फंक्शन कंपोनेंट की तरह भी लिख सकते हैं

export default const HelloWorld = () => (<p>Hello, world!</p>);

इसका उपयोग इस फ़ंक्शन को किसी अन्य स्क्रिप्ट फ़ाइल में आयात करने के लिए किया जाता है

import HelloWorld from './HelloWorld';

जरूरी नहीं कि HelloWorldआप इसे आयात करें क्योंकि आप इसे डिफ़ॉल्ट निर्यात के रूप में किसी भी नाम दे सकते हैं

थोड़ा निर्यात के बारे में

जैसा कि नाम कहता है, इसका उपयोग स्क्रिप्ट फ़ाइलों या मॉड्यूल से फ़ंक्शंस, ऑब्जेक्ट, क्लास या एक्सप्रेशन को एक्सपोर्ट करने के लिए किया जाता है

Utiliites.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

इसे आयात और उपयोग किया जा सकता है

App.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

या

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

जब निर्यात डिफ़ॉल्ट का उपयोग किया जाता है, तो यह बहुत सरल है। स्क्रिप्ट फाइलें सिर्फ एक चीज का निर्यात करती हैं। cube.js

export default function cube(x) {
  return x * x * x;
};

और App.js के रूप में इस्तेमाल किया

import Cube from 'cube';
console.log(Cube(3)); // 27

Answer 3

सरल शब्दों में -

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

यहां स्पष्ट समझ पाने के लिए एक लिंक है: एमडीएन वेब डॉक्स

Answer 4

सरलतम समझ default exportहै

Export ES6 की विशेषता है जिसका उपयोग किसी मॉड्यूल (फ़ाइल) को निर्यात करने और किसी अन्य मॉड्यूल (फ़ाइल) में उपयोग करने के लिए किया जाता है।

डिफ़ॉल्ट निर्यात:

1. default export यदि आप फ़ाइल (मॉड्यूल) से केवल एक ऑब्जेक्ट (चर, फ़ंक्शन, क्लास) निर्यात करना चाहते हैं तो यह सम्मेलन है।
2. प्रति फ़ाइल केवल एक डिफ़ॉल्ट निर्यात हो सकता है, लेकिन केवल एक निर्यात तक ही सीमित नहीं है ।
3. डिफ़ॉल्ट निर्यात की गई वस्तु को आयात करते समय हम उसका नाम बदल सकते हैं।

निर्यात या नामांकित निर्यात:

1. यह एक ही नाम के साथ ऑब्जेक्ट (चर, फ़ंक्शन, cals) को निर्यात करने के लिए उपयोग किया जाता है।

2. इसका उपयोग एक फाइल से कई वस्तुओं को निर्यात करने के लिए किया जाता है।

3. किसी अन्य फ़ाइल में आयात करते समय इसका नाम नहीं बदला जा सकता है, इसका वही नाम होना चाहिए जो इसे निर्यात करने के लिए उपयोग किया गया था।

प्रतिक्रिया में, Vue और कई अन्य रूपरेखाएं निर्यात का उपयोग मॉड्यूलर आधारित अनुप्रयोगों को बनाने के लिए पुन: प्रयोज्य घटकों को निर्यात करने के लिए किया जाता है।