I work at a company with a large react code base... not all of it is to react standards, and not all of it adheres to it's own standards (im thinking this is pretty standard haha).
I see react being brought into components differently throughout. Here's two examples - marked with (1) and (2):
(1) let React = require('react');
(2) import React, {Component, PropTypes} from 'react';
What is the difference and why use one versus the other? It's not only the react being brought in. I also see import {Component, PropTypes} from 'react'; and let {Component} = React;.
I did a brief search on them internets and couldnt find what i was looking for. maybe my search terms are off a bit. Id be happy with brief explanation and hopefully documentation to go with it. Thank you.
The difference between the two is that
1) let React = require('react');
is ES5 syntax, whereas
2) import React, {Component, PropTypes} from 'react';
is ES6 syntax
However no Javascript engine as yet supporst ES6 and hence some utility tools like babel behind the scenes convert the ES6 definition to the ES5 syntax of require which #azium says is the Node commonJS syntax for importing modules only.
1) is syntax of ECMAScript 5 (ES5) published in 2009
2) is syntax of ECMAScript 6 (ES6) also known as ECMAScript 2015
(ES2015) published in 2015
(1) let React = require('react');
(2) import React, {Component, PropTypes} from 'react';
Related
Problem described here too, but the response was not elaborative React can't be found
import React from 'react' <- I know this statement is correct
Since "React" is a default export and not a named export, shouldn't this statement work too:
import react from 'react'
I know React.createElement() will be called in future, but why isn't react.createElement() correct? After all, the word "React" is just a name to refer to 'react' module.
In the old versions of react-scripts which uses webpack as a bundler, you need to define a React object in your code where you use JSX because when the bundler is handling your code uses the defined React object to call for the nessecerary methods like React.createElement and everywhere else that react is needed. That is why if you remove the React import or write the name in any other fashion you will face an error
WebStorm doesn't detect this import from react. I always have to explicitly type it.
import React, {useState} from 'react'
This is kind of boring when working with many files.
NOTE: it does detect & autocomplete imports from current project. But doesn't detect/autocomplete any import from node_modules folder mostly.
Upgrading Webstorm to 2021.1 solved the issue. Thanks Lena for the comment.
I have a Next.js app with several pages in it. All of the pages look similar.
import React, { Component } from "react";
import from "components/Wrapper";
export default class About extends Component {
render() {
return <Wrapper />;
}
}
I would like to refactor it using functional component.
I read here that you don't have to import react package here in a page due to next.js routing system. Next.js docs also show examples without react import on a page component, but no explanation given.
Can you clarify please. Is it necessary to import React at all in this case? Can I remove the import React line?
Well, actually it is still a complicated issue for all of us to realise when to use import React from "react"; and when not to in Next.js apps. But according to Tim Neutkens co-author of Next.js, in this thread he mentioned:
Next.js automatically adds the React import when JSX is used indeed. However, keep in mind that we still need to import React from 'react' when the React variable is used.
So this will show us, that whenever we want to use the JSX feature alone from React we do not have to import React from 'react' and Next.js will implicitly import it for us, but in any other case, we have to do that.
Update
Since the release of react v17.*.*, there is no need to import React from 'react' to use only JSX in the React and CRA apps, but you still need to import it for the usage of the hooks and other compartments that React offers with destructured named imports.
NPM libraries/packages
Though you will still need it if you want to create an npm package with react because under the hood it is the react-scripts job to do the automatic imports and babel or rollup won't do this on their own and they've just transpile the provided code. Keep in mind even in this case the usage of import React from 'react' is discouraged because the support will be dropped in the upcoming versions, so it is highly recommended to use import * as React from 'react' in these cases.
I am trying to learn React. The tutorial that I am following says that I need to import react using the following:
import React from "react"
import ReactDOM from "react-dom"
I am working in Visual Studio and I cannot get that to work (however, it does not throw any errors). The Visual Studio React tutorial here told me to add the following to include React:
declare var require: any
var React = require('react');
var ReactDOM = require('react-dom');
This works and my "Hello World!" is rendered. What I'd like to understand, is why the "import React" code does not work and what is the difference between the two. I'm not sure what other info someone would need to answer/explain my question, but I can provide more info if needed.
Any assistance is greatly appreciated.
import statements are not supported natively yet in javascript. Have a look at this thread where the answer is basically also answering what you are looking for.
If you don't want to bother about learning more about webpack/babel for now (I would highly recommend to skip this first and just focus on react), have a look at create-react-app which handles all configuration for you. Also, there is a ton on material and tutorials regarding learning react with create-react-app.
What am I doing wrong with this import in my react component? I'm trying to use the following npm package in my React app:
https://www.npmjs.com/package/chrome-headless-render-pdf
I'm assuming that this package is useable from a React app. Is there any reason why it would not be? If not then how should I evaluate whether or not an npm package is useable in a React app? The npmjs page shows the package being used like this:
const RenderPDF = require('chrome-headless-render-pdf');
RenderPDF.generateSinglePdf('http://google.com', 'outputPdf.pdf');
I was thinking that I should be able to simply import the package in my React component like this:
import * from 'chrome-headless-render-pdf';
However, intellisense is reporting this import as invalid. How can I properly import this package into my component?
In their documentation, They also mentioned it as:
you can also use it from typescript or es6
import RenderPDF from 'chrome-headless-render-pdf';
RenderPDF.generateSinglePdf('http://google.com', 'outputPdf.pdf');
This line is not a valid import statement according to the ecmascript spec.
import * from 'chrome-headless-render-pdf';
When you use the * import syntax, you must assign a name. For example:
import * as chromeHeadless from 'chrome-headless-render-pdf';
This will make all named exports from the module available from your chosen namespace. You might use this with modules that does not have a default export. Typically the documentation for the module will explain which style of import syntax you can use.
MDN provides a reference of the different valid import statements available