|
===JSX===
{{main|JSX (JavaScript)|l1=JSX}}
JSX, or JavaScript [[XML]], is an extension to the JavaScript language syntax.<ref>{{cite web|title=Draft: JSX Specification|url=https://facebook.github.io/jsx/|website=JSX|publisher=Facebook|access-date=7 April 2018}}</ref> Similar in appearance to HTML, JSX provides a way to structure component rendering using syntax familiar to many developers. React components are typically written using JSX, although they do not have to be (components may also be written in pure JavaScript). JSX is similar to another extension syntax created by Facebook for [[PHP]] called [[XHP]].
An example of JSX code:
}
</syntaxhighlight>
;Nested elements
Multiple elements on the same level need to be wrapped in a single React element such as the <code><nowiki><div></nowiki></code> element shown above, a fragment delineated by <code><nowiki><Fragment></nowiki></code> or in its shorthand form <code><nowiki><></nowiki></code>, or returned as an array.<ref>{{cite web |url=https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings |title=React v16.0§New render return types: fragments and strings |last=Clark |first=Andrew |date=September 26, 2017 |website=React Blog}}</ref><ref>{{cite web |url=https://reactjs.org/docs/react-component.html#render |title=React.Component: render |website=React}}</ref>
;Attributes
JSX provides a range of element attributes designed to mirror those provided by HTML. Custom attributes can also be passed to the component.<ref>{{cite web |url=https://reactjs.org/blog/2017/09/26/react-v16.0.html#support-for-custom-dom-attributes |title=React v16.0§Support for custom DOM attributes |last=Clark |first=Andrew |date=September 26, 2017 |website=React Blog}}</ref> All attributes will be received by the component as props.
;JavaScript expressions
JavaScript [[Expression (computer science)|expressions]] (but not [[Statement (computer science)|statements]]) can be used inside JSX with curly brackets <code>{}</code>:
<syntaxhighlight lang="js">
<h1>{10+1}</h1>
</syntaxhighlight>
The example above will render
<syntaxhighlight lang="html">
<h1>11</h1>
</syntaxhighlight>
;Conditional statements
[[Conditional (computer programming)|If–else statements]] cannot be used inside JSX but conditional expressions can be used instead.
The example below will render <code>{ i === 1 ? 'true' : 'false' }</code> as the string <code>'true'</code> because <code>i</code> is equal to 1.
<syntaxhighlight lang="js" line="1">
class App extends React.Component {
render() {
const i = 1;
return (
<div>
<h1>{ i === 1 ? 'true' : 'false' }</h1>
</div>
);
}
}
</syntaxhighlight>
The above will render:
<syntaxhighlight lang="html">
<div>
<h1>true</h1>
</div>
</syntaxhighlight>
Functions and JSX can be used in conditionals:
<syntaxhighlight lang="js+genshitext" line="1">
class App extends React.Component {
render() {
const sections = [1, 2, 3];
return (
<div>
{sections.length > 0 && sections.map(n => (
/* 'key' is used by react to keep track of list items and their changes */
/* Each 'key' must be unique */
<div key={"section-" + n}>Section {n}</div>
))}
</div>
);
}
}
</syntaxhighlight>
The above will render:
<syntaxhighlight lang="html">
<div>
<div>Section 1</div>
<div>Section 2</div>
<div>Section 3</div>
</div>
</syntaxhighlight>
Code written in JSX requires conversion with a tool such as [[Babel (compiler)|Babel]] before it can be understood by web browsers.<ref>{{Cite book|url=https://books.google.com/books?id=Tg9QDwAAQBAJ|title=React for Real: Front-End Code, Untangled|last=Fischer|first=Ludovico|date=2017-09-06|publisher=Pragmatic Bookshelf|isbn=9781680504484|language=en}}</ref> This processing is generally performed during a [[software build]] process before the application is [[Software deployment|deployed]].
===Architecture beyond HTML===
| 