定义了“标头”，但从未使用过未使用的变量

Question

I am new to reactjs. I have created a application and trying to load header component inside the app.js. When i try to load the Header component it show throws warning error in command prompt as

./src/components/Header.jsx
Line 2 'Header' is defined but never used  no-unused-vars

Also throws error in the browser when i run the application

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Check your code at App.js:24

I have added a file ".eslintrc" in the root and added below code to that

{
"parserOptions": {
  "ecmaFeatures": {
      "jsx": true
  }
},
"rules": {

}
}

So far nothing works. Can anyone please help me on this.

Answer 1

Please rename Header.jsx to Header.js

Be sure to put following line of code on top of your App.js:

import {Header} from '/src/components/Header.jsx'

be sure to put export in front of class Header {..}

Hope that helps ;-)