using brackets with javascript import syntax
import React, { Component, PropTypes } from 'react';
This says:
Import the default export from
'react'
under the nameReact
and import the named exportsComponent
andPropTypes
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
, andbar
into the current scope. Note thatfoo
andmyModule.foo
are the same, as arebar
andmyModule.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
, andbar
into the current scope. The export namesfoo
andbar
are not accessible viaMyModule
, 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';
import React, { Component, PropTypes } from 'react'
This will grab the exported { Component, PropTypes }
members from the 'react'
module and assign them to Component
and PropTypes
, respectively. React
will be equal to the module's default
export.
As noted by torazaburo below, this is the same as
import { default as React, Component, PropTypes } from 'react'
which is shorthand for
import { default as React, Component as Component, PropTypes as PropTypes} from 'react'
Here's another example (link to gist):
// myModule.js
export let a = true
export let b = 42
export let c = 'hello, world!'
// `d` is not exported alone
let d = 'some property only available from default'
// this uses the new object literal notation in es6
// {myVar} expands to { myVar : myVar }, provided myVar exists
// e.g., let test = 22; let o = {test}; `o` is then equal to { test : 22 }
export default { a, b, d }
// example1.js
import something from 'myModule'
console.log(something)
// this yields (note how `c` is not here):
/*
{
a : true,
b : 42,
d : 'some property only available from default'
}
*/
// example2.js
import something, { c } from 'myModule'
console.log(something) // same as above; the `default` export
console.log(c) // c === 'hello, world!'
// example3.js
import { a, b, d, default as something } from 'myModule'
console.log(a) // a === true
console.log(b) // b === 42
console.log(d) // d === undefined (we didn't export it individually)
console.log(something.d) // something.d === 'some property...'
I tested the second example with babel:
import test, test3, test2 from './app/lib/queries.js'
console.log(test, test3, test2)
and got a syntax error.
~/code/repo/tutoring $ babel-node test.js
/Users/royhowie/.node/lib/node_modules/babel/node_modules/babel-core/lib/babel/transformation/file/index.js:601
throw err;
^
SyntaxError: /Users/royhowie/code/repo/tutoring/test.js: Unexpected token (1:13)
> 1 | import test, test3, test2 from './app/lib/queries.js'
| ^
2 |
3 | console.log(test, test3, test2)
4 |
For reference, you can read up on the new import
documentation from MDN. However, it is apparently in need of technical review. Dr. Axel Rauschmayer's blog post is a better reference for now.