October 2019 – Be Hai Nguyen

I’ve been using JavaScript at work for a fair while, but we’ve never used export and import. Learning React, I’ve found myself quite confused between import { Something } from ‘./Something’ and import Something from ‘./Something’; that is with and without curly braces {}. This post is my attempt to clear my confusion and get a grip on this export and import business.

According to this documentation https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export, there’re basically two types of exports: named exports and default exports.

Taken from the above document, named-exports.js illustrates named exports:

function cube(x) {
  return x * x * x;
}

const foo = Math.PI + Math.SQRT2;

var graph = {
  options: {
      color:'white',
      thickness:'2px'
  },
  draw: function() {
      console.log('From graph draw function');
  }
}

export { cube, foo, graph };

With named exports, there can be several exports per module.

default-export.js illustrates default exports:

export default function add(a, b) {
  return a + b;
}

With default exports, there can only be a single default export per module.

test-import.htm shows how to call exports in named-exports.js and default-export.js. For each module, it demonstrates a correct import and an incorrect import, which is marked with // ERROR!:

<!doctype html>
<html lang="en">
<head>
  <!-- http://localhost/f/Js/ExportImport/test-import.htm -->
  
    import { cube, foo, graph } from './named-exports.js';

    console.log( 'cube(3)', cube(3) );
    console.log( 'foo', foo );
    console.log( 'graph', graph );
  
  
  
    // ERROR!
    import cube, foo, graph from './named-exports.js';

    console.log( 'cube(3)', cube(3) );
    console.log( 'foo', foo );
    console.log( 'graph', graph );
  

  
    import add from './default-export.js';

    console.log( 'add(3, 5)', add(3, 5) );
  

  
    // ERROR! 
    import add from './default-export.js';

    console.log( 'add(3, 5)', add(3, 5) );
  
</head>

<body>
</body>

</html>

The following should be obvious:

{} must be used to import named exports.
default exports does not require {}.

Following is the result of test-import.htm:

As noted by the above document: Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object. But a default export can be imported with any name.

In other words, cube, foo and graph must always be imported as import { cube, foo, graph } from ‘./named-exports.js’;. While add can be imported with any name, i.e. import addFunction from ‘./default-export.js’;; in which case it must be called as addFunction(3, 5);

React follows a similar principle. Consider the following example:

NamedExport.js

import React from 'react';

export class NamedExport extends React.Component {
  render() {
    return (
    	<div>NamedExport component</div>
    );
  }
};

DefaultExport.js

import React from 'react';

class DefaultExport extends React.Component {
  render() {
    return (
    	<div>DefaultExport component</div>
    );
  }
};

export default DefaultExport;

App.js

import React from 'react';
import './App.css';
import { NamedExport } from './NamedExport';
import DefaultExport from './DefaultExport';

function App() {
  return (
    <div className="App">
    	<NamedExport/>
    	<DefaultExport/>
    </div>
  );
}

export default App;

Again, DefaultExport can be imported with any name, for example: import DefaultExportComponent from ‘./DefaultExport’;, then it must be called as <DefaultExportComponent/>.

Thank you for reading… I hope you find this article useful 😄.

Month: October 2019

Curly braces ES6 import { myFunction, myComponent }: named exports and default export.