how to add a component to my react project
I already defined it and import it in app js
but it did not work and the console tells me
warning: it is defined but never used
That's not an issue. Your component is being exported and imported correctly.
The thing, you are importing a component but you didn't use that anywhere. That's what warning shows you. If you don't need that component to use, remove the import line for that component to remove the warning message from the console.
Or, if you use eslint, add the following comment just after the import statement
// eslint-disable-line no-unused-vars
Or, you may configure with more option:
/*eslint no-unused-vars: ["error", { "vars": "local" }]*/
/*global some_unused_var */
Related
Today I have created my basic react app where I have created a new component called 'myComponent.js' and later on I tried to import it into index file using import statement. When I use myComponent in the file to render it on screen and also a warning pops out saying 'myComponent' is defined but never used.
The first letter should be capitalized. You should do updates to use <MyComponent/> instead
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 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
here is my error
Failed to compile
./src/node_modules/react-redux/es/components/Provider.js
Line 7: Import in body of module; reorder to top import/first
Line 8: Import in body of module; reorder to top import/first
Line 9: Import in body of module; reorder to top import/first
Line 10: Import in body of module; reorder to top import/first
Search for the keywords to learn more about each error.
I am just importing Provider to follow standard to add redux store. My search of the error seem to lead to disable ESLint. I am assuming that many people are using Provider for redux store so am I the only person that have this error? Why would { Provider } from 'react-redux' not follow ESLint convention? I am assuming that it is not normal to disable ESLint?
The problem would seem to be that you're ESLinting the libraries you import, which you probably don't want to do, since you don't want to change them. You'll want to configure ESLint to only process YOUR code. Really, you just don't want to have node_modules be under /src.
Most probably you are using Eslint. If so Add the following rules, it will gonna solve your issue. Modify .eslintrc
"rules": {
"import/first": 0,
"import/order": 0
}
I'm working to import CSS files in my React App. I have css being imported successfully like so:
Original source app: https://github.com/timscott/react-devise-sample
MainLayout.jsx
import css from '../styles/base.css'
base.css
body {
opacity: .1;
}
When I load my app in a browser I see the styles taking effect. The problem is, in the console I'm getting a JS warning:
webpackHotDevClient.js:198 ./src/layouts/MainLayout.jsx
.../client/src/layouts/MainLayout.jsx
12:8 warning 'css' is defined but never used no-unused-vars
✖ 1 problem (0 errors, 1 warning)
What am I doing wrong in React to cause the CSS to render but still get a warning in the console?
Name this "component" only if you need call them in some part of the code. e.g. Using CSS-Modules. This is only a regular css so load in this manner :
import '../styles/base.css'
But if you still want to keep this unused var you can edit your es-lint, and delete this rule. (Not Recommended)
You do not need "css from" since the css file is already connected to the jsx file. You only do that when using other jsx components, for example:
import SomeComponent from '../SomeComponent.jsx'