What is a .jsx file?
JavaScript React Source File · Code and data · Meta (Facebook) · 2013
A .jsx file is JavaScript that includes JSX, an HTML-like syntax for describing React components. It lets you write what the interface looks like right alongside the code that drives it.
What is a .jsx file used for?
JSX is not valid JavaScript on its own; a build tool such as Babel or a bundler compiles it into regular function calls the browser understands. This is why JSX files pass through a build step before they run.
Adding types turns JSX into TSX. The files are plain text and open in any editor, with VS Code offering React-aware tooling.
How to open a .jsx file
The .jsx format opens in the following apps, grouped by operating system. If one app does not work, try another from the same list. For a step-by-step walkthrough, see how to open a .jsx file.
Windows
- VS Code
- WebStorm
- any text editor
macOS
- VS Code
- WebStorm
- any text editor
Linux
- VS Code
- vim
- any text editor
How to convert a .jsx file
You can convert a .jsx file to js using a conversion tool or the export menu of an app that opens it.
.jsx file signature (magic bytes)
Programs recognise a .jsx file by the bytes at the start of the file, not by its name. These are the signatures for JSX.
| Hex signature | Offset | Note |
|---|---|---|
| (no fixed signature) | 0 | plain text; no fixed magic bytes |
See the full magic-numbers reference for every format.
Frequently asked questions
What is a .jsx file?
A .jsx file is JavaScript that includes JSX, an HTML-like syntax for describing React components. It lets you write what the interface looks like right alongside the code that drives it.
What is the difference between .js and .jsx?
A .jsx file contains JSX markup for React components. Many projects put JSX in plain .js files too; the .jsx extension just signals that a file has JSX.
Why won't my .jsx file run directly in the browser?
Browsers do not understand JSX. A build tool like Babel or Vite compiles it to plain JavaScript first.
How do I open a .jsx file?
Any text editor shows it. VS Code adds React and JavaScript highlighting and error checking.
Related formats
Sources
Details on this page were checked against authoritative references: