Como importar e exportar componentes usando o React + ES6 + webpack?

Estou brincando com Reacte ES6usando babele webpack. Quero criar vários componentes em arquivos diferentes, importar em um único arquivo e agrupá-los comwebpack

Digamos que tenho alguns componentes como este:

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 o webpack e seguindo seu tutorial, eu tenho main.js:

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

Depois de criar o projeto e executá-lo, recebo o seguinte erro no console do navegador:

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

O que estou fazendo de errado? Como posso importar e exportar corretamente meus componentes?

Tente usar como padrão as exportações em seus componentes:

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 o padrão, você expressa que será membro desse módulo que seria importado se nenhum nome de membro específico fosse fornecido. Você também pode expressar que deseja importar o membro específico chamado MyNavbar, fazendo o seguinte: import {MyNavbar} de './comp/my-navbar.jsx'; neste caso, nenhum padrão é necessário

Empacotando componentes com chaves se não houver exportações padrão:

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

ou importar vários componentes do arquivo de módulo único

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

Para exportar um único componente no ES6, você pode usar export defaulto seguinte:

class MyClass extends Component {
 ...
}

export default MyClass;

E agora você usa a seguinte sintaxe para importar esse módulo:

import MyClass from './MyClass.react'

Se você estiver procurando exportar vários componentes de um único arquivo, a declaração terá a seguinte aparência:

export class MyClass1 extends Component {
 ...
}

export class MyClass2 extends Component {
 ...
}

E agora você pode usar a seguinte sintaxe para importar esses arquivos:

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

O MDN tem uma documentação muito boa para todas as novas maneiras de importar e exportar módulos é o ES 6 Import-MDN . Uma breve descrição dele em relação à sua pergunta, você poderia:

1. Declarou o componente que estavam exportando como o componente de 'default' que este módulo foi exportação: export default class MyNavbar extends React.Component {e assim, quando Importar o seu 'MyNavbar' você NÃO tem que colocar chaves em torno dele: import MyNavbar from './comp/my-navbar.jsx';. Não colocar chaves em torno de uma importação, no entanto, informa ao documento que este componente foi declarado como um 'padrão de exportação'. Se não fosse, você receberá um erro (como fez).

2. Se você não quisesse declarar seu 'MyNavbar' como uma exportação padrão ao exportá-lo export class MyNavbar extends React.Component {:, seria necessário agrupar a importação do 'MyNavbar entre chaves: import {MyNavbar} from './comp/my-navbar.jsx';

Eu acho que, como você só tinha um componente no arquivo './comp/my-navbar.jsx', é legal torná-lo a exportação padrão. Se você tivesse mais componentes como MyNavbar1, MyNavbar2, MyNavbar3, eu não os tornaria um padrão nem importaria os componentes selecionados de um módulo quando o módulo não declarasse nada padrão que você pode usar: import {foo, bar} from "my-module";where foo e bar são vários membros do seu módulo.

Definitivamente, leia o documento MDN, que tem bons exemplos para a sintaxe. Espero que isso ajude com um pouco mais de explicação para quem quer brincar com o ES 6 e a importação / exportação de componentes no React.

Espero que seja útil

Etapa 1: App.js é (módulo principal) importar o módulo de logon

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

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

export default App;

Etapa 2: Crie a pasta de logon e crie o arquivo login.js e personalize suas necessidades para renderizar automaticamente no App.js Exemplo 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;

Existem duas maneiras diferentes de importar componentes em reagir e a maneira recomendada é a maneira de componentes

1. Biblioteca (não recomendado)
2. Maneira do componente (recomendado)

Explicação detalhada do PFB

Biblioteca maneira de importar

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

Isso é agradável e prático, mas não apenas agrupa o Button e o FlatButton (e suas dependências), mas todas as bibliotecas.

Maneira componente de importação

Uma maneira de aliviá-lo é tentar importar ou exigir apenas o que é necessário, digamos o caminho do componente. Usando o mesmo exemplo:

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

Isso agrupará apenas o Button, FlatButton e suas respectivas dependências. Mas não a biblioteca inteira. Então, eu tentava me livrar de todas as importações da sua biblioteca e, em vez disso, usava o componente.

Se você não estiver usando muitos componentes, deverá reduzir consideravelmente o tamanho do seu arquivo compactado.