When we write code in index.js file in src folder of an React app first of all we write this line:
import React from 'react';
I know react is a package
But I want to know what is React basically
an object, a method or something else.
The React variable that you import is an object, and it contains most of the methods that are used by React when generating a web-page.
The reason this import has been historically required is because the JSX that you write (e.g. return <p>text</p>) gets converted into a function call, calling the React.createElement function.
Note that in newer versions of React you no longer need to import react when using JSX. See https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html for more information.
Credit to Olivier Boissé for an answer in the comments.
In order to find out what React is, you just need to write:
console.log(react);
Then you will see that it is an object with many properties and methods.
String:
import React from "react";
We are writing in order to import this object into a file where we will use some of its method. If you don't use anything from React in the file, then you don't need to import it.
For example, in react 18, it is no longer necessary to import the react object into a file index.js
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);
In any case, at this stage of your study of react, it may not be entirely clear to you what is used in it and for what, but in the future you will become more aware of all the possibilities of react. There is a time for everything
Related
I'm new to react and I'm trying to figure out why this render statement says that is requires a semicolon.
import React, { useState, useEffect } from 'react';
import './App.css';
import firebase from 'firebase/compat/app';
import 'firebase/database';
import 'firebase/firestore';
function test() {
render() {
return (
<div>
<p>Display</p>
</div>
);
}
}
export default test;
test is a function component, you don't need a render method for a function component. Just remove the render method and the code should work.
Read more about function components here.
Most ECMAScript statements and declarations must be terminated with a semicolon. Such semicolons may always appear explicitly in the source text. For convenience, however, such semicolons may be omitted from the source text in certain situations. These situations are described by saying that semicolons are automatically inserted into the source code token stream in those situations.
In your case, ES6 is being used through babel. It's a transpiler and it may add the missed semicolons in the process of transpiling the source text to native JS.
I'm working on a React project, and creating a component called SVGLogo that simply imports an svg and exports as a component. I noticed that when I use require() to import my svg file, it works fine:
const SVGLogo = require('../../../../../vft-site/src/images/logo.svg');
But my linter suggests I use the import statement. I changed it but now I get the error 'cannot find module... or its corresponding type declarations':
import SVGLogo from '../../../../../vft-site/src/images/logo.svg';
Why are these different?
import comes in es6 like a new feature and require can be called from anywhere but import can be called on top of script
I saw the examples where https://reactjs.org/docs/hooks-custom.html they always do:
import React, { useState, useEffect } from 'react';
But React is not really used in the file, do we really need it and why?
I asked this question because I am encountering an issue with eslint saying:
'React' is defined but never used no-unused-vars - And I'm on create-react-app 3.0.1 which eslint is already included - (and I'm not sure how to fix this - already tried this and also tried adding it on package.json eslintConfig but still nothing)
You will need React if you are rendering JSX.
To avoid that eslint warning, you should use react-in-jsx-scope rule from eslint-plugin-react.
In that rule, it also explains why you need React in the file, even if you don't use it (you think you don't use it, but if you render JSX, you do).
When using JSX, <a /> expands to React.createElement("a"). Therefore the React variable must be in scope.
If you are using the #jsx pragma this rule will check the designated variable and not the React one.
React 17 has a new JSX transform which no longer requires the import (also backported to new versions 16.14.0, 15.7.0, and 0.14.10). You can read more about it here:
https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
// no import needed
const App = () => <div>hello!</div>
However, you still need to import to use hooks:
import { useState } from 'react'
const App = () => {
const [stuff, setStuff] = useState('stuff')
return <div>{stuff}</div>
}
The docs also link to a script to automatically update all of the files in a project to fix all of the imports. Personally, I was in the habit of just using the React.useWhatever form so I never needed to mess with the import statement, but using named imports can potentially reduce the final bundle size.
The docs say the named import is now the recommended way, so this is NOT recommended, but if you really want to keep the React import, you can set the below eslint rule to stop it from complaining. Note that this will continue to require it in all files.
"react/jsx-uses-react": "error"
From the React official docs:
Fundamentally, JSX just provides syntactic sugar for the
React.createElement(component, props, ...children) function. The JSX
code:
<MyButton color="blue" shadowSize={2}>Click Me</MyButton>
compiles
into:
React.createElement(MyButton, {color: 'blue', shadowSize: 2},'Click Me' )
You can also use the self-closing form of the tag if
there are no children. So:
<div className="sidebar" />
compiles into:
React.createElement('div', {className: 'sidebar'}, null )
https://reactjs.org/docs/jsx-in-depth.html
EDIT Hooks are also under the React namespace, React.useState ...etc
Say I have the following:
import validator from 'validator'
and in my code do:
validator.isEmail(txt)
Would that import the entire validator and increase the overall package size?
if, how do I avoid this?
Your statement will import the whole validator.
What are you looking for is this
import { isEmail } from ‘validator’
isEmail should be e exported in the source file.
I have code which works only after importing React but I'm not using React anywhere I'm using reactDom instead
import ReactDOM from 'react-dom'
import React, {Component} from 'react'
class App extends Component {
render () {
return (
<div>comp </div>
)
}
}
//ReactDOM.render(<App/>, document.getElementById('root'))
ReactDOM.render(<div>sv</div>, document.getElementById('root'))
why its require to import React ??
Although you don't explicitly use the React instance you've imported, JSX is transpiled to React.createElement() call, which uses it.
In your example, <div>comp </div> is transpiled by Babel to React.createElement('div', null, 'comp').
This is a really interesting question, since you're right that the code doesn't look like it's using React, but it's being tricky.
Any time you use the shorthand <Component /> code what's actually happening is the JSX is transpiled by Babel into something that is regular Javascript.
<Component/>
// Is turned into
React.createElement(...)
Therefore the code does indeed need React to be imported, although it's not obvious to the reader
React import is required because the following JSX code:-
(
<div>comp </div>
)
gets transpiled to
React.createElement(
"div",
null,
"comp "
);
This is the reason you need to import React;
I hope that answers your question.
You can always refer to https://babeljs.io to understand what get's converted to what.
For React versions prior to React 17 or the specified older major versions not including the new JSX transform (see blog), importing React in every component file is necessary for the JSX transform. However in React 17 and some specified older versions including the new transform, this is no longer necessary because of its new transform that does not require it.
Reference: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
I used to think that if ReactDOM uses React then it will take care of importing it. But that's not the case. After JSX in your source code is transformed it is evident that its explicitly using the React package. And hence it is required.
React.createElement('div', null, 'comp')
You need to import React if using the JSX DSL (which almost everybody does)
As per other answers, a transpiler will usually change JSX tags to
React.createElement(...)
So you actually are using React :)