CODEWITHSUNDEEP
reactjsjsxeslint
Phelizer
Phelizer

Reputation: 319

Do I need to "import React" if I use JSX syntax?

I created a React app via Create React App. In the App.js file, there is no import React from 'react';, though it works correctly when I run it. Then I set up ESLint like this:

{
    "extends": ["airbnb", "prettier", "react-app"],
    "rules": {
        "prettier/prettier": "error"
    },
    "plugins": ["prettier"]
}

After that the app doesn't run with an error:

React' must be in scope when using JSX        react/react-in-jsx-scope

What is the more correct way to fix that - to add an exception to the ESLint rules or to explicitly import React wherever I use JSX?

Upvotes: 3

Views: 2879

Answers (1)

jonrsharpe
jonrsharpe

Reputation: 121966

From React 17* there is a new JSX transform that no longer requires an explicit import React from "react";. If you're using this transform, you no longer need that ESLint rule enabled; this is explicitly called out in the post:

ESLint

If you are using eslint-plugin-react, the react/jsx-uses-react and react/react-in-jsx-scope rules are no longer necessary and can be turned off or removed.

{
  // ...
  "rules": {
    // ...
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
}

* and v16.14.0, v15.7.0, v0.14.10

Upvotes: 3

Related Questions