.jsx
Code
JSX (JavaScript XML — React)
JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside JavaScript code. It is the standard way to define UI components in React, the most popular frontend library.
MIME Type
text/jsx
Type
Text
Compression
Lossless
Advantages
- + Intuitive HTML-like syntax for UI component definitions
- + Full JavaScript power within markup expressions
- + Component composition is clear and readable
Disadvantages
- − Requires transpilation — cannot run directly in browsers
- − Mixes concerns (markup + logic) which some developers dislike
- − Must use className instead of class (React-specific)
When to Use .JSX
Use JSX for React component files; use .tsx for React with TypeScript.
Technical Details
JSX is not valid JavaScript — it must be transpiled (by Babel or SWC) into React.createElement() calls or the JSX runtime transform. JSX expressions can include JavaScript logic within curly braces.
History
Facebook introduced JSX in 2013 alongside React. Initially controversial for mixing HTML and JavaScript, JSX became widely accepted and is now used by millions of developers in React, Preact, and SolidJS.