JSX: Putting HTML Inside Your JavaScript Components
JSX is a syntax extension that lets you write HTML-like markup directly inside your JavaScript files, keeping UI logic and structure together. It's the standard way to define a React component's output. The footgun is that JSX is stricter than HTML.
Why it exists
For years, web development separated content (HTML), design (CSS), and logic (JavaScript) into different files. But as web apps became more interactive, JavaScript logic increasingly determined the HTML content. This made the separation awkward. React puts rendering logic and markup together in the same place—components—using JSX to keep them in sync.
The mental model
Think of JSX as a templating language that looks like HTML but is embedded inside JavaScript. It is not a string, nor is it HTML. It's a special syntax that gets compiled into plain JavaScript objects. This lets you describe your UI declaratively, saying what you want to see, and letting React handle how to update the browser DOM to match.
How it works
When you write JSX in a component, you're not writing directly to the browser. A tool called a compiler (like Babel) transforms your JSX into a series of React.createElement() function calls. These functions create JavaScript objects that describe your UI tree. React then reads these objects and uses them to efficiently create and update the actual HTML elements in the DOM. Although JSX and React are separate technologies, they are almost always used together.
When to use it
Use JSX for defining the UI of all your React components. It is the idiomatic and preferred method in the vast majority of React codebases. Its HTML-like syntax is more concise, readable, and easier to debug than writing raw React.createElement() calls by hand. It makes visualizing the component structure at a glance much simpler.
When not to use it
You can technically write React applications without JSX, but it's verbose and rarely practical. The main reason to avoid it would be in an environment where you cannot have a build step to compile the JSX into JavaScript. In such cases, you would have to write the React.createElement() function calls manually, which is cumbersome and error-prone.
One canonical example
A core rule of JSX is that a component must return a single root element. Returning two adjacent elements, like an <h1> and an <img>, will throw an error. To fix this, you must wrap them in a single parent. You can use a , which adds an actual div element to the final HTML. Alternatively, you can use a Fragment, written as <> and </>, which groups the elements for React but doesn't add any extra node to the DOM.
Interview question
What is the fundamental nature of JSX in a React application?
- a.It allows developers to write raw HTML directly within JavaScript files for browser interpretation.
- b.It is a new, standalone programming language for defining user interfaces.
- c.It is a specialized string format that React parses directly into DOM elements.
- d.It is a syntax extension that a build tool converts into standard JavaScript function calls.Correct
Why? this is the answer
The card explains that JSX is a "syntax extension" that "gets compiled into plain JavaScript objects" by a "compiler (like Babel)" into "React.createElement() function calls." Option C is incorrect because the card explicitly states JSX is "not a string, nor is it HTML."
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles