Cleanup "JSX in Depth"
This commit is contained in:
parent
59f52bce04
commit
b9b300fcbd
|
@ -6,12 +6,12 @@ permalink: jsx-in-depth.html
|
|||
prev: displaying-data.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.
|
||||
|
||||
## 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
|
||||
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.
|
||||
- It's familiar for those who have used MXML or XAML.
|
||||
|
||||
|
||||
## The Transform
|
||||
|
||||
JSX transforms XML-like syntax into native JavaScript. It turns XML elements and
|
||||
attributes into function calls and objects, respectively.
|
||||
JSX transforms from an XML-like syntax into native JavaScript. XML elements and
|
||||
attributes are transformed into function calls and objects, respectively.
|
||||
|
||||
```javascript
|
||||
var Nav;
|
||||
// Input (JSX):
|
||||
var app = <Nav color="blue" />;
|
||||
// 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.
|
||||
|
@ -48,7 +49,7 @@ var Nav, Profile;
|
|||
// Input (JSX):
|
||||
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
|
||||
// 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
|
||||
|
@ -62,6 +63,7 @@ how to setup compilation.
|
|||
> Details about the code transform are given here to increase understanding, but
|
||||
> your code should not rely on these implementation details.
|
||||
|
||||
|
||||
## React and JSX
|
||||
|
||||
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
|
||||
`React.createClass()`.
|
||||
|
||||
**React DOM Components**
|
||||
### React DOM Components
|
||||
|
||||
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>;
|
||||
```
|
||||
|
||||
**React Component Components**
|
||||
### React Component Components
|
||||
|
||||
To construct an instance of a composite component, create a variable that
|
||||
references the class.
|
||||
|
@ -113,7 +115,7 @@ var Nav;
|
|||
// Input (JSX):
|
||||
var tree = <Nav><span /></Nav>;
|
||||
// Output (JS):
|
||||
var tree = Nav(null, React.DOM.span(null, null));
|
||||
var tree = Nav(null, React.DOM.span(null));
|
||||
```
|
||||
|
||||
> Remember:
|
||||
|
@ -144,7 +146,7 @@ Likewise, JavaScript expressions may be used to express children:
|
|||
// Input (JSX):
|
||||
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
|
||||
// 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
|
||||
|
|
Loading…
Reference in New Issue