There are multiple way to import modules. What is the difference between import {House} and import House?
There are two way to import in ES6 module, based on the export option.
Named Import
//filename - simple.js
export function Simple() {}
import {Simple} from "./simple.js"
Default Import
//filename - simple.js
export default Class Simple {}
import Simple from "./simple.js"
For more, refer https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
UPDATE
You can also export both from a single file and import them. Important caveat here is there can be only one default export in a module.
//filename - simple.js
export function Simple1() {}
export default function Simple2() { }
import Simple2, { Simple1 } from "./simple.js"
The syntax import {House} is used to import specific, named imports like import {foo, bar} from '/modules/my-module.js';
while the syntax import House is used to import default exports like import myDefault from '/modules/my-module.js';
As one can see that we can mix these two. For example, this is also a valid import
import myDefault, {foo, bar} from '/modules/my-module.js';
to read more checkout Mozilla developer guide.
Related
I was looking at some source code of a library and I saw this import
import {SheetsRegistry, JssProvider, withStyles} from '.'
What does this do? How does it import from '.' ?
The code you shared imports those declarations from index.js in the same directory.
index.js:
// #flow
import withStyles from './withStyles'
export {ThemeProvider, withTheme, createTheming, useTheme} from 'theming'
export {default as createUseStyles} from './createUseStyles'
export {default as JssProvider} from './JssProvider'
export {default as jss} from './jss'
export {SheetsRegistry, createGenerateId} from 'jss'
export {default as JssContext} from './JssContext'
export {default as styled} from './styled'
export {default as jsx, create as createJsx} from './jsx'
export {withStyles}
// Kept for backwards compatibility.
export default withStyles
In this example, index.js is being used to re-export some of the declarations within the src directory. This pattern makes it easier to move the declarations around without having to rewrite many imports.
******The difference between named exports and default exports.******
1-named exports
export function, constant, variable...etc in Constant.js
export const CREATE = 'CREATE';
export const DELETE = 'DELETE';
import like this in index.js
import {CREATE,DELETE} from './Constants';
2-default exports
export it in Constant.js
const update = ()=> 'UPDATE'
export default update();
and import like this in index.js
import UPDATE from './Constants';
I am new in js and react,so:
i try to export js function:
App.js:
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { render } from 'react-dom';
import { LazyLog } from 'react-lazylog';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Dropdown } from 'react-bootstrap';
import {ApiRequests} from './ApiRequests'
var textConst="";
var lines=ApiRequests.GetMockLogLines();
textConst=lines;
And ApiRequests.js:
export function GetMockLogLines()
{
let logs=[""]
return logs;
}
So, when i compile js (o, my God) it breaks me:
Attempted import error: 'ApiRequests' is not exported from './ApiRequests'.
When i change it to :
import ApiRequests from './ApiRequests'
->
Attempted import error: './ApiRequests' does not contain a default export (imported as 'ApiRequests').
So, i just want to get function from another file. What i do wrong?
And what difference between {} and without it? (you can send me a link start to read,pls).
There is no function named Apirequests in your file. The function you are exporting is GetMockLogLines()
So your import should be
import {GetMockLogLines} from './ApiRequests'
As for the importing difference betweent {} and without the curly braces is how you are exporting your stuff from your file. There are two types of exports - Default export and named exports. One can have only one default export per file and it has to be imported without the curly braces.
You can read more here - https://medium.com/#etherealm/named-export-vs-default-export-in-es6-affb483a0910
you need to import GetMockLogLines directly as it is a named import.
change your code to the following.
import { GetMockLogLines } from './ApiRequests'
var lines=GetMockLogLines();
I would like to import a default exported store with an alias using the syntax import XXX as A from YYY.
I know it works with this set up:
class XXX extends Reflux.Store{...}
export XXX;
//In another class you import:
import {XXX as ABC} from YYY;
That works great, but using that syntax with export default no longer works.
export default class XXX extends Reflux.Store{...}
//In another class you import:
import {XXX as ABC} from YYY;
But I know that if you export default you can't use {} syntax. Problem is that to use import as you need {}.
Any ideas?
All you need to do is import it with the name you want to use it with. There is no need to use the same name that was given to the module exported by default, you can use any name to import it
import ABC from 'YYY'; // syntax for default import
which is the short for
import { default as ABC } from 'YYY'
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.
In ES6, is it possible to shorten the following code. I have an App.js file and an index.js.
index.js
import App from './App';
export default App;
Something like this
index.js
export default App from './App.js'
If you use proposal-export-default-from Babel plugin (which is a part of stage-1 preset), you'll be able to re-export default using the following code:
export default from "./App.js"
For more information see the ECMAScript proposal.
Another way (without this plugin) is:
export { default as App } from "./App.js"
The above is a very common practice when separate files, each with its own export, have all something in common, for example, utils, so if, for example, one would want to import 3 utility functions, instead of having to write multiple imports:
import util_a from 'utils/util_a'
import util_b from 'utils/util_b'
import util_c from 'utils/util_c'
One could import any of the utilities in a single-line:
import { util_a, util_b , util_c } from 'utils'
By creating an index.js file in the /utils folder and import all the defaults of all the utilities there and re-export, so the index file will serve as the "gateway" for all imports related to that folder.
This is a bit of repetition from the previous answers, but to clarify the difference in two options:
1. Default export
(This appears to be what OP wants)
// index.ts
export { default } from './App'
Then, in a different file:
import App from './index'
2. Named export
export { default as App } from './App'
Then, in another file:
import { App } from './index'
Bonus: named → default export
If ./App uses a named export, but you want to re-export it as a default export, you can do that too:
export { App as default } from './App'
Then, in another file:
import App from './index'
These will work with react as vsync's answer states.
Bonus #2: export everything
Say you have a file that exports multiple items:
// App.ts
export const first = 1
export const second = 2
const final = 3
export default final
You can then re-export them directly:
// index.ts
export * from './App'
You can now import these easily:
import final, { first, second } from './index'
Bonus #3: * import
You can import all variables exported by another file as a single variable.
// index.ts
import * as App from './App'
App.first === 1 // true
import App from './App';
export default App;
⬇
Babel 7 (with #babel/preset-react) can transform the below:
export { default as App } from './App.js';
Related discussions:
TC39 proposal:
https://github.com/tc39/proposal-export-default-from#common-concerns
The only working solution is :
import App from './App';
export default App;
If you export your module like this
export { default as App } from './App.js';
Then it's not a default export anymore and you'll get an error if you try to import it as a default import.
import App from './App';
export default (App);
This work for me in default 'create-react-app' application