What is the Babel plugin for transforming React JSX

Question

With the help of a proper code explanation, can you tell me What is the Babel plugin for transforming React JSX?

Answer 1

It's referred to as the @babel/preset-react. It is the preset that handles the transformation of JSX in React into actual JavaScript code that browsers comprehend.

How it works:

JSX isn't valid JavaScript and thus needs to be transformed into a series of calls to React.createElement(), something that a browser can then execute.

@babel/preset-react is a preset configuration for Babel comprising all necessary plugins that'll help translate JSX into actual JavaScript code.

Use this Babel plugin by first installing @babel/preset-react as a development dependency in your project:

npm install --save-dev @babel/preset-react