using brackets with javascript import syntax

Question

I came across a javascript library that uses the following syntax to import libraries:

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

Answer 1

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.