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.
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 want to use import React from "react" in typescript, but I have to use import * as React from "react", otherwise can't recognize the 'react' package of nodemodules
try setting allowSyntheticDefaultImports: true in your ts-config. It will fix the above error.
You are doing it wrong.
The import should be
import React from 'react';
With a capital R
The reason why import * as react from "react"; works because it specifies that everything should be imported from "react" package and it should be given an alias of react.
If you already tried the above import, you can try the allowSyntheticDefaultImports compiler flag as mentioned here.
You can learn more about it here
For me
import React from 'react';
doesn't work. I get the following error
Module ".../node_modules/#types/react/index"' can only be default-imported using the 'esModuleInterop' flagts(1259)
index.d.ts(55, 1): This module is declared with using 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.
So I'm going with
import * as React from 'react';
Is it bad Webpack practice to import all the libraries that React application needs in one place, for example inside Libs.js, and then inside every application module get them all with just one import statement ?
Libs.js
import React from 'react';
import { PropTypes } from 'prop-types';
import { connect } from 'react-redux';
import { reduxForm, Field, getFormValues, change } from 'redux-form';
import isNull from 'lodash/isNull';
export default {
React: React,
PropTypes: PropTypes,
redux: {
connect: connect
},
form: {
create: reduxForm,
change: change,
getValues: getFormValues,
Field: Field
},
lodash: {
isNull: isNull
}
};
Any app module
import libs from 'common/libs';
Webpack and rollup don't need this kind of enclosed module that groups together all libraries. If you are using a bundling system and import react 20 times, the system will not to import and include the code only once, so it's easier to just import what library dependencies you have in the files where they are used.
With this approach you also get more clarity of what libraries are used by which components.
Short answer: Yes, in my opinion, it is a bad practice and I wouldn't do it in any project.
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
Is there a way to do a direct module import for ReactDOM's render method to minimize bundle size?
For example, this direct module import works for findDOMNode:
import findDOMNode from 'react-dom/lib/findDOMNode';
...but this does not:
import { render } from 'react-dom/lib/ReactMount';
import { render } from 'react-dom';
Worked for me.