react-in-jsx-scope.md

Disallow missing React when using JSX (react/react-in-jsx-scope)

💼 This rule is enabled in the following configs: all, recommended. This rule is disabled in the following configs: jsx-runtime.

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.

Rule Details

Examples of incorrect code for this rule:

var Hello = <div>Hello {this.props.name}</div>;

/** @jsx Foo.bar */
var React = require('react');

var Hello = <div>Hello {this.props.name}</div>;

Examples of correct code for this rule:

import React from 'react';

var Hello = <div>Hello {this.props.name}</div>;

var React = require('react');

var Hello = <div>Hello {this.props.name}</div>;

/** @jsx Foo.bar */
var Foo = require('foo');

var Hello = <div>Hello {this.props.name}</div>;

When Not To Use It

If you are not using JSX, or if you are setting React as a global variable.

If you are using the new JSX transform from React 17, you should disable this rule by extending react/jsx-runtime in your eslint config (add "plugin:react/jsx-runtime" to "extends").