HOME

TheInfoList



OR:

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 ...
called XHP.


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) 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.


See also

* ECMAScript for XML


References


External links

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