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.
What opens 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.
Windows
- VS Code
- WebStorm
- any text editor
macOS
- VS Code
- WebStorm
- any text editor
Linux
- VS Code
- vim
- any text editor
Open a .jsx file step by step
- Confirm the file really is a .jsx. Drop it into the WhatFileType identifier, which reads its signature in your browser without uploading anything.
- On Windows, open it with VS Code or WebStorm.
- On Mac, use VS Code or WebStorm.
- On Linux, try VS Code or vim.
- Still stuck? Convert the .jsx to js, which opens more widely.
Why can't I open my .jsx file?
Almost always because no installed app understands JSX. Install one of the apps above, or convert the file to a format your existing software already reads. If double-clicking opens the wrong program instead of nothing at all, the file association is set to the wrong app rather than the file being broken.
The other possibility is that the file is not really a .jsx at all. Drop it into the file identifier to check it by its bytes instead of its name. Nothing is uploaded.
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 has no fixed magic number, so there is no signature table on this page. Its bytes alone do not prove the format: identification relies on the extension, the structure of the content and the program that created it. The magic-numbers reference lists the formats that do carry one.
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. How sources are ranked and what is deliberately left out is set out in the methodology.