Comment importer et exporter des composants à l'aide de Réagir + ES6 + webpack?

Je suis en train de jouer autour avec React et ES6 à l'aide de babel et webpack. Je veux construire plusieurs composants dans les différents fichiers, importer dans un fichier unique et bundle avec webpack

Disons que j'ai un peu de composants comme ceci:

ma-barre de navigation.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>
      );
    }
}

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

À l'aide de webpack et à la suite de leur tutoriel, j'ai main.js:

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

Après la construction du projet et à son exécution, j'obtiens l'erreur suivante dans mon navigateur de la console:

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

Ce que je fais mal? Comment puis-je correctement l'importation et l'exportation de mes composants?

  • export mot clé de détails ici. Il n'est actuellement pas pris en charge nativement par tout les navigateurs web.
InformationsquelleAutor itaied | 2015-11-27