A syntax extension for JavaScript that lets developers write HTML-like code within JavaScript. It’s most commonly used with React, a popular JavaScript library for building user interfaces. JSX code gets transpiled (converted) into standard JavaScript by tools like Babel before running in the browser.
React.createElement('h1', null, 'Hello, world!');<h1>Hello, world!</h1>function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}What JSX Looks Like
Instead of writing UI code like this: “`javascript React.createElement('h1', null, 'Hello, world!'); “` You can write: “`javascript <h1>Hello, world!</h1> “`
Why JSX Is Useful
- Visual Clarity: Writing HTML-like code makes the UI structure more readable and familiar to web developers.
- Component-Friendly: JSX enables React components to be written in a declarative way, which makes code easier to maintain and understand.
- Full JavaScript Power: You can embed JavaScript expressions inside JSX using curly braces ({}), such as {user.name} or {items.map(…)}.
History and Background
- ECMAScript for XML (E4X): JSX is inspired by E4X, an extension to ECMAScript that added native support for XML. E4X was standardized by Ecma International in the ECMA-357 standard, with the first edition published in June 2004 and the second edition in December 2005. However, E4X was deprecated by the Mozilla Foundation in 2014 and withdrawn by ISO/IEC in 2021.
- First Implementation: The first implementation of E4X was designed by Terry Lucas and John Schneider and appeared in BEA's Weblogic Workshop 7.0, released in February 2003.
Example
“`javascript function Welcome(props) { return <h1>Hello, {props.name}</h1>; } “` This function is a React component that returns a JSX element. It looks like HTML but is really JavaScript under the hood.
Summary
JSX isn’t required to use React, but it makes building interfaces faster and more intuitive. It’s what allows React developers to combine markup and logic in the same file.
