Using Brackets with JavaScript Import Syntax

When should I use curly braces for ES6 import?

This is a default import:

// B.js
import A from './A'

It only works if A has the default export:

// A.js
export default 42

In this case it doesn’t matter what name you assign to it when importing:

// B.js
import A from './A'
import MyA from './A'
import Something from './A'

Because it will always resolve to whatever is the default export of A.

This is a named import called A:

import { A } from './A'

It only works if A contains a named export called A:

export const A = 42

In this case the name matters because you’re importing a specific thing by its export name:

// B.js
import { A } from './A'
import { myA } from './A' // Doesn't work!
import { Something } from './A' // Doesn't work!

To make these work, you would add a corresponding named export to A:

// A.js
export const A = 42
export const myA = 43
export const Something = 44

A module can only have one default export, but as many named exports as you'd like (zero, one, two, or many). You can import them all together:

// B.js
import A, { myA, Something } from './A'

Here, we import the default export as A, and named exports called myA and Something, respectively.

// A.js
export default 42
export const myA = 43
export const Something = 44

We can also assign them all different names when importing:

// B.js
import X, { myA as myX, Something as XSomething } from './A'

The default exports tend to be used for whatever you normally expect to get from the module. The named exports tend to be used for utilities that might be handy, but aren’t always necessary. However it is up to you to choose how to export things: for example, a module might have no default export at all.

This is a great guide to ES modules, explaining the difference between default and named exports.

using brackets with javascript import syntax

import React, { Component, PropTypes } from 'react';

This says:

Import the default export from 'react' under the name React and import the named exports Component and PropTypes under the same names.

This combines the two common syntaxes which you've probably seen

import React from 'react';
import { Component, PropTypes } from 'react';

The first being used to import and name the default export, the second to import the specified named exports.

As a general rule, most modules will either provide a single, default export, or a list of named exports. It is somewhat less usual for a module to provide both a default export and named exports. However, in the case where there is one feature which is most commonly imported, but also additional sub-features, it is a valid design to export the first as the default, and the remaining ones as named exports. It is in such cases you would use the import syntax you refer to.

The other answers are somewhere between wrong and confusing, possibly because the MDN documents at the time this question was asked were wrong and confusing. MDN showed the example

import name from "module-name";

and said name is the "name of the object that will receive the imported values." But that's misleading and incorrect; first of all, there is only one import value, which will be "received" (why not just say "assigned to", or "used to refer to") name, and the import value in this case is the default export from the module.

Another way of explaining this is to note that the above import is precisely identical to

import { default as name } from "module-name";

and the OP's example is precisely identical to

import { default as React, Component, PropTypes } from 'react';

The MDN documentation went on to show the example

import MyModule, {foo, bar} from "my-module.js";

and claimed that it means

Import an entire module's contents, with some also being explicitly named. This inserts myModule (sic), foo, and bar into the current scope. Note that foo and myModule.foo are the same, as are bar and myModule.bar

What MDN said here, and what other answers claim based on the incorrect MDN documentation, is absolutely wrong, and may be based on an earlier version of the spec. What this actually does is

Import the default module export and some explictly named exports. This inserts MyModule, foo, and bar into the current scope. The export names foo and bar are not accessible via MyModule, which is the default export, not some umbrella covering all exports.

(The default module export is the value exported with the export default syntax, which could also be export {foo as default}.)

The MDN documentation writers may have gotten confused with the following form:

import * as MyModule from 'my-module';

This imports all exports from my-module, and makes them accessible under names such as MyModule.name. The default export is also accessible as MyModule.default, since the default export is really nothing more than another named export with the name default. In this syntax, there is no way to import only a subset of the named exports, although one could import the default export, if there is one, together with all the named exports, with

import myModuleDefault, * as myModule from 'my-module';

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

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

Default Export
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;

export {MyComponent};

Then you can import it as

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

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.

Import with or without curly brackets in ES6

as given in developer.mozilla.org

It is possible to have a default export (whether it is an object, a
function, a class, etc.). The import statement may then be used to
import such defaults.

The simplest version directly imports the default:

import myDefault from '/modules/my-module.js';

References : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

When should I use brackets with imports

You can have only one export default per file and hence when you do export default like

export default AddTodo = (list, item) => [...list, item]

You can import it like

import MyAddTodo from './todoHelpers'

Since babel knows that you are trying to access the default component, you can access it in you file by any name

Now suppose you do

export const AddTodo = (list, item) => [...list, item]

You can have multiple such exports in you file like

export const AddTodo = (list, item) => [...list, item]  
export const DeleteTodo = (list, item) => [...list, item]

and when you import you will need to destructure them like

import {AddTodo, DeleteTodo} from './todoHelpers'

Now since you have multiple such exports thus babel wont know which component you are tyring to access if you access if by a different name like

import {MyAddTodo, MyDeleteTodo} from './todoHelpers'

If you want to do this you will have to import them as it is and them change thier name like

import {AddTodo as MyAddTodo, DeleteTodo as MyDeleteTodo} from './todoHelpers'

So as general practice you will default export the main component and the rest you can have as export normally or when you have only one component that you need to export from a file then you can choose whatever you want but a nice way will be to export it as default.

When do we use '{ }' in javascript imports?

import { elements, renderLoader } from './views/base'

is the way you need to import single, named exports from a module, in this case it is importing named exports elements and renderLoader from base.js.

The { elements, renderLoader } syntax is in many cases just syntactic sugar (called destructuring) added in recent versions of the ECMAScript standard.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring

In this case, though, it is necessary to get only the named exports you want.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_a_single_export_from_a_module

Please note that you can also pick new names for your variables like this:

import { elements as newNameForElements, renderLoader as newNameForRenderLoader } from './views/base'

which would then make the elements export available as newNameForElements etc.

What is the difference between with and without curly bracket notation in export/import statements?

ES6 offers many ways to manage modules through import/export. But there are basically two main strategies:

Default export/import with export default and import module from './module'
Multiple exports/imports with export and import {member} from './module' or import * as module from './module'

(Mixing both is possible but not recommended.)

Module to export/import

function foo() {
  console.log('Foo');
}

function bar() {
  console.log('Bar');
}

Strategy #1: Default export/import

Export (module.js)

function foo() {
  console.log('Foo');
}

function bar() {
  console.log('Bar');
}

export default {foo, bar};

/*
  {foo, bar} is just an ES6 object literal that could be written like so:

  export default {
    foo: foo,
    bar: bar
  };

  It is the legacy of the "Revealing Module pattern"...
*/

Import (main.js)

import module from './module';

module.foo(); // Foo
module.bar(); // Bar

Strategy #2: Multiple exports/imports