importing and exporting in JS

1.md

Import/Export

JS

To export a single component in ES6, you can use export default as follows:

class MyClass extends Component {
 ...
}

export default MyClass;

And now you use the following syntax to import that module:

import MyClass from './MyClass.react'

If you are looking to export multiple components from a single file the declaration would look something like this:

export class MyClass1 extends Component {
 ...
}

export class MyClass2 extends Component {
 ...
}

And now you can use the following syntax to import those files:

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

2.md

Exporting two components with a default

export default class App extends React.Component {
  render() {
    return (
      <div>
        <ul>
          <li>Home</li>
        </ul>
        {this.props.children}
      </div>
    );
  }
}

export class Home extends React.Component {

  render() {
    return (
      <div>
        <h1>Home...</h1>
      </div>
    )
  }
}

Importing those components

import App, {Home} from './Component.jsx';