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

Loading…
Cancel
Save