|
@ -6,12 +6,12 @@ permalink: jsx-in-depth.html |
|
|
prev: displaying-data.html |
|
|
prev: displaying-data.html |
|
|
next: jsx-gotchas.html |
|
|
next: jsx-gotchas.html |
|
|
--- |
|
|
--- |
|
|
JSX is a JavaScript XML syntax transform recommended (but not required) for use |
|
|
|
|
|
|
|
|
JSX is a JavaScript XML syntax transform recommended for use |
|
|
with React. |
|
|
with React. |
|
|
|
|
|
|
|
|
## Why JSX? |
|
|
|
|
|
|
|
|
|
|
|
First of all, **don't use JSX if you don't like it!** |
|
|
## Why JSX? |
|
|
|
|
|
|
|
|
React works out of the box without JSX. Simply construct your markup using the |
|
|
React works out of the box without JSX. Simply construct your markup using the |
|
|
functions on `React.DOM`. For example, here's how to construct a simple link: |
|
|
functions on `React.DOM`. For example, here's how to construct a simple link: |
|
@ -26,17 +26,18 @@ We recommend using JSX for many reasons: |
|
|
- Designers are more comfortable making changes. |
|
|
- Designers are more comfortable making changes. |
|
|
- It's familiar for those who have used MXML or XAML. |
|
|
- It's familiar for those who have used MXML or XAML. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## The Transform |
|
|
## The Transform |
|
|
|
|
|
|
|
|
JSX transforms XML-like syntax into native JavaScript. It turns XML elements and |
|
|
JSX transforms from an XML-like syntax into native JavaScript. XML elements and |
|
|
attributes into function calls and objects, respectively. |
|
|
attributes are transformed into function calls and objects, respectively. |
|
|
|
|
|
|
|
|
```javascript |
|
|
```javascript |
|
|
var Nav; |
|
|
var Nav; |
|
|
// Input (JSX): |
|
|
// Input (JSX): |
|
|
var app = <Nav color="blue" />; |
|
|
var app = <Nav color="blue" />; |
|
|
// Output (JS): |
|
|
// Output (JS): |
|
|
var app = Nav({color:'blue'}, null); |
|
|
var app = Nav({color:"blue"}); |
|
|
``` |
|
|
``` |
|
|
|
|
|
|
|
|
Notice that in order to use `<Nav />`, the `Nav` variable must be in scope. |
|
|
Notice that in order to use `<Nav />`, the `Nav` variable must be in scope. |
|
@ -48,7 +49,7 @@ var Nav, Profile; |
|
|
// Input (JSX): |
|
|
// Input (JSX): |
|
|
var app = <Nav color="blue"><Profile>click</Profile></Nav>; |
|
|
var app = <Nav color="blue"><Profile>click</Profile></Nav>; |
|
|
// Output (JS): |
|
|
// Output (JS): |
|
|
var app = Nav({color:'blue'}, Profile(null, 'click')); |
|
|
var app = Nav({color:"blue"}, Profile(null, "click")); |
|
|
``` |
|
|
``` |
|
|
|
|
|
|
|
|
Use the [JSX Compiler](/react/jsx-compiler.html) to try out JSX and see how it |
|
|
Use the [JSX Compiler](/react/jsx-compiler.html) to try out JSX and see how it |
|
@ -62,6 +63,7 @@ how to setup compilation. |
|
|
> Details about the code transform are given here to increase understanding, but |
|
|
> Details about the code transform are given here to increase understanding, but |
|
|
> your code should not rely on these implementation details. |
|
|
> your code should not rely on these implementation details. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## React and JSX |
|
|
## React and JSX |
|
|
|
|
|
|
|
|
React and JSX are independent technologies, but JSX was primarily built with |
|
|
React and JSX are independent technologies, but JSX was primarily built with |
|
@ -71,7 +73,7 @@ React in mind. The two valid uses of JSX are: |
|
|
- To construct instances of composite components created with |
|
|
- To construct instances of composite components created with |
|
|
`React.createClass()`. |
|
|
`React.createClass()`. |
|
|
|
|
|
|
|
|
**React DOM Components** |
|
|
### React DOM Components |
|
|
|
|
|
|
|
|
To construct a `<div>` is to create a variable that refers to `React.DOM.div`. |
|
|
To construct a `<div>` is to create a variable that refers to `React.DOM.div`. |
|
|
|
|
|
|
|
@ -80,7 +82,7 @@ var div = React.DOM.div; |
|
|
var app = <div className="appClass">Hello, React!</div>; |
|
|
var app = <div className="appClass">Hello, React!</div>; |
|
|
``` |
|
|
``` |
|
|
|
|
|
|
|
|
**React Component Components** |
|
|
### React Component Components |
|
|
|
|
|
|
|
|
To construct an instance of a composite component, create a variable that |
|
|
To construct an instance of a composite component, create a variable that |
|
|
references the class. |
|
|
references the class. |
|
@ -113,7 +115,7 @@ var Nav; |
|
|
// Input (JSX): |
|
|
// Input (JSX): |
|
|
var tree = <Nav><span /></Nav>; |
|
|
var tree = <Nav><span /></Nav>; |
|
|
// Output (JS): |
|
|
// Output (JS): |
|
|
var tree = Nav(null, React.DOM.span(null, null)); |
|
|
var tree = Nav(null, React.DOM.span(null)); |
|
|
``` |
|
|
``` |
|
|
|
|
|
|
|
|
> Remember: |
|
|
> Remember: |
|
@ -144,7 +146,7 @@ Likewise, JavaScript expressions may be used to express children: |
|
|
// Input (JSX): |
|
|
// Input (JSX): |
|
|
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>; |
|
|
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>; |
|
|
// Output (JS): |
|
|
// Output (JS): |
|
|
var content = Container(null, window.isLoggedIn ? Nav(null, null) : Login(null, null)); |
|
|
var content = Container(null, window.isLoggedIn ? Nav(null) : Login(null)); |
|
|
``` |
|
|
``` |
|
|
|
|
|
|
|
|
### Comments |
|
|
### Comments |
|
|