I'm not sure which way I' supposed to import React in my React Native app.
If I need to use a hook like useState should I import React with: import React, { useState } from 'react';, import { useState } from 'react';, import * as React from 'react';, or import * from 'react';?
If I don't need any hooks should I use: import React from 'react';, import 'react';, import * as React from 'react';, or import * from 'react';?
As of react version 17+, you don't need to import React from 'react' anymore. Read more about the JSX transformation.
Hooks are named exports, so you need to import hooks as:
import {useState, useEffect /* and others */} from 'react'
If you are using a react version below 17, you need to import React. Since React would be a default import these are all refer to the same thing:
import React from 'react'
import * as React from 'react'
So you should do import React, {/* hooks you are using */} from 'react'.
You can even do import * as Whatever from 'react', since it is not a named export.
Related
I would like to know how to solve this problem.
You got this suddenly, and I still haven't found a solution!
my app_tsx
import type { AppProps } from "next/app";
import React from "react";
// styles
import "../node_modules/bootstrap/scss/bootstrap.scss";
import "tippy.js/dist/tippy.css";
import "tippy.js/animations/perspective-subtle.css";
import "tippy.js/themes/light.css";
import "../styles/globals.scss";
import "react-toastify/dist/ReactToastify.css";
// components
I want to conditionally import react-devtools based on an environment variable but eslint says that I can't import in the body of the module when I try to import react-dom
react-devtools requires that I import it before react-dom so what do I do?
import React from 'react';
import env from 'react-dotenv'
const _temp = env.DEV === "true" && import ("react-devtools");
import ReactDOM from 'react-dom';
import App from './App';
import { RecoilRoot } from 'recoil'
It gives errors on the last three lines. How do I resolve this?
I'm getting stuck at the step that requires me to create a firebase/Context.jsx file, which I have done as follows:
import React from 'react';
const FirebaseContext = React.createContext(null);
export default FirebaseContext;
Then in index.js, I try to import Firebase Context as:
import Firebase, { FirebaseContext } from './components/firebase/Context';
I get an error that says:
Attempted import error: 'FirebaseContext' is not exported from
'./components/firebase/Context
How do I export/import in react?
To get rid of the error you posted, in firebase/Context.jsx change it to :
import React from 'react';
export const FirebaseContext = React.createContext(null);
Then import
import { FirebaseContext } from './components/firebase/Context';
Alternatively, leave firebase/Context.jsx file as it is (exporting a default) and change the import to
import FirebaseContext from './components/firebase/Context';
the problem I try to solve
import * as React from 'react';
import {Component} from 'react';
I dont like it being two lines - to be frank it is not even allowed by my linter settings.
But writing the following
import * as React from 'react';
const Component = React.Component;
doesnt look fine to me as welll - as I willl have llines of imports and than const delarations - which are actually imports
in a non TS syntax the above lines could have been
import React, {Component} from 'react';
and this is what I am looking for, but
import * as React, {Component} from 'react';
is not a valid syntax.
The question
how can I acchieve a one liner with namespace import and partial import
Starting from TypeScript 2.7, you can enable esModuleInterop in your tsconfig.json to enable import React, { component } from 'react'
There is a specific meaning for import * as React from 'react', which is getting the module namespace object of the module react.
As it gets everything in the module, it is more natural to use React.component then extracting component using the import { component } from 'react' in addition.
I'm very clearly loading and using React up until the point where it can't find it.
import React from 'react';
import ReactDOM from 'react-dom';
import Container from 'react-container';
import { UI } from 'touchstonejs';
import VoteContainer from '../components/vote-container.js';
import Solution from '../components/solution.js';
import moment from 'moment';
module.exports = React.createClass({
addSolution () {
var solution = ReactDOM.findDOMNode(this.refs.solution).getElementsByTagName('input')[0].value,
^~~~ ReactDOM is not defined
But! Once I run addSolution , then React and ReactDOM are inaccessible. How does this variable suddenly get lost? What might I be doing to lose it?
This is the button that would call it within this class' render method..
<UI.Button type="primary" onTap={this.addSolution} >
Send
</UI.Button>
Since v0.14, ReactDOM got separated to another package and given that findDOMNode is part of ReactDOM, in order to use it within your components you have to include it. For example:
import React from 'react';
import ReactDOM from 'react-dom';
/* ... */
module.exports = React.createClass({
addSolution: function() {
ReactDOM.findDOMNode(...)
}
})