[reactjs] React + ES6 + 웹팩을 사용하여 컴포넌트를 가져오고 내보내는 방법은 무엇입니까?

나는 Reactand를 ES6사용 babel하고 webpack있습니다. 다른 파일로 여러 구성 요소를 만들고 단일 파일로 가져 와서 번들로 묶고 싶습니다.webpack

다음과 같은 몇 가지 구성 요소가 있다고 가정 해 보겠습니다.

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

webpack을 사용하고 튜토리얼을 따르면 다음과 같습니다 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`.

내가 뭘 잘못하고 있죠? 구성 요소를 올바르게 가져오고 내보내려면 어떻게해야합니까?

답변

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

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

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

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'

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

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

export default App;

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;

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

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