diff --git a/docs/02.1-jsx-in-depth.md b/docs/02.1-jsx-in-depth.md index 871c0b300..2c67b0c8a 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 = ; // Output (JS): -var app = Nav({color:'blue'}, null); +var app = Nav({color:"blue"}); ``` Notice that in order to use ``, the `Nav` variable must be in scope. @@ -48,7 +49,7 @@ var Nav, Profile; // Input (JSX): var app = ; // 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 `