Browse Source

Cleanup "JSX in Depth"

main
Paul O’Shannessy 12 years ago
parent
commit
45fe80393c
  1. 24
      docs/02.1-jsx-in-depth.md

24
docs/02.1-jsx-in-depth.md

@ -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…
Cancel
Save