Come importare ed esportare componenti usando React + ES6 + webpack?

Sto giocando con Reacte ES6usando babele webpack. Voglio costruire diversi componenti in diversi file, importarli in un singolo file e raggrupparli insiemewebpack

Diciamo che ho alcuni componenti come questo:

my-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>
      );
    }
}

main-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')
);

Usando il webpack e seguendo il loro tutorial, ho main.js:

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

Dopo aver creato il progetto e averlo eseguito, visualizzo il seguente errore nella mia console del browser:

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`.

Che cosa sto facendo di sbagliato? Come posso importare ed esportare correttamente i miei componenti?

Prova a utilizzare le esportazioni predefinite nei tuoi componenti:

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>
      );
    }
}

usando default esprimi che sarà membro in quel modulo che verrebbe importato se non viene fornito un nome membro specifico. Potresti anche esprimere che vuoi importare il membro specifico chiamato MyNavbar in questo modo: import {MyNavbar} da './comp/my-navbar.jsx'; in questo caso, non è necessario alcun valore predefinito

Avvolgimento di componenti con parentesi graffe se non vengono esportate per impostazione predefinita:

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

o importare più componenti da un singolo file del modulo

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

Per esportare un singolo componente in ES6, è possibile utilizzare export defaultcome segue:

class MyClass extends Component {
 ...
}

export default MyClass;

E ora usi la sintassi seguente per importare quel modulo:

import MyClass from './MyClass.react'

Se stai cercando di esportare più componenti da un singolo file, la dichiarazione sarebbe simile a questa:

export class MyClass1 extends Component {
 ...
}

export class MyClass2 extends Component {
 ...
}

E ora puoi usare la sintassi seguente per importare quei file:

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

MDN ha una documentazione davvero interessante per tutti i nuovi modi di importare ed esportare i moduli è ES 6 Import-MDN . Una breve descrizione in merito alla tua domanda potresti avere:

1. Dichiarato il componente che si esportavano come componente 'default' che questo modulo esportava: export default class MyNavbar extends React.Component {e così quando Importare il 'MyNavbar' Non è necessario mettere le parentesi graffe intorno ad esso: import MyNavbar from './comp/my-navbar.jsx';. Non mettere parentesi graffe attorno a un'importazione, tuttavia, sta dicendo al documento che questo componente è stato dichiarato come "default di esportazione". In caso contrario, otterrai un errore (come hai fatto tu).

2. Se non volessi dichiarare "MyNavbar" come esportazione predefinita quando lo esporti:, export class MyNavbar extends React.Component {allora dovresti avvolgere la tua importazione di "MyNavbar tra parentesi graffe: import {MyNavbar} from './comp/my-navbar.jsx';

Penso che dato che nel tuo file "./comp/my-navbar.jsx" hai solo un componente, è bello renderlo l'esportazione predefinita. Se avessi avuto più componenti come MyNavbar1, MyNavbar2, MyNavbar3, allora non renderei uno di essi o uno predefinito e importare i componenti selezionati di un modulo quando il modulo non ha dichiarato nulla di predefinito che puoi usare: import {foo, bar} from "my-module";dove foo e la barra sono più membri del tuo modulo.

Sicuramente leggi il documento MDN che ha buoni esempi per la sintassi. Speriamo che questo aiuti con un po 'più di una spiegazione per chiunque stia cercando di giocare con ES 6 e import / export di componenti in React.

Spero sia utile

Passaggio 1: App.js è (modulo principale) importare il modulo di accesso

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

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

export default App;

Passaggio 2: Creare la cartella di accesso e creare il file login.js e personalizzare le esigenze in modo che vengano automaticamente visualizzate in App.js Esempio Login.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;

Esistono due modi diversi di importare i componenti in reag e il modo consigliato è quello dei componenti

1. Modo libreria (non consigliato)
2. Modo componente (consigliato)

Spiegazione dei dettagli PFB

Modalità di importazione della libreria

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

Questo è bello e pratico, ma non solo raggruppa Button e FlatButton (e le loro dipendenze) ma tutte le librerie.

Modo componente di importazione

Un modo per alleviarlo è provare a importare o richiedere solo ciò che è necessario, diciamo il componente. Utilizzando lo stesso esempio:

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

Questo raggrupperà solo Button, FlatButton e le rispettive dipendenze. Ma non l'intera biblioteca. Quindi proverei a sbarazzarmi di tutte le importazioni della tua libreria e utilizzare invece il componente.

Se non si utilizzano molti componenti, è necessario ridurre notevolmente le dimensioni del file in bundle.