প্রতিক্রিয়া + ES6 + ওয়েবপ্যাক ব্যবহার করে কীভাবে উপাদানগুলি আমদানি ও রফতানি করবেন?

Question

আমি প্রায় খেলছি Reactএবং ES6ব্যবহার babelএবং webpack। আমি বিভিন্ন ফাইলগুলিতে বেশ কয়েকটি উপাদান তৈরি করতে, একটি একক ফাইলে আমদানি করতে এবং সেগুলি দিয়ে বান্ডিল করতে চাইwebpack

ধরা যাক আমার এর মতো কয়েকটি উপাদান রয়েছে:

আমার-navbar.jsx

import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';

export class MyNavbar extends React.Component {
    render(){
      return (
        <Navbar className="navbar-dark" fluid>
        ...
        </Navbar>
      );
    }
}

প্রধান-page.jsx

import React from 'react';
import ReactDOM from 'react-dom';

import MyNavbar from './comp/my-navbar.jsx';

export class MyPage extends React.Component{
  render(){
    return(
        <MyNavbar />
        ...
    );
  }
}

ReactDOM.render(
  <MyPage />,
  document.getElementById('container')
);

ওয়েবপ্যাক ব্যবহার করে এবং তাদের টিউটোরিয়াল অনুসরণ করে, আমার কাছে রয়েছে main.js:

import MyPage from './main-page.jsx';

প্রকল্পটি নির্মাণ এবং এটি চালানোর পরে, আমি আমার ব্রাউজার কনসোলে নিম্নলিখিত ত্রুটিটি পেয়েছি:

Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `MyPage`.

আমি কি ভুল করছি? আমি কীভাবে আমার উপাদানগুলি আমদানি ও রফতানি করতে পারি?

Comments

exportকীওয়ার্ডের বিশদ এখানে । বর্তমানে এটি কোনও ওয়েব-ব্রাউজারের দ্বারা স্থানীয়ভাবে সমর্থিত নয়।

— আরবিটি

Answer 1

আপনার উপাদানগুলিতে রফতানির জন্য ডিফল্ট আইং চেষ্টা করুন :

import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';

export default class MyNavbar extends React.Component {
    render(){
      return (
        <Navbar className="navbar-dark" fluid>
        ...
        </Navbar>
      );
    }
}

ডিফল্ট ব্যবহার করে আপনি প্রকাশ করেন যে সেই মডিউলে সদস্য হতে যা যা নির্দিষ্ট সদস্যের নাম সরবরাহ না করা হলে আমদানি করা হবে। আপনি মাইনাভবার নামক নির্দিষ্ট সদস্যটি আমদানি করতে চান তা প্রকাশ করেও বলতে পারেন: './comp/my-navbar.jsx' থেকে 'মাইনাভবার' আমদানি করুন; এই ক্ষেত্রে, কোনও ডিফল্টের প্রয়োজন নেই

Comments

এটি আমার পক্ষে কাজ করে না। এটি আমার নিজের প্রকল্পে চলাকালীন আমি ত্রুটি পেয়েছি যা বললে এটি উপাদানটি আমদানি করতে পারে না। কোন ধারণা কেন?

— ভাউভেনস

ডিফল্ট ব্যবহার করে আপনি প্রকাশ করেন যে সেই মডিউলে সদস্য হতে যা যা নির্দিষ্ট সদস্যের নাম সরবরাহ না করা হলে আমদানি করা হবে। আপনি মাইনাভবার নামক নির্দিষ্ট সদস্যটি আমদানি করতে চান তা প্রকাশ করেও বলতে পারেন: './comp/my-navbar.jsx' থেকে 'মাইনাভবার' আমদানি করুন; এই ক্ষেত্রে, কোনও ডিফল্টের প্রয়োজন নেই

— এমিলিও রড্রিগেজ

Answer 2

যদি কোনও ডিফল্ট রফতানি না হয় তবে ব্রেসগুলি সহ উপাদানগুলিকে মোড়ানো:

import {MyNavbar} from './comp/my-navbar.jsx';

অথবা একক মডিউল ফাইল থেকে একাধিক উপাদান আমদানি করুন

import {MyNavbar1, MyNavbar2} from './module';

Comments

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। এগুলি হল named exportses6 এবং রপ্তানি করার জন্য একটি নিরাপদ উপায় developer.mozilla.org/en/docs/web/javascript/reference/... চেয়ে ব্যবহারdefault

— kaushik94

"যদি কোনও ডিফল্ট রফতানি না হয় তবে ব্রেসগুলির সাথে উপাদানগুলিকে মোড়ানো" যথেষ্ট। Tnx

— ইউজেন সানিক

হতে পারে এটি সাহায্য করতে পারে: আমার ক্ষেত্রে এটি পথের মধ্যে './' হারিয়েছিল। উপাদানটি একই ফোল্ডারের স্তরে থাকায় এটি কিছুটা অদ্ভুত শোনায়।

— আলেসান্দ্রো ডিএস

Answer 3

ES6- তে একটি একক উপাদান রফতানি করতে, আপনি export defaultনিম্নলিখিত হিসাবে ব্যবহার করতে পারেন :

class MyClass extends Component {
 ...
}

export default MyClass;

এবং এখন আপনি এই মডিউলটি আমদানি করতে নিম্নলিখিত সিনট্যাক্সটি ব্যবহার করেন:

import MyClass from './MyClass.react'

আপনি যদি কোনও একক ফাইল থেকে একাধিক উপাদান রফতানি করতে দেখেন তবে ঘোষণাপত্রটি এরকম কিছু দেখাচ্ছে:

export class MyClass1 extends Component {
 ...
}

export class MyClass2 extends Component {
 ...
}

এবং এখন আপনি এই ফাইলগুলি আমদানি করতে নিম্নলিখিত সিনট্যাক্সটি ব্যবহার করতে পারেন:

import {MyClass1, MyClass2} from './MyClass.react'

Answer 4

মডিউলগুলি আমদানি ও রফতানি করার সমস্ত নতুন উপায়গুলির জন্য এমডিএন এর কাছে সত্যিই দুর্দান্ত ডকুমেন্টেশন রয়েছে ES 6 আমদানি- MDN । আপনার প্রশ্নের ক্ষেত্রে এটির একটি সংক্ষিপ্ত বিবরণ আপনি যা করতে পারতেন:

1. ঘোষিত উপাদান আপনি 'ডিফল্ট' যে উপাদানটি এই মডিউল রপ্তানি হয় রপ্তানি করা হয়েছে: export default class MyNavbar extends React.Component {, এবং তাই যখন আপনার 'MyNavbar' আমদানি হচ্ছে আপনি এটি প্রায় কোঁকড়া ধনুর্বন্ধনী করা হবে না: import MyNavbar from './comp/my-navbar.jsx';। কোনও আমদানির চারপাশে কোঁকড়া ধনুর্বন্ধনী স্থাপন না করা নথিকে বলছে যে এই উপাদানটি 'রফতানি ডিফল্ট' হিসাবে ঘোষণা করা হয়েছিল। এটি না হলে আপনি একটি ত্রুটি পাবেন (যেমনটি করেছিলেন)।

2. আপনি যদি 'মাইনাভার' এটি রফতানির সময় একটি ডিফল্ট রফতানি হিসাবে ঘোষণা করতে না চান: export class MyNavbar extends React.Component {তবে আপনাকে নিজের মাইনাভবারের আমদানিটি কোঁকড়া ধনুতে আবদ্ধ করতে হবে: import {MyNavbar} from './comp/my-navbar.jsx';

আমি মনে করি যেহেতু আপনার './comp/my-navbar.jsx' ফাইলে আপনার কেবল একটি উপাদান ছিল এটি এটিকে ডিফল্ট রফতানি করতে দুর্দান্ত। আপনি যদি মাইনাভবার 1, মাইনাভবার 2, মাইনাবারবার 3 এর মতো আরও উপাদানগুলি পেয়ে থাকেন তবে আমি মডিউলটির কোনওটিকে ডিফল্ট হিসাবে ঘোষিত না করে মডিউলটির নির্বাচিত উপাদানগুলি আমদানি করতে বা মডিউলটির নির্বাচিত উপাদানগুলি আমদানি করতে পারি না: import {foo, bar} from "my-module";যেখানে foo এবং বারটি আপনার মডিউলটির একাধিক সদস্য।

অবশ্যই এমডিএন ডক পড়ুন এতে সিনট্যাক্সের জন্য ভাল উদাহরণ রয়েছে। আশা করি এটি যে কেউ ES 6 এর সাথে খেলনা খুঁজছেন এবং প্রতিক্রিয়াতে উপাদান আমদানি / রফতানির জন্য আরও কিছুটা ব্যাখ্যা দিয়ে সহায়তা করবে।

Answer 5

আমি আশা করি এটি হেল্পফুল

পদক্ষেপ 1: App.js হল (প্রধান মডিউল) লগইন মডিউলটি আমদানি করে

import React, { Component } from 'react';
import './App.css';
import Login from './login/login';

class App extends Component {
  render() {
    return (
      <Login />
    );
  }
}

export default App;

পদক্ষেপ 2: লগইন ফোল্ডার তৈরি করুন এবং login.js ফাইল তৈরি করুন এবং আপনার প্রয়োজনগুলি কাস্টমাইজ করুন এটি স্বয়ংক্রিয়ভাবে App.js রেন্ডার হয় লগইন.জেএস উদাহরণ

import React, { Component } from 'react';
import '../login/login.css';

class Login extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default Login;

Answer 6

প্রতিক্রিয়াতে উপাদানগুলি আমদানির দুটি ভিন্ন উপায় রয়েছে এবং প্রস্তাবিত উপায় হ'ল উপাদান উপায়

1. লাইব্রেরির উপায় (প্রস্তাবিত নয়)
2. উপাদান উপায় (প্রস্তাবিত)

পিএফবি বিস্তারিত ব্যাখ্যা

আমদানির লাইব্রেরি উপায়

import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';

এটি দুর্দান্ত এবং সহজেই কার্যকর তবে এটি কেবল বাটন এবং ফ্ল্যাটবটন (এবং তাদের নির্ভরতা) নয় পুরো লাইব্রেরিগুলিকে বান্ডিল করে।

আমদানির অংশ way

এটিকে হ্রাস করার একটি উপায় হ'ল কেবল আমদানি করার চেষ্টা করা বা যা প্রয়োজন তা প্রয়োজন, घटक উপাদানটি বলি। একই উদাহরণ ব্যবহার করে:

import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';

এটি কেবলমাত্র বোতাম, ফ্ল্যাটবটন এবং তাদের সম্পর্কিত নির্ভরতা বান্ডিল করবে। তবে পুরো লাইব্রেরি নয়। সুতরাং আমি আপনার সমস্ত গ্রন্থাগার আমদানি থেকে মুক্তি দেওয়ার পরিবর্তে উপাদানটির উপায়টি ব্যবহার করার চেষ্টা করব।

আপনি যদি প্রচুর উপাদান ব্যবহার না করে থাকেন তবে এটি আপনার বান্ডিল ফাইলের আকারের পরিমাণ হ্রাস করা উচিত।