# JSX

> extension to the JavaScript syntax used by React

**Wikidata**: [Q105157779](https://www.wikidata.org/wiki/Q105157779)  
**Wikipedia**: [English](https://en.wikipedia.org/wiki/JavaScript_XML)  
**Source**: https://4ort.xyz/entity/jsx

## Summary
JSX (JavaScript XML) is a syntax extension for JavaScript that allows developers to write HTML-like markup within JavaScript code. Created by Meta in 2013, it acts as a syntactic sugar and domain-specific language primarily used by the React library for building user interfaces. It requires a source-to-source compiler to translate the code into standard JavaScript.

## Key Facts
- **Creator:** Meta (formerly Facebook).
- **Inception:** 2013.
- **Aliases:** JavaScript XML, JavaScript Syntax Extension, React.js JSX, Javascript React.
- **Primary Use:** Used by React, Vue.js, and SolidJS.
- **License:** Creative Commons Attribution 4.0 International.
- **Technical Classification:** Defined as a syntactic sugar, domain-specific language, template language, and technical specification.
- **Syntax Features:** Uses chevrons (angle brackets) to define elements.
- **Influences:** Influenced by HTML and ECMAScript for XML (E4X).
- **Official Resources:** Maintained on GitHub (facebook/jsx) and documented at react.dev.

## FAQs
### Q: What exactly is JSX?
A: JSX is a syntax extension for JavaScript that lets you write markup inside a JavaScript file. It is a domain-specific language and template language that requires a compiler (like a source-to-source compiler) to convert the syntax into standard JavaScript that browsers can understand.

### Q: Is JSX exclusive to React?
A: While JSX was created by Meta for use with React, it is not strictly exclusive to it. The syntax is also used by other frameworks and libraries, including Vue.js and SolidJS.

### Q: Does the browser understand JSX directly?
A: No, browsers cannot read JSX natively. It is classified as "syntactic sugar," meaning it must be compiled or transpiled into regular JavaScript using a source-to-source compiler before execution.

## Why It Matters
JSX represents a paradigm shift in front-end web development by bridging the gap between rendering logic and markup. Before its introduction in 2013, web development convention dictated a strict "separation of concerns" where HTML, JavaScript, and CSS were written in separate files. JSX challenged this by arguing that rendering logic is inherently coupled with other UI logic, such as event handling and state changes.

By allowing developers to write markup directly inside JavaScript, JSX enables the creation of component-based architectures where a single file encapsulates the structure, style, and behavior of a UI element. This approach simplifies code maintenance and debugging while leveraging the full power of JavaScript programming within the template itself. As a specification licensed under Creative Commons Attribution 4.0, it has fostered an ecosystem where various tools and frameworks beyond React, such as SolidJS and Vue.js, can adopt and adapt the syntax for their own rendering models.

## Notable For
- **Markupt-in-JS:** It popularized the concept of writing HTML-like syntax directly inside JavaScript files.
- **React Integration:** It is the default templating language for React, the most widely used JavaScript library for user interfaces.
- **E4X Heritage:** It is notably influenced by ECMAScript for XML (E4X), an earlier attempt to add XML support to JavaScript.
- **Compiler Dependency:** Unlike standard HTML, it strictly requires a build step involving a source-to-source compiler to function.
- **Standardization:** It is treated as a technical specification with its own GitHub repository and dedicated documentation, rather than just a library feature.

## Body

### Definition and Classification
JSX is defined technically as a domain-specific language and a syntactic sugar extension to the JavaScript syntax. It is described as a programming language specification and a template language. Unlike standard JavaScript, JSX utilizes chevrons (angle brackets) to define tree structures, mimicking the appearance of HTML or XML within a scripting environment.

### History and Development
JSX was created by **Meta** (then Facebook) and was established in **2013**, coinciding with the inception of the React library on May 29, 2013. The syntax was designed to provide a more concise and familiar way for developers to describe the structure of the user interface.

According to the official specification, the creation of JSX was influenced by:
- **HTML**: For its familiar tag-based structure.
- **ECMAScript for XML (E4X)**: An extinct standard for processing XML in JavaScript.

### Usage and Ecosystem
While intrinsically linked to React, JSX is utilized by multiple modern frameworks including **Vue.js** and **SolidJS**. It serves as a bridge between the declarative nature of templates and the procedural power of JavaScript.

**Compilation:**
Because JSX is not valid JavaScript, it is processed by a **source-to-source compiler**. This compiler transforms the JSX syntax into standard JavaScript objects (often React elements or similar structures) that a browser can interpret.

**Resources and Licensing:**
- **License:** The specification is open and licensed under **Creative Commons Attribution 4.0 International**.
- **Repository:** The source code and specification are maintained publicly at `https://github.com/facebook/jsx`.
- **Documentation:** Detailed guides on writing markup with JSX are available at `react.dev` and the Mozilla Developer Network.

## References

1. [Source](https://facebook.github.io/jsx/#sec-license)
2. [Source](https://web.archive.org/web/20130729102230/http://facebook.github.io/react/)
3. [Source](https://facebook.github.io/jsx/#sec-prior-art)