What is the difference between import * as react from 'react' vs import react from 'react'

Question

I am new to React or the coding background in general. And I am not sure what is the difference between the statements

import * as react from 'react' 

and

import react from 'react' 

Thanks in advance!

Answer 1

There are 3 types of most import commonly used imports.

Type 1

import * as A from 'abc'; 

This will import everything which is marked as export in abc. You can access them using below code.

A.Component  

Type 2

import {A} from 'abc'; 

This will import A from abc, containing something like this:

export const A = () => {}; 

Type 3

import A from 'abc'; 

This will import the default export from abc as A. The export can look like this:

const B = () => {}; // The name "B" is not exported, only the value.  export default B;  // at the end of component 

Answer 2

Pattern import * as React from 'react is related to the use of type systems in React like Flow or Typescript. Using import React from 'react' has led to issues with importing types definitions. For now in Typescript you can use allowSyntheticDefaultImports flag, which resolves this issue and imports all types even if you use import React from 'react'.