Named import in React

Question

In this line:

import React, { Component } from "react";

why the braces are only around Component and not also on 'React'?

Prisilla

Because your after React.Component, by object destructuring React – Landloper

React will be the default export from the package. Component will be a named export which will be a property of the exports object, and you can use ES6 destructuring to get at it. – Cornetist

Possible duplicate of When should I use curly braces for ES6 import? – Incendiary

Answer 1

Here's a great answer that explains default and named imports in ES6

Let's say we have a class named Foo that I want to import. If I want to get the default export, I would do:

import Foo from './foo.js';

If I wanted a specific function inside the foo file, I would use the curly braces.

import { fooFunction } from './foo.js';

Note, this isn't a React feature, but ES6. Likely you are using babel to transpile your code from ES6 to ES5.

Incendiary

It would be better for you to summarise that in case that article is ever removed. – Cornetist

Yep. I linked to the stack answer instead. Also included the short description. Thanks! – Incendiary

Answer 2

To create something similar in react. Lets take this following example.

someobject.js

const someobject = {
   somefunc1: ()=>console.log("hello 1"),
   somefunc2: ()=>console.log("hello 2")
}

export default someobject;

app.js

import someobject, { somefunc1, somefunc2 } from "./someobject";

someobject.somefunc1(); //hello 1
someobject.somefunc2(); //hello 2
somefunc1(); //hello 1
somefunc2(); //hello 2

export defaul

Saragossa

Answer 3

In the React module the default export is the React object and it also has a named export Component¹, something like this:

// assuming React and Component are predefined
export default React
export Component

Coincidentally Component is also available on the React object, so it is not necessary to import separately, although some people prefer your approach. For example this is possible:

// MyComponent.js
import React from 'react'

class MyComponent extends React.Component {}

More information about ES6 module syntax can be found here.

¹ Note that actually the React library does not have a named export Component as in the example above, however Component is a property on the default export and so due to the way that ES6 packages are transpiled by Babel, this becomes a named export, the behaviour then being as in the example above.

Micromho

Answer 4

Import react will import the default react package, Component with braces then specifies a particular element of the React package. React by default will not need braces as it is the default import package.

import React, { Component } from "react";

Hope this helps

Vandusen

I don't think "child of the package" is the right phrasing. – Cornetist

Answer 5

That is because the default export module in the react library is React, and there can be only one default export, even though you can export many other components, but only one can be default. Other components of the React library can then be destructured.

Clarke

Answer 6

React is a module containing different methods, When using just React word, you import the whole module, so you can use React.Component (in this case dot notation reference to a method inside the module).

So if you need to import method? you will use braces, why? because you import method between many methods in one module, So it's able to increase & decrease, so you can import {a, b, c, r, w, q} that's methods inside one class or one module, So you can see that if you using

import {Component} from 'react';

Now you can use Component word direct without dot reference like react.component.

So React module is exported by default, Here I need all the React module and I will use it with all methods, {Component} here exported by name, I need specific method from React library not all react library

and please check it too When should I use curly braces for ES6 import?

Sweettalk

Answer 7

in the import import React, { Component } from "react"; we put the Component in braces because it is not the default export. however React is,... look at the following example

import React from "react";

export const Fun1 = () => {
  return (
    <React.Fragment>
      <h1>this is fun 1</h1>
    </React.Fragment>
  );
 };

 export const Fun2 = () => {
  return (
    <React.Fragment>
      <h1>this is fun 2</h1>
    </React.Fragment>
  );
 };

 const Fun3 = () => {
   return (
     <React.Fragment>
       <h1>this is fun 3</h1>
     </React.Fragment>
   );
  };

 export default Fun3;

if we save the above file under example.js we can import the components in exmpample.js file as

import Fun3, {Fun1, Fun2} from "example";

therefore Fun3 is the default export and the other components Fun1 and Fun2 are not

Lederhosen