JSX (JavaScript Syntax Extension and occasionally referred as JavaScript XML) is a React extension to the
JavaScript
JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of Website, websites use JavaScript on the Client (computing), client side ...
language syntax which provides a way to structure component rendering using syntax familiar to many developers. It is similar in appearance to
HTML
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScri ...
.
React components are typically written using JSX, although they do not have to be as components may also be written in pure JavaScript. JSX is created by Meta (formerly
Facebook
Facebook is an online social media and social networking service owned by American company Meta Platforms. Founded in 2004 by Mark Zuckerberg with fellow Harvard College students and roommates Eduardo Saverin, Andrew McCollum, Dustin ...
). It is similar to another extension syntax created by Meta for
PHP
PHP is a General-purpose programming language, general-purpose scripting language geared toward web development. It was originally created by Danish-Canadian programmer Rasmus Lerdorf in 1993 and released in 1995. The PHP reference implementati ...
Multiple elements on the same level need to be wrapped in a single React element such as the
element shown above, a fragment delineated by or in its shorthand form <>, or returned as an array.
Attributes
JSX provides a range of element attributes designed to mirror those provided by HTML. Custom attributes can also be passed to the component. All attributes will be received by the component as props.
JavaScript expressions
JavaScript expressions (but not statements) can be used inside JSX with curly brackets :
The example above will render:
11
Conditional expressions
If–else statements cannot be used inside JSX but conditional expressions can be used instead.
The example below will render as the string 'true' because i is equal to 1.
const App = () =>
The above will render:
true
Functions and JSX can be used in conditionals:
const App = () =>
The above will render:
Section 1(first)
Section 2
Section 3
Code written in JSX requires conversion with a tool such as Babel before it can be understood by web browsers. This processing is generally performed during a software build process before the application is deployed.