Difference between import React and import { Component } syntax [duplicate]

Question

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' 

Answer 1

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'; 

Answer 2

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