From 45fe80393cb9f2fdfeb5362800c47fe4b523bfa4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= <paul@oshannessy.com>
Date: Tue, 16 Jul 2013 23:24:56 -0700
Subject: [PATCH] Cleanup "JSX in Depth"

---
 docs/02.1-jsx-in-depth.md | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/docs/02.1-jsx-in-depth.md b/docs/02.1-jsx-in-depth.md
index 871c0b30..2c67b0c8 100644
--- a/docs/02.1-jsx-in-depth.md
+++ b/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