JSX
JSX is a syntax used in React that lets you write UI structure inside JavaScript.
It looks similar to HTML, but it is compiled into JavaScript.
Mental Model
JSX is where markup and component logic meet.
Instead of separating the UI structure from the JavaScript completely, React uses JSX so a component can return the interface it controls.
function Greeting({ name }) {
return <h1>Hello, {name}</h1>
}Important Differences From HTML
| HTML | JSX |
|---|---|
class | className |
for | htmlFor |
| string attributes | JavaScript expressions with {} |
| inline style string | style object |