@babel/plugin-syntax-jsx

What is @babel/plugin-syntax-jsx?

The @babel/plugin-syntax-jsx npm package allows Babel to parse JSX syntax. JSX is a syntax extension for JavaScript, commonly used with React to describe what the UI should look like. By enabling this plugin, Babel can understand and process JSX syntax, but it does not transform it. To transform JSX, you would need to use another plugin like @babel/plugin-transform-react-jsx.

What are @babel/plugin-syntax-jsx's main functionalities?

JSX Parsing

This plugin allows Babel to parse JSX syntax like the one in the code sample, which represents a React element.

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

Other packages similar to @babel/plugin-syntax-jsx

@babel/plugin-transform-react-jsx

This package not only parses JSX syntax but also transforms it into React.createElement calls, making it suitable for use in a React application.

babel-preset-react

This is a Babel preset for all React plugins, including JSX syntax parsing and transformation. It is a more comprehensive package for React development.

babel-plugin-transform-vue-jsx

Similar to the JSX transformation plugin for React, this plugin is tailored for Vue.js and transforms JSX into Vue.js render functions.

README

@babel/plugin-syntax-jsx

Allow parsing of JSX

Installation

npm install --save-dev @babel/plugin-syntax-jsx

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["@babel/plugin-syntax-jsx"]
}

Via CLI

babel --plugins @babel/plugin-syntax-jsx script.js

Via Node API

require("@babel/core").transform("code", {
  plugins: ["@babel/plugin-syntax-jsx"]
});