In the react documentation I found this way to import PureRenderMixin
var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
How can it be rewritten in ES6 style. The only thing I can do is:
import addons from "react/addons";
let PureRenderMixin = addons.addons.PureRenderMixin;
I hope there is a better way.
Unfortunately import statements does not work like object destructuring. Curly braces here mean that you want to import token with this name but not property of default export. Look at this pairs of import/export:
//module.js
export default 'A';
export var B = 'B';
//script.js
import A from './a.js'; //import value on default export
import {B} from './a.js'; // import value by its name
console.log(A, B); // 'A', 'B'
For your case you can import whole object and make a destructuring assignment
import addons from "react/addons";
let {addons: {PureRenderMixin}} = addons;
import PureRenderMixin from 'react-addons-pure-render-mixin';
See example here.
Related
When creating a React app there's the common:
import React, {Component} from 'react';
import statement. I'm curious why the line requires a comma? I've tried looking this up and cannot find an explanation.
Foo.js
export const bar = "bar";
export default "baz";
or:
export const bar = "bar";
const baz = "baz";
export default baz;
bar is a named export and must be imported with {}.
baz is the default export and can be imported with any name without {}.
import baz, { bar } from "Foo";
console.log( baz, bar );
or
import bazButIwantFizz, { bar } from "Foo";
console.log( bazButIwantFizz, bar );
or
import bazButIwantFizz, { bar as barButIWantBuzz };
console.log( bazButIwantFizz, barButIWantBuzz );
So, we can import named and default exports separating with a comma.
As suggested in the comments, refer to the related documentation.
The React is the default export from 'react'.
After the comma comes a list of other exports from 'react'.
As mentioned in the MDN docs the syntax for an import statement can look like this:
import defaultExport, { export [ , [...] ] } from "module-name";
You must be using JSX (html syntax) in the file, which requires React as an import dependency, exported as default from 'react' module.
Then you import Component as a named import, denoted in JS within {}. There are other things like {Fragment, createElement} that you can do if required.
Refer MDN for more.
As #Derek said in the comment above. This is one possible syntax for import.
link shamelessly stolen from #Derek
What is the difference between these two statements
import React from 'react';
and
import React, { Component } from 'react';
Shouldn't import React from 'react' import everything including the content? What should I read to understand this?
You can read about this here.
Importing something without curly braces imports whatever was defined as the default export in the module from which you are importing. There can only be exactly one (or no) default export in a module.
foo.js:
const myObject = {foo: 'bar'};
export default myObject;
bar.js:
import theObject from './foo';
console.log(theObject);
// prints {foo: 'bar'}
// note that default exports are not named and can be imported with another name
Importing with curly braces imports what was exported as a named export with that name by the module. There can be multiple named exports in a module.
foo.js:
export const myObject = {foo: 'bar'};
export const anotherObject = {bar: 'baz'};
bar.js:
import {myObject, anotherObject, theObject} from './foo';
console.log(myObject);
// prints {foo: 'bar'}
console.log(anotherObject);
// prints {bar: 'baz'}
console.log(theObject);
// prints undefined
// because nothing named "theObject" was exported from foo.js
With
import React, { Component } from 'react';
you can do
class Menu extends Component { /* ... */ }
instead of
class Menu extends React.Component { /* ... */ }
from this: Import React vs React, { Component }
This is the ES6.
import Raect, { Component } from 'react';
Like
import default_export, { named_export } from 'react';
Consider two file. Person.js like
const person = {
name: 'johon doe'
}
export default person; // default export
Utility.js like
export const clean = () => { ... } //named export using const keyword
export const baseData = 10; //named export using const keyword
inport in App.js file. like
import person from './Person';
import prs from './Person';
import {clean} from './Utility';
import {baseData} from './Utility';
import {data as baseData} from './Utility';
import {* as bundled} from './Utility';
//bundled.baseData
//bundled.clean
João Belo posted a great answer to read, but I'll add one more thing. the second instance is using destructuring and object-shorthand to grab the 'Component' property's value from the react module and assign it to a 'Component' variable that you can use locally. If you don't know about destructuring and object-shorthand, you should definitely look them up. They come in handy.
Primarily, this boils down to the way you export variables. I believe, this must be a deliberate design decision from Facebook contributors.
export default class ReactExample {}
export class ComponentExample {}
export class ComponentExampleTwo {}
in the above example, ReactExample can be imported without using {}, where as the ComponentExample, ComponentExampleTwo , you have to import using {} statements.
The best way to understand is going through the source code.
React export source code
React Component source code
import * as myCode from './../../myCode';
This inserts myCode into the current scope, containing all the exports from the module in the file located in ./../../myCode.
import React, { Component } from 'react';
class myComponent extends Component { ... }
By Using above syntax your bundler ( e.g : webpack) will still bundle the ENTIRE dependency but since the Component module is imported in such a way using { } into the namespace, we can just reference it with Componentinstead of React.Component.
For more information you can read mozilla ES6 module docs.
I'm a newbie on server side javascript, I've used nodejs before for simple things, but only the default libraries (where I never ever need to use require or import keywords), but lately I'm learning ReactNative/ReactXP I've seen:
import RX = require('reactxp');
const popsicle = require('popsicle');
import LoginPage = require("./LoginPage");
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
import AppState from './AppState';
And exports:
export default Resources; // Resources is an object
export = LoginPage; // LoginPage is a class
The question is, what's the difference between combination of const-require, import-require and import-from? also what is export= it seems not on the Mozilla's doc?
import RX = require('reactxp');
import LoginPage = require("./LoginPage");
export = LoginPage; // LoginPage is a class
These 3 are typescript modules import/export syntax.
const popsicle = require('popsicle');
This is the nodejs modules require.
The rest
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
import AppState from './AppState';
export default Resources; // Resources is an object
are ES2015 modules (import export).
It's not that you can compare them: they are just import/export for different environments.
It's not basically differences : -
const is new in ES5. Before you had to create it explicitly or by using iffy.
import is new in ES6, which is just a replacement of require (which depended on common js module).
Export is also a feature of ES6, which lets you to use the module or object/var in other file.
So, It is just the new convention & nothing. And now by default in Javascript after ES6.
Also, {} lets you directly expose the modules/object properties, It's also new feature in ES6. E.g : -
Let's you have an object & in file obj.js:
export let objj1 = {
a : function () {},
b : function () {},
}
So Basically there are two ways to use that
1.
let obj = require('obj');
a = obj.a or b = obj.b;
OR
import {a, b} from 'obj'
So now you can direct acess the a & b properties.
import utilityRemove from 'lodash/array/remove';
import utilityAssign from 'lodash/object/assign';
import utilityRandom from 'lodash/number/random';
import utilityFind from 'lodash/collection/find';
import utilityWhere from 'lodash/collection/where';
let util;
util = {};
util.remove = utilityRemove;
util.assign = utilityAssign;
util.random = utilityRandom;
util.find = utilityFind;
util.where = utilityWhere;
Is there a better way to do the above using ES6 module system?
If these are the only symbols in your module, I would shorten the names and use the new object shorthand to do:
import remove from 'lodash/array/remove';
import assign from 'lodash/object/assign';
import random from 'lodash/number/random';
import find from 'lodash/collection/find';
import where from 'lodash/collection/where';
let util = {
remove,
assign,
random,
find,
where
};
If that could cause conflicts, you might consider moving this section to its own module. Being able to replace the lodash methods while testing could potentially be useful.
Since each symbol comes from a different module, you can't combine the imports, unless lodash provides a combined import module for that purpose.
If you're simply exporting a symbol without using it, you can also consider this syntax:
export remove from 'lodash/array/remove';
export assign from 'lodash/object/assign';
Which, to anyone importing and using your module, will appear as:
import {remove, assign} from 'your-module';
You can do this in a utils module:
//utils.js
export remove from 'lodash/array/remove';
export assign from 'lodash/object/assign';
export random from 'lodash/number/random';
export find from 'lodash/collection/find';
export where from 'lodash/collection/where';
and use it like this:
import * as util from './utils';
...
util.random();
import utilityRemove from 'lodash/array/remove';
import utilityAssign from 'lodash/object/assign';
import utilityRandom from 'lodash/number/random';
import utilityFind from 'lodash/collection/find';
import utilityWhere from 'lodash/collection/where';
let util;
util = {};
util.remove = utilityRemove;
util.assign = utilityAssign;
util.random = utilityRandom;
util.find = utilityFind;
util.where = utilityWhere;
Is there a better way to do the above using ES6 module system?
If these are the only symbols in your module, I would shorten the names and use the new object shorthand to do:
import remove from 'lodash/array/remove';
import assign from 'lodash/object/assign';
import random from 'lodash/number/random';
import find from 'lodash/collection/find';
import where from 'lodash/collection/where';
let util = {
remove,
assign,
random,
find,
where
};
If that could cause conflicts, you might consider moving this section to its own module. Being able to replace the lodash methods while testing could potentially be useful.
Since each symbol comes from a different module, you can't combine the imports, unless lodash provides a combined import module for that purpose.
If you're simply exporting a symbol without using it, you can also consider this syntax:
export remove from 'lodash/array/remove';
export assign from 'lodash/object/assign';
Which, to anyone importing and using your module, will appear as:
import {remove, assign} from 'your-module';
You can do this in a utils module:
//utils.js
export remove from 'lodash/array/remove';
export assign from 'lodash/object/assign';
export random from 'lodash/number/random';
export find from 'lodash/collection/find';
export where from 'lodash/collection/where';
and use it like this:
import * as util from './utils';
...
util.random();