What is the purpose of 'export' in React component declaration?

Question

In React (ES6), why do I sometimes see this?...

class Hello extends React.Component { ... }

and sometimes this?

Answer 1

Before explain the export keyword let me clear something to you.

---

As you have seen around the internet, in every react application you need to use two important things:

1/ Babel

2/ webpack or browserify

Explaination

What is Babel job?

You might heard of jsx and ES6.

Well, Babel job is Transpile the jsx to js and ES6 to ES5 so the browser can understand these two things.

And export keyword is a new feature in ES6 let export your functions, variables so you can get access to them in other js files.

ie:

hello.js

export default class Hello extends React.Component {
  render() {
    return <div>Hello</div>
  }
}

world.js

import { Hello } from './hello';

class World extends React.Component {
  render() {
    return <div><Hello /> world</div>; // jsx sytanx.
  }
}

What is webpack job?

Webpack is a module bundler. It takes in a bunch of assets (ie. hello.js, world.js and your modules (react, react-dom....)) and turns that into one single file.

i.e:

let say that we have the following config for webpack

// dont need to set hello.js as an entry because we already import it into world.js
module.exports = {

  entry: [
    './src/world.js'  
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  }
};

webpack it turn all of your js files and your modules wich imported and it turn it into onne single file bundle.js.

Edit: Solving the problem

In jsx,

always wrap the returned html into ().

...
render() {
  return (
    <div>
      <h1>Hello World (Main File this time)</h1>
      <External />
    </div>
  )
}
...

Answer 2

Exporting a value allows you to import it into another file.

If I export this class from the hello.js file:

// hello.js
export class Hello extends React.Component { ... }

Then I can import it and use it in the greeting.js file.

// greeting.js
import { Hello } from './hello';

export class Greeting extends React.Component {
  render() {
    return <Hello />;
  }
}

This isn't specific to React and you can use this syntax to import and export any kinds of values in any kinds of JavaScript applications.

After you use a tool like Babel to turn this into code that can run in a browser, then you can use a tool like Webpack to bundle all the modules you have used into a single script file that you can serve for the browser.

This module syntax for importing and exporting also provides a useful shorthand for modules that export a "default" value.

// hello.js
export default class Hello extends React.Component { ... }

// greeting.js
import Hello from './hello';

Generally you'd want to use this form if your module only exports one value.