[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"extension:v3:en:jsx":3},{"resolvedFromAlias":4,"canonicalExt":5,"ext":5,"name":6,"category":7,"categoryName":8,"updatedAt":9,"popularity":10,"summary":11,"howToOs":12,"quickAnswer":18,"answerIntro":19,"whatIs":20,"description":21,"furtherReading":22,"openInstructions":41,"commonIssues":55,"securityNotes":74,"faq":78,"aliases":91,"mimeTypes":92,"relatedExtensions":93,"breadcrumbs":140,"categoryAnchor":150,"categoryFuturePath":151,"metaDescription":152,"availableHowToOs":153,"openOnDeviceLinks":154,"cannotOpenReasons":170,"cannotOpenFixes":171,"convertOptions":172,"securityAffiliateMessaging":173,"securityAffiliates":174},false,"jsx","JSX (JavaScript XML) source file","web","Web","2026-06-12T07:59:55.325Z",75,".jsx is JavaScript source code that includes JSX, an XML-like syntax commonly used to write React UI components. You open it in a code editor (for viewing/editing) and typically compile it to plain JavaScript with tools like Babel or TypeScript.",[13,14,15,16,17],"windows","mac","linux","ios","android","To open .JSX files on Windows, right-click the .jsx file → Open with → Visual Studio Code (or another code editor).","Open a .jsx file with a source-code editor such as Visual Studio Code to read or edit it. To run it in an app or browser, it’s usually transformed into regular JavaScript as part of a build step (for example with Babel’s JSX transform or TypeScript’s JSX support).","JSX is a syntax extension to JavaScript that lets you write XML-like tags inside JavaScript code. It is widely used with React to describe UI components and is commonly stored in files with the .jsx extension. Tooling typically transforms JSX into standard JavaScript before execution.","JSX is best known as the markup-like syntax used with React to write component render output in a way that resembles HTML, while still being JavaScript. React documentation describes JSX as the commonly used (and preferred) way to write React components.\n\nA .jsx file is not a separate “binary format”; it’s plain text source code. Because browsers and many runtimes do not natively execute JSX syntax, projects usually include a compilation/transformation step that converts JSX into JavaScript function calls.\n\nCommon toolchains include Babel (via its React JSX transform plugin) and TypeScript’s JSX support, which can compile JSX according to your configuration. In editors like Visual Studio Code, JavaScript tooling can provide React/JSX-aware IntelliSense and editing features.",[23,26,29,32,35,38],{"title":24,"url":25},"JSX (JavaScript XML) — Wikipedia","https://en.wikipedia.org/wiki/JSX",{"title":27,"url":28},"Writing Markup with JSX — React documentation","https://react.dev/learn/writing-markup-with-jsx",{"title":30,"url":31},"TypeScript Handbook: JSX","https://www.typescriptlang.org/docs/handbook/jsx",{"title":33,"url":34},"@babel/plugin-transform-react-jsx — Babel documentation","https://babel.dev/docs/babel-plugin-transform-react-jsx",{"title":36,"url":37},"JavaScript in Visual Studio Code","https://code.visualstudio.com/docs/languages/javascript",{"title":39,"url":40},"IANA Media Types registry (for checking official MIME registrations)","https://www.iana.org/assignments/media-types/",{"windows":42,"macos":45,"linux":48,"ios":51,"android":53},[43,44],"Right-click the .jsx file → Open with → Visual Studio Code (or another code editor).","If you need to run/build it, open the project folder in your build toolchain (for example a React/Babel or TypeScript setup) and run the project’s build or dev command so JSX is transformed to JavaScript.",[46,47],"Control-click the .jsx file → Open With → Visual Studio Code (or another code editor).","To execute it as part of an app, use the project’s build tooling so JSX is compiled into JavaScript (commonly through Babel or TypeScript).",[49,50],"Open the .jsx file in a code editor such as Visual Studio Code.","To run it, build the containing project so JSX is transformed into standard JavaScript (for example using Babel’s JSX transform or TypeScript JSX compilation).",[52],"iOS does not commonly run or build JSX directly; open it only for viewing/editing in a text/code editor app, or transfer the file to a desktop environment for proper React/Babel/TypeScript build tooling.",[54],"Android does not commonly run or build JSX directly; open it for viewing/editing in a text/code editor app, or move it to a desktop environment to compile it with a typical React/Babel/TypeScript toolchain.",[56,62,68],{"title":57,"description":58,"steps":59},"The browser/runtime throws a syntax error on JSX tags","JSX is not standard JavaScript syntax in most runtimes, so running a .jsx file directly often fails unless it is transformed first.",[60,61],"Ensure your project uses a JSX transform step (for example Babel’s React JSX transform or TypeScript JSX compilation).","Build or run the project through its toolchain instead of opening the .jsx file directly in a browser.",{"title":63,"description":64,"steps":65},"Build compiles, but JSX output is wrong for your React setup","JSX compilation behavior depends on tool configuration (for example, which JSX runtime/transform is used). Misconfiguration can change what JavaScript is emitted.",[66,67],"Review your JSX-related configuration in your compiler/transpiler (TypeScript JSX options or Babel JSX transform settings).","Align the project’s React/JSX documentation and tool settings so the JSX transform matches your intended runtime.",{"title":69,"description":70,"steps":71},"Editor shows JSX as plain text or has poor IntelliSense","If the editor is not treating the file as JavaScript with JSX, you may not get syntax highlighting, formatting, or code assistance.",[72,73],"Use an editor with JavaScript/React tooling (for example Visual Studio Code’s JavaScript support).","Verify the file is recognized as JavaScript/JSX in the editor and that relevant language features/extensions are enabled.",[75,76,77],".jsx files are executable source code in a JavaScript toolchain: if you build or run a project containing untrusted .jsx, you may execute untrusted logic during development or build steps.","JSX is typically transformed into JavaScript (for example by Babel or TypeScript); treat the transformation/build pipeline as part of the attack surface when working with untrusted projects (malicious code can run during builds/tests).","On the web, do not assume there is an official, IANA-registered MIME type specifically for JSX; relying on non-standard types (often seen as “text/jsx”) can cause inconsistent handling across servers and clients.",[79,82,85,88],{"question":80,"answer":81},"Is a .jsx file the same as a .js file?","Both are JavaScript source files, but .jsx commonly indicates the file contains JSX syntax (XML-like tags) in addition to regular JavaScript.",{"question":83,"answer":84},"Can browsers open .jsx files directly?","Typically no. JSX usually must be transformed into standard JavaScript before it can run; this is commonly done by tooling such as Babel’s JSX transform or TypeScript’s JSX compilation.",{"question":86,"answer":87},"What should I use to edit .jsx?","A code editor with JavaScript/React support is ideal. Visual Studio Code documents JavaScript tooling and features that work well with React/JSX editing.",{"question":89,"answer":90},"Is “text/jsx” an official MIME type?","It is commonly referenced, but it is not registered with IANA, so you should not assume it is an official standardized media type.",[],[],[94,100,105,111,117,122,128,134],{"ext":95,"name":96,"category":7,"categoryName":8,"popularity":97,"summary":98,"howToOs":99},"war","Web Application Archive (WAR)",55,".war is a Web Application Archive used to package Java/Jakarta servlet-based web applications for deployment on a servlet container (for example, Apache Tomcat or Jetty). It is a ZIP-based Java archive that contains application classes, libraries, and web resources in a standard layout.",[13,14,15,16,17],{"ext":101,"name":102,"category":7,"categoryName":8,"popularity":97,"summary":103,"howToOs":104},"wasm","WebAssembly binary module",".wasm is the binary module format for WebAssembly, designed to run fast and efficiently in web browsers and other runtimes. You typically “open” it by loading it in a WebAssembly runtime (often via JavaScript in a browser) or by running it with a standalone runtime such as Wasmtime.",[13,14,15,16,17],{"ext":106,"name":107,"category":7,"categoryName":8,"popularity":108,"summary":109,"howToOs":110},"css","CSS stylesheet",39,".css is a Cascading Style Sheets (CSS) text file used to control the look and layout of web pages. You can open it in any text editor, and it is commonly edited with code editors that understand CSS.",[13,14,15,16,17],{"ext":112,"name":113,"category":7,"categoryName":8,"popularity":114,"summary":115,"howToOs":116},"mht","MHTML (Web Archive) file",35,".mht is an MHTML web archive that saves a complete web page (HTML plus images/CSS and other referenced files) into a single file. It’s commonly opened in modern web browsers such as Google Chrome and Microsoft Edge.",[13,14,15,16,17],{"ext":118,"name":119,"category":7,"categoryName":8,"popularity":114,"summary":120,"howToOs":121},"mhtml","MHTML (MIME HTML) Web Archive",".mhtml is a single-file web page archive that packages an HTML document together with its images, stylesheets, and other resources using a MIME multipart structure.",[13,14,15,16,17],{"ext":123,"name":124,"category":7,"categoryName":8,"popularity":125,"summary":126,"howToOs":127},"htm","HTML document",34,".htm is an HTML document (a text file that describes a web page). You can usually open it in any modern web browser or a plain-text/code editor.",[13,14,15,16,17],{"ext":129,"name":130,"category":7,"categoryName":8,"popularity":131,"summary":132,"howToOs":133},"svgz","SVGZ image",27,".SVGZ is a gzip-compressed SVG (Scalable Vector Graphics) image. It opens in most software that supports SVG, including modern web browsers and vector editors that can read compressed SVG.",[13,14,15,16,17],{"ext":135,"name":136,"category":7,"categoryName":8,"popularity":137,"summary":138,"howToOs":139},"xml","XML document",26,".XML files are used for web pages, browser rendering, and front-end assets. Open with web browsers, code editors, or build tools for web development. This guide covers opening methods, troubleshooting, and security best practices. Common MIME type: application/xml.",[13,14,15,16,17],[141,144,147],{"label":142,"to":143},"Home","/",{"label":145,"to":146},"File Extension Index","/file-extension",{"label":148,"to":149},".JSX","/file-extension/jsx","category-web","/category/web","Learn what .JSX files are, how to open them on every platform, common fixes, and security best practices.",[13,14,15,16,17],[155,158,161,164,167],{"os":13,"label":156,"to":157},"Open .JSX on Windows","/how-to/open-jsx-on-windows",{"os":14,"label":159,"to":160},"Open .JSX on Mac","/how-to/open-jsx-on-mac",{"os":15,"label":162,"to":163},"Open .JSX on Linux","/how-to/open-jsx-on-linux",{"os":16,"label":165,"to":166},"Open .JSX on iOS","/how-to/open-jsx-on-ios",{"os":17,"label":168,"to":169},"Open .JSX on Android","/how-to/open-jsx-on-android",[57,63,69],[60,61],[],"untrusted_source",[175,179],{"name":176,"description":177,"affiliateUrl":178},"Avast","Avast offers free and premium antivirus software that protects against viruses, malware, ransomware, and phishing. Scan files before opening them to ensure safety.","https://www.avast.com/lp-aff-consumer-store?expid=inf601",{"name":180,"description":181,"affiliateUrl":182},"Norton","Norton 360 delivers comprehensive antivirus protection, VPN, and identity theft monitoring. Scan files for threats before opening to keep your device secure.","http://buy.norton.com/aff_home?utm_campaign=en-ww_nor_n36_aff_nas_nau_nah_cj_nad_low:_sec_nat_mktc_norton_360"]