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.
Related
I am new to React nad I want to export a component but I get a error with 'withTranslation'
a summary of my code (version:"i18next": "^17.0.6","react-i18next": "^9.0.10",):
import React, {Component} from 'react';
import { translate } from 'react-i18next';
//version: "i18next": "^17.0.6","react-i18next": "^9.0.10",
//..........
//.............
class FromAlumno extends Component {
//................
//.....................
}
export default withTranslation("translation")(FromAlumno);
The problem is not the exporting in your component, the problem is that you haven't imported withTranslation from react-i18next. Just switch your import to this:
import { withTranslation } from 'react-i18next';
I would recommend reading the documentation for react-i18next before posting here too.
https://react.i18next.com/latest/withtranslation-hoc
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.
So I started to integrate the react dnd library into my application, and the first thing I tried to do is add the DragDropContext with the Html5 backend.
When I add the attribute to the class I get this error:
Uncaught Error: Expected the backend to be a function or an ES6 module
exporting a default function.
import React from 'react';
import Link from 'react-router-dom';
import { connect } from 'react-redux';
import { DragDropContext } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import PropTypes from 'prop-types';
#DragDropContext(HTML5Backend)
class UserHowView extends React.Component {
...
..
}
const mapStateToProps = state => ({
...
});
export default connect(mapStateToProps)(userShowView);
What am I doing wrong so far?
One of the examples for the library has this:
#DragDropContext(HTML5Backend)
export default class Container extends Component {
But my definition and export are separate.
This library has a breaking change since v11.0.0 breaking changes:
from
import HTML5Backend from 'react-dnd-html5-backend
to
import { HTML5Backend } from 'react-dnd-html5-backend
If you are still encountering the issue, please check this issue in repo
and make sure you're not including DragDropContext in your render function
Remove the braces from the HTML5Backend import statement. Replace with the following:
import HTML5Backend from 'react-dnd-html5-backend';
This has resolved the issue for me.
I thought the line:
import { FETCH_WEATHER } from "../actions/index";
means: we don't import the whole object, but import the obj.FETCH_WEATHER from the file ../actions/index.js
One example is, we use
import React, { Component } from "react";
And it is like, we import from "react", let's call it here as obj, and name it React in our own file, and obj.Component, we name it as Component in our own file.
(1) is that true?
(2) in the file ../actions/index.js, the content is actually:
export const FETCH_WEATHER = "FETCH_WEATHER";
so there is no object, and no key / value pair to speak of. So what does import { FETCH_WEATHER } mean?
Mozilla Developer Network has a really good documentation on imports in ES6:
import – JavaScript | MDN
Basically the imports within the curly brackets are named imports, and must match a named export from the library you're importing from. That can be any object / function / constant that is exported.
Using import without curly brackets imports the default variable / object / function from the library. The default export has default keyword as part of the export statement: export default someVariable
The module may export one default object and many named items.
It is default module export:
const MyClass = (props) => (
<div/>
)
export default MyClass
We can import it like this:
import MyClass from "../actions"
The curly braces allows to export named items, so if we have such exports:
const myConst = "The Text"
const myHelper = (num) => 2*num
export default MyClass
export {myHelper, myConst}
We can import its like this:
import MyClass, {myHelper, myConst} from "../actions"
There is not need to add index at path - it is add by default. So write "../actions" enough instead of "../actions/index"
In React, Curly Braces are used to import single(specific) property, whereas
the word without braces is import entire object form that file.
Eg.,
import React, { Component } from 'react';
Here the word React represents to import entire object from the file 'react'
{Component} means we specify to import the particular property from the file.
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}.