This question already has answers here:
using brackets with javascript import syntax
(2 answers)
Closed 6 years ago.
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'
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';
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
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}.
Related
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!
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
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'.
In general, for ES2015 (ES6) modules
import * as name from 'module';
is a namepace import that indicates that all exported objects are to be placed in the name namespace. You can then do:
name.blabla1
name.blabla2
etc ...
The namespace is not callable. So you cannot do:
name();
While:
import name from 'module';
is a default import that is equivalent to:
import {default as name} from 'module';
You're importing only the default object from the module.
In the case of React, the confusion maybe/probably arises from the fact that React's default export is ... React (Babel adds the default export for interoperability reasons). Strictly speaking, the syntax to use is:
import * as React from 'react';
or
import {Whatever} from 'react';
The following work only because of the transformation by Babel (not 100% sure):
import React from 'react';
import React, { Whatever } from 'react';
For those using TypeScript, prior to version 2.7, the default was to treat:
import * as name from 'module';
as being equivalent to:
const name = require('module');
and:
import name from 'module';
as being equivalent to:
const name = require('module').default;
Since version 2.7, if your compiler settings specify "esModuleInterop" to true (which is recommended), then you can use the ES2015 syntax behavior.
I am trying to import Dashboard from LoginPage component.
I tried
import Dashboard from './scenes/Dashboard
import Dashboard from './Dashboard
import Dashboard from '../../Dashboard
but they all didn't work.
What is the correct way to import it?
If the component name is 'DashboardComponent' exported using export default, you can import by,
import DashboardComponent from '../Dashboard/DashboardComponent'
if it is not default export, it can be imported using {} as,
import {DashboardComponent} from '../Dashboard/DashboardComponent'
I am going through some react code, can any one please let me know what does default as React in below code does.
import {
default as React,
Component,
PropTypes,
} from "react";
Thanks,
Guru
what is default in react import?
Default in that context is the entire React library. It is unnecessary in this case and could be shortened to import React, { Component } from 'react'
Another thing to note, is that proptypes have been moved to their own package now.
That's the same as:
import React, { Component, Proptype } from 'react';
obs: Since react v15.5 React.PropTypes has moved into a different package
I just got in a project on React Native, where I constantly see classes extending both React.Component and Component itself.
Examples:
class SomeView extends React.Component
or
class OtherView extends Component
in both of them we are importing React, {Component} from React
Is there any actual difference, if so, which one? Didn't found any info on the web. Cheers!
Well you can do whatever you want really.
Doing import { Component } from 'react' is effectively the same thing as React.Component.
The import { Component } from 'react' syntax is called a Named Import
The import statement is used to import bindings which are exported by another module.
import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
import {Component} from 'react';
This is called named module import.
The module to import from. This is often a relative or absolute path name to the .js file containing the module, excluding the .js extension. Certain bundlers may permit or require the use of the extension; check your environment. Only single quotes and double quotes Strings are allowed.
This question already has answers here:
using brackets with javascript import syntax
(2 answers)
Closed 6 years ago.
PropTypes is encapsulated in React object in React source code so how this statement is working-
import {PropTypes} from 'react';
Modules can export parts of code as default and named exports.
For example, the react library might have something like this
// named export
export function PropTypes(){/*....*/}
// defaul export
export default function(){/*....*/}
So while importing we can import default exports simply as
import React from 'module';
To import named exports we should use curly braces
import {PropTypes} from 'module';
simply we merge the above lines of code
import React, { PropTypes } from 'module'
Read more about modules here