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
Related
I'm trying to use emotion in my create-react-app, but getting errors when using the macro method explained here.
I just tried copying over the import code in a component like this:
import React from "react";
import styled from "react-emotion/macro";
import { css, keyframes, injectGlobal, flush, hydrate } from "emotion/macro";
import css from "#emotion/css/macro";
import styled from "#emotion/styled/macro";
function Registration(props) {
return;
}
export default Registration;
The first error I get is Parsing error: Identifier 'css' has already been declared. So I commented out the import css and import styled lines to see if it would return anything else. This gave me the error Cannot find module 'react-emotion/macro' from ....
What step am I missing? Or is there another way that I should be including emotion in the app?
Answering my own question in case anyone has the same problem. With v10 of emotion and create-react-app (I believe greater than v2), react-emotion is not required. Also, I didn't need styled, so with the following it works:
import React from "react";
import css from "#emotion/css/macro";
function Registration(props) {
return
}
export default Registration;
I'm asking myself if the React.memo is exactly the same as recompose pure() ...
import { pure } from 'recompose';
export default pure(MyComp);
or
import React, { memo } from 'react';
export default memo(MyComp);
Any thoughts?
According to the React documentation.
React.memo is a higher order component. It’s similar to React.PureComponent but for function components instead of classes.
So they are not exactly the same, but they serve the same purpose.
I am trying to implement hooks into a React (^16.6.0) application using TypeScript
import * as React, {useState} from 'react';
Any idea what is the right syntax for this import?
import supports a limited set of syntax variations.
It can be:
import React, {useState} from 'react';
The downside is that entire library is imported, because React is default export and cannot be tree-shaken. Since the presence of React import is needed to use JSX syntax, a more efficient way is:
import * as React from 'react';
import {useState} from 'react';
Hooks were introduced in pre-release React 16.7. react version constraint should be ^16.7.0-alpha.0, #types/react should be ^16.7.0.
I had the same error on "#types/react": "^16.8.17". Looking at it's type def file, it was missing the useState function for some reason, though it was mentioned in the comments of other hooks like useReducer.
Upgrading to "#types/react": "^16.8.18" with npm i #types/react#latest fixed it.
In some example, I saw :
import React, {
Component
} from 'react';
import {
StyleSheet, Text,...
} from 'react-native';
I know the 'react-native' purpose, but I don't understand why they import 'React' in some example? it makes me confused...
Thanks for your time :)
import React from 'react' is required for JSX to work.
Under the hood, JSX is being transpiled to React.createElement(...) invocations. So, even though you don't have to type React.createElement(), JSX still requires React to be active in the module namespace so that it can do it for you.
Example of what React looks like without the transpilation step.
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}.