babel-plugin-syntax-jsx

What is babel-plugin-syntax-jsx?

The babel-plugin-syntax-jsx npm package allows Babel to parse JSX syntax. This plugin only enables parsing and does not apply transformations. It is typically used in conjunction with other plugins or presets to transform JSX into valid JavaScript code that browsers can understand.

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

JSX Parsing

This code demonstrates how JSX syntax can be included in JavaScript files. The babel-plugin-syntax-jsx allows such JSX syntax to be parsed without transforming it, serving as a foundation for other transformation plugins.

import React from 'react';

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 but also transforms it into React.createElement calls. It is more comprehensive than babel-plugin-syntax-jsx, which only parses JSX without transforming it.

@babel/preset-react

This is a Babel preset that includes both JSX parsing and transformation capabilities, along with other features necessary for React development. It is more feature-rich compared to babel-plugin-syntax-jsx, which solely focuses on syntax parsing.

README

babel-plugin-syntax-jsx

Installation

$ npm install babel-plugin-syntax-jsx

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["syntax-jsx"]
}

Via CLI

$ babel --plugins syntax-jsx script.js

Via Node API

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