reactjs - Difference between let import React from 'react/addons' and import { PropTypes } from 'react/addons' -

what difference between two:

import react 'react/addons'; let {proptypes} = react; 

vs

import react, { proptypes } 'react/addons'; 

is there proper convention should follow?

often, compiling these es5 babel's repl great way understand what's going on.

import react 'react/addons'; let {proptypes} = react; 

becomes:

var _addons = require('react/addons');  var _addons2 = _interoprequiredefault(_addons);  function _interoprequiredefault(obj) { return obj && obj.__esmodule ? obj : { default: obj }; }  var proptypes = _addons2.default.proptypes; 

compared to:

import react, { proptypes } 'react/addons'; 

which becomes:

var _addons = require('react/addons');  var _addons2 = _interoprequiredefault(_addons);  function _interoprequiredefault(obj) { return obj && obj.__esmodule ? obj : { default: obj }; } 

the first 2 statements in each identical. import statements become calls require, there's runtime helper function extracts appropriate value inside module.

at point becomes interesting. example 1 makes use of object destructuring introduce proptypes new variable. babel introduces new variables references pointing towards appropriate properties.

var proptypes = _addons2.default.proptypes; 

so why line of code missing example 2? in fact, if check out code, you'll notice though looks should have proptypes variable in scope, there isn't one. bit of mystery?

further experiments

again, babel's repl can out here. let's see happens if write code uses proptypes , compile that.

import react, { proptypes } 'react/addons';  console.log(proptypes); 

which becomes:

var _addons = require('react/addons');  var _addons2 = _interoprequiredefault(_addons);  function _interoprequiredefault(obj) { return obj && obj.__esmodule ? obj : { default: obj }; }  console.log(_addons.proptypes); 

a few important things notice.

• it compiles references proptypes _addons.proptypes
• it's using _addons not _addons2 (unlike example 1)

this happens because { proptype } from syntax in example 2 not destructuring.

named imports

if follow in es2015 specification [15.2.2], we'll see syntax described namedimports.

namedimports :   { }   { importslist }   { importslist , } 

this syntax designed extracting named exports imported module.

for instance, if react/addons package published es6 module, have second syntax work.

export const proptypes = {   // prop types };  export default react; 

which compiles to:

object.defineproperty(exports, "__esmodule", {   value: true }); var proptypes = exports.proptypes = {};  // prop types exports.default = react; 

proptypes added named export exports object.

conclusion

import react 'react/addons'; let {proptypes} = react; 

this general destructuring syntax. works when exports.default value has proptypes field.

import react, { proptypes } 'react/addons'; 

this syntax accessing named exports. works when react/addons module exports named value proptypes , default value react.