Question

Why must 'React' be in scope when using JSX

"I'm working with JSX in React, and I'm running into an issue where my code isn't working properly. I keep getting an error that says something like 'React must be in scope' when I try to use JSX. I don't understand why React needs to be in scope, especially since I'm just writing JSX and not directly using React in my code. Can someone explain why React needs to be imported or in scope when using JSX?"

Answer 1

Because JSX is transformed into JavaScript at build time, 'React' must be in scope when using JSX in React. Here's the precise and complete explanation:

1. JSX gets converted to JavaScript.

It is not valid JavaScript. It is a syntactic extension that resembles HTML, but it is JavaScript. The JSX code you write, such as <div>Hello</div>, is not executed by the browser.

In fact, the build system typically using Babel will take this JSX and transform it into straight JavaScript code. The JSX code is, in effect, compiled into React.createElement() calls.

For example: this JSX:

<div>Hello World</div>

is transformed by Babel to:

React.createElement('div', null, 'Hello World');

2. Why React Should Be in Scope:

React.createElement() is the main method that gets called when you use JSX to create React elements. As such, it is a function of the React object, and so for JSX to work, the React object needs to be in scope.

Prior to React 17, Babel would automatically need React in scope because it relied on React.createElement to turn JSX into JavaScript.

For example:

const element = <h1>Hello, world!</h1>;

This would be transpiled as something like this by Babel:

const element = React.createElement('h1', null, 'Hello, world!');

So to ensure availability of React.createElement(), you must import React at the top of your file.