The library for web and native user interfaces.
Cleanup "JSX in Depth"
Paul O’Shannessy committed
Jul 16, 2013 at 23:24 UTC
b9b300fcbd9b07a98486ba27827af662f99106b0
1 file changed
+13
-11
docs/docs/02.1-jsx-in-depth.md
+13
-11
@@ -6,12 +6,12 @@ permalink: jsx-in-depth.html
6
prev: displaying-data.html
7
next: jsx-gotchas.html
8
---
9
-JSX is a JavaScript XML syntax transform recommended (but not required) for use
9
+
10
+JSX is a JavaScript XML syntax transform recommended for use
11
with React.
12
12
-## Why JSX?
13
14
-First of all, **don't use JSX if you don't like it!**
14
+## Why JSX?
15
16
React works out of the box without JSX. Simply construct your markup using the
17
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:
26
- Designers are more comfortable making changes.
27
- It's familiar for those who have used MXML or XAML.
28
29
+
30
## The Transform
31
31
-JSX transforms XML-like syntax into native JavaScript. It turns XML elements and
32
-attributes into function calls and objects, respectively.
32
+JSX transforms from an XML-like syntax into native JavaScript. XML elements and
33
+attributes are transformed into function calls and objects, respectively.
34
35
```javascript
36
var Nav;
37
// Input (JSX):
38
var app = <Nav color="blue" />;
39
// Output (JS):
39
-var app = Nav({color:'blue'}, null);
40
+var app = Nav({color:"blue"});
41
```
42
43
Notice that in order to use `<Nav />`, the `Nav` variable must be in scope.
@@ -48,7 +49,7 @@ var Nav, Profile;
49
// Input (JSX):
50
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
51
// Output (JS):
51
-var app = Nav({color:'blue'}, Profile(null, 'click'));
52
+var app = Nav({color:"blue"}, Profile(null, "click"));
53
```
54
55
Use the [JSX Compiler](/react/jsx-compiler.html) to try out JSX and see how it
@@ -62,6 +63,7 @@ how to setup compilation.
63
> Details about the code transform are given here to increase understanding, but
64
> your code should not rely on these implementation details.
65
66
+
67
## React and JSX
68
69
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:
73
- To construct instances of composite components created with
74
`React.createClass()`.
75
74
-**React DOM Components**
76
+### React DOM Components
77
78
To construct a `<div>` is to create a variable that refers to `React.DOM.div`.
79
@@ -80,7 +82,7 @@ var div = React.DOM.div;
82
var app = <div className="appClass">Hello, React!</div>;
83
```
84
83
-**React Component Components**
85
+### React Component Components
86
87
To construct an instance of a composite component, create a variable that
88
references the class.
@@ -113,7 +115,7 @@ var Nav;
115
// Input (JSX):
116
var tree = <Nav><span /></Nav>;
117
// Output (JS):
116
-var tree = Nav(null, React.DOM.span(null, null));
118
+var tree = Nav(null, React.DOM.span(null));
119
```
120
121
> Remember:
@@ -144,7 +146,7 @@ Likewise, JavaScript expressions may be used to express children:
146
// Input (JSX):
147
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
148
// Output (JS):
147
-var content = Container(null, window.isLoggedIn ? Nav(null, null) : Login(null, null));
149
+var content = Container(null, window.isLoggedIn ? Nav(null) : Login(null));
150
```
151
152
### Comments