What is use of curly braces in an ES6 import statement?

Question

I can see there are two different ways to import:

import React from 'react'
import { render } from 'react-dom'

The second one has brackets. What is the difference between the two? And when should I add brackets?

Answer 1

First of all, a big thank you to all the other answers.

Here is a summary of all the above, in one answer.

Context with examples

import React from 'react';          // Importing without braces
import { render } from 'react-dom'; // Importing with braces

To be able to understand import, it's important to firstly understand export and its types.

Types of exports

There are mainly two types of exports, 'default' and 'named'. Whether to use braces or not, depends entirely on which type of exported variable is being imported.

So, the short answer is that variables exported as default, do not need braces, but named variables do need to be imported with braces.

Now, let's look at some practical examples of how to import and export both types.

Default: How to export and import

• exporting

// Module1.js
export default App;

// Module2.js
export default myVariable;

// Module3.js
export default myFunction;

// Please note that there can only be one default export per module!

• importing

import App from './Module1'
import AppRenamed from './Module1'

import myVariable from, './Module2'
import myFunction from './Module3'

// Please note that default modules can be renamed when importing
// ... and they will still work!

Named: How to export and import

• exporting

export const A = 42
export const myA = 43
export const Something = 44

export { cube, foo, graph };

// Note how there can be several named exports per module
// exported in groups or individually

• importing

import { A, myA } from './my-module.js';
import { Something as aRenamedVar } from './my-module.js';
import { cube } from './my-module.js';
import { foo, graph } from './my-module.js';

// Likewise, named exports can be imported in groups or individually

Other notes

• let's revisit the very first example we saw above

import React from 'react'
import { render } from 'react-dom'

• please note that although, React doesn't use braces, and render does, render is actually a part of react-dom.
• therefore it is also possible to import the entire default react-dom without braces and then use render

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render()

Answer 2

Curly braces are used to import single(specific) property, whereas the word without braces is import entire object form that file.

For example,

import React, { Component } from 'react';

Here the word React represents to import entire object from the file 'react'.

{Component} means we specify to import the particular property from the file.

Answer 3

Consider primitives.js,

export default (a, b) => a + b;
export const sub = (a, b) => a - b;
export const sqr = a => a**2;

It can be imported like this,

import sum, { sub, sqr } from './primitives';

In this case, sum is called a "Default Export" and a module may contain a single "Default Export" only.

sub and sqr are called "Named Export" and a module may contain multiple named exports.

Answer 4

There isn't any need to add brackets if you are exporting as default. You can have only default in the module.

Case 1:

export default function(num1, num2) {
    return num1 + num2; }

Case 2:

function sum(num1, num2) {
    return num1 + num2; }

export { sum as default };

Case 3:

function sum(num1, num2) {
    return num1 + num2; }

export default sum;

You can import the default

import sum from "./test.js";

console.log(sum(1, 2));

Answer 5

Well, the difference between whether you should import your components within brackets or without it lies in the way you export it.

There are two types of exports

1. Default Export
2. Named Export

A component can have one default export and zero or more named exports.

If a component is a default export then you need to import it without brackets.

E.g.,

export default App;

The import it as

import App from './path/to/App';

A named export could be like

export const A = 25;

or

export {MyComponent};

Then you can import it as

import {A} from './path/to/A';

or

import {A as SomeName} from './path/to/A';

If your component has one default export and few named exports, you can even mix them together while importing

import App, {A as SomeName} from './path/to/file';

Similarly in case of react and react-dom, React and ReactDOM are default exports respectively whereas, for instance Component is a named export in react and render is a named export in react-dom. That's the reason you can either do

import ReactDOM from 'react-dom';

and then use

ReactDOM.render()

or use it like mentioned in your question.