71

Say, we are using React with ES6. We import React and Component as

import React from 'react'
import { Component } from 'react'

Why the syntax difference? Can't we use as specified below?

import Component from 'react'
Prasad Surase
  • 6,486
  • 6
  • 39
  • 58
  • Also a duplicate of [When should I use curly braces for ES6 import?](http://stackoverflow.com/q/36795819/218196) – Felix Kling Jan 20 '17 at 17:38
  • 2
    When you are importing from React library you must import React like this `import React from 'react'` Because React is a default export. On the other hand, Component is put in curly braces because it is an optional one. Optional imports from the library are put in braces – Vinod Sobale Apr 18 '17 at 09:24

3 Answers3

106

Here are the docs for import.

import React from 'react'

The above is a default import. Default imports are exported with export default .... There can be only a single default export.

import { Component } from 'react'

But this is a member import (named import). Member imports are exported with export .... There can be many member exports.

You can import both by using this syntax:

import React, { Component } from 'react';

In JavaScript the default and named imports are split, so you can't import a named import like it was the default. The following, sets the name Component to the default export of the 'react' package (which is not going to be the same as React.Component:

import Component from 'react';
Davin Tryon
  • 66,517
  • 15
  • 143
  • 132
  • 2
    In line "import Component from 'react';", aren't you going to just call "Component" the default export of 'react'? In other words, Component is the React object, exported by default from 'react' module, not null. I mean, default export is not a named export, so the name doesn't matter. – Josmar May 03 '17 at 15:04
  • 2
    @Josmar yes, I see how I didn't express that very well. made an edit. :) – Davin Tryon May 03 '17 at 15:10
  • You forgot to mention that React doesn't have the default export so that code won't work unless you use a hacking Babel preset… – Michał Miszczyszyn Dec 20 '17 at 12:44
3

Component is a named export. e.g. Therefore, it must be destructured with {}.

React is a default export for React from 'react' is correct. e.g. export default React

D. Walsh
  • 1,963
  • 1
  • 21
  • 23
  • 3
    To clarify, there's no such thing as destructuring imports. Syntactically it's similar, but there are some interesting differences. Kent C Dodds [wrote an interesting post](https://medium.com/@kentcdodds/misunderstanding-es6-modules-upgrading-babel-tears-and-a-solution-ad2d5ab93ce0) on this – Scott Silvi Aug 31 '17 at 22:08
  • 2
    @ScottSilvi Looks like the link to the article is dead. – Adrian Theodorescu Mar 29 '19 at 20:47
  • 1
    What is a named export? – cheznead Sep 10 '20 at 17:55
3

If in any file you are exporting something by default with statement like export default React, then that can be imported like import React.

For other exports which are not default, we need to specify what we actually want to import by closing that in parentheses like import { Components}.

Prakash Sharma
  • 15,542
  • 6
  • 30
  • 37