CODEWITHSUNDEEP
javascriptreactjs
user9504869
user9504869

Reputation:

React: Understanding import statement

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?

Upvotes: 7

Views: 2331

Answers (6)

Ikram Ud Daula
Ikram Ud Daula

Reputation: 1321

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

Upvotes: 2

João Belo
João Belo

Reputation: 1570

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 }

Upvotes: 4

trixn
trixn

Reputation: 16309

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

Upvotes: 4

Aaqib
Aaqib

Reputation: 10350

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.

Upvotes: 0

Sreekanth
Sreekanth

Reputation: 3130

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

Upvotes: 0

Devin Fields
Devin Fields

Reputation: 2544

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.

Upvotes: 1

Related Questions