JSX (JavaScript)
   HOME

TheInfoList



OR:

JSX (sometimes referred to as JavaScript XML) is an XML-like extension to the
JavaScript JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior. Web browsers have ...
language syntax. Initially created by
Facebook Facebook is a social media and social networking service owned by the American technology conglomerate Meta Platforms, Meta. Created in 2004 by Mark Zuckerberg with four other Harvard College students and roommates, Eduardo Saverin, Andre ...
for use with React, JSX has been adopted by multiple
web framework A web framework (WF) or web application framework (WAF) is a software framework that is designed to support the development of web applications including web services, web resources, and web APIs. Web frameworks provide a standard way to build a ...
s. Being a
syntactic sugar In computer science, syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express. It makes the language "sweeter" for human use: things can be expressed more clearly, more concisely, or in an ...
, JSX is generally transpiled into nested JavaScript function calls structurally similar to the original JSX.


Markup

An example of JSX code: const App = () =>


Nested elements

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 Statement or statements may refer to: Common uses *Statement (computer science), the smallest standalone element of an imperative programming language * Statement (logic and semantics), declarative sentence that is either true or false *Statement, ...
) 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 Babel is a name used in the Hebrew Bible for the city of Babylon and may refer to: Arts and media Written works Books *Babel (book), ''Babel'' (book), by Patti Smith * Babel (2012 manga), ''Babel'' (2012 manga), by Narumi Shigematsu * Babel (20 ...
before it can be understood by web browsers. This processing is generally performed during a
software build A software build is the process of converting source code files into standalone artifact (software development), software artifact(s) that can be run on a computer, or the result of doing so. In software production, builds optimize software for pe ...
process before the application is deployed.


See also

*
ECMAScript for XML ECMAScript for XML (E4X) was an extension to ECMAScript (which includes ActionScript, JavaScript, and JScript) to add native support for XML. The goal was to provide a simpler alternative to the DOM interface for accessing XML documents. E4X added ...


References


External links

* {{Official website, https://facebook.github.io/jsx/, Draft: JSX Specification 2014 software Facebook software JavaScript Open formats XML markup languages