Comment importer et exporter des composants à l'aide de React + ES6 + Webpack?

Je joue autour avec Reactet en ES6utilisant babelet webpack. Je souhaite créer plusieurs composants dans différents fichiers, les importer dans un seul fichier et les regrouper avecwebpack

Disons que j'ai quelques composants comme celui-ci:

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

En utilisant webpack et en suivant leur tutoriel, j'ai main.js:

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

Après avoir créé le projet et l'avoir exécuté, j'obtiens l'erreur suivante dans la console de mon navigateur:

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

Qu'est-ce que je fais mal? Comment puis-je correctement importer et exporter mes composants?

Essayez par défaut les exportations de vos composants:

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

en utilisant default, vous exprimez qu'il sera membre de ce module qui sera importé si aucun nom de membre spécifique n'est fourni. Vous pouvez également indiquer que vous souhaitez importer le membre spécifique appelé MyNavbar en le faisant: importez {MyNavbar} depuis './comp/my-navbar.jsx'; dans ce cas, aucune valeur par défaut n'est nécessaire

Emballage des composants avec des accolades si aucune exportation par défaut:

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

ou importer plusieurs composants à partir d'un seul fichier de module

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

Pour exporter un seul composant dans ES6, vous pouvez utiliser export defaultcomme suit:

class MyClass extends Component {
 ...
}

export default MyClass;

Et maintenant, vous utilisez la syntaxe suivante pour importer ce module:

import MyClass from './MyClass.react'

Si vous cherchez à exporter plusieurs composants à partir d'un seul fichier, la déclaration ressemblerait à ceci:

export class MyClass1 extends Component {
 ...
}

export class MyClass2 extends Component {
 ...
}

Et maintenant, vous pouvez utiliser la syntaxe suivante pour importer ces fichiers:

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

MDN a une très belle documentation pour toutes les nouvelles façons d'importer et d'exporter des modules est ES 6 Import-MDN . Une brève description de celui-ci en ce qui concerne votre question, vous pourriez avoir soit:

1. A déclaré le composant que vous exportez comme composant « par défaut » que ce module exportait: export default class MyNavbar extends React.Component {et donc lors de l' importation de votre « MyNavbar » Vous ne devez pas mettre des accolades autour: import MyNavbar from './comp/my-navbar.jsx';. Le fait de ne pas mettre d'accolades autour d'une importation indique au document que ce composant a été déclaré comme «export par défaut». Si ce n'était pas le cas, vous obtiendrez une erreur (comme vous l'avez fait).

2. Si vous ne vouliez pas déclarer votre 'MyNavbar' comme exportation par défaut lors de son exportation:, export class MyNavbar extends React.Component {alors vous devrez envelopper votre importation de 'MyNavbar entre accolades: import {MyNavbar} from './comp/my-navbar.jsx';

Je pense que puisque vous n'aviez qu'un seul composant dans votre fichier './comp/my-navbar.jsx', c'est cool d'en faire l'exportation par défaut. Si vous aviez plus de composants comme MyNavbar1, MyNavbar2, MyNavbar3, alors je ne ferais pas l'un ou l'autre d'eux par défaut et importer les composants sélectionnés d'un module lorsque le module n'a déclaré aucune chose par défaut que vous pouvez utiliser: import {foo, bar} from "my-module";où foo et bar sont plusieurs membres de votre module.

Lisez certainement le document MDN, il contient de bons exemples de syntaxe. J'espère que cela aidera avec un peu plus d'explications pour tous ceux qui cherchent à jouer avec ES 6 et l'importation / exportation de composants dans React.

J'espère que c'est utile

Étape 1: App.js est (module principal) importer le module de connexion

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

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

export default App;

Étape 2: Créez le dossier de connexion et créez le fichier login.js et personnalisez vos besoins, il sera automatiquement rendu à App.js Exemple 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;

Il existe deux façons différentes d'importer des composants dans react et la méthode recommandée est la méthode des composants

1. Méthode de la bibliothèque (non recommandée)
2. Voie des composants (recommandé)

Explication détaillée PFB

Méthode d'importation de la bibliothèque

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

C'est agréable et pratique, mais cela ne regroupe pas seulement Button et FlatButton (et leurs dépendances) mais toutes les bibliothèques.

Méthode d'importation des composants

Une façon de l'atténuer est d'essayer d'importer ou d'exiger uniquement ce qui est nécessaire, disons la manière des composants. En utilisant le même exemple:

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

Cela regroupera uniquement Button, FlatButton et leurs dépendances respectives. Mais pas toute la bibliothèque. J'essaierais donc de me débarrasser de toutes les importations de votre bibliothèque et d'utiliser la méthode des composants à la place.

Si vous n'utilisez pas beaucoup de composants, cela devrait réduire considérablement la taille de votre fichier fourni.