Add a JSX Compiler tool.

_config.yml

@@ -1,14 +1,14 @@
---- 
+---
 pygments: true
 name: React
 react_version: 0.3.0
-exclude: 
+exclude:
 - Gemfile
 - Gemfile.lock
 - README.md
 - Rakefile
-redcarpet: 
+redcarpet:
-  extensions: 
+  extensions:
   - fenced_code_blocks
 markdown: redcarpet
 baseurl: /react

_css/react.scss

@@ -3,6 +3,12 @@
 @import '_typography';
 @import '_solarized';
 
+@mixin code-typography {
+  font-family: 'source-code-pro', Menlo, 'Courier New', Consolas, monospace;
+  font-size: 13px;
+  line-height: 20px;
+}
+
 $skinnyContentWidth: 650px;
 $contentWidth: 920px;
 $contentPadding: 20px;
@@ -396,6 +402,26 @@ section.black content {
   padding-bottom: 40px;
 }
 
+/* JSX Compiler */
+
+.jsxCompiler {
+  margin: 0 auto;
+  padding-top: 20px;
+  width: 1220px;
+
+  #jsxCompiler {
+    margin-top: 20px;
+  }
+
+  .playgroundPreview {
+    padding: 14px;
+    width: 600px;
+
+    pre {
+      @include code-typography;
+    }
+  }
+}
 
 /* Button */
 
@@ -482,9 +508,7 @@ p {
 /* Code Mirror */
 
 div.CodeMirror pre, div.CodeMirror-linenumber, code {
-  font-family: 'source-code-pro', Menlo, 'Courier New', Consolas, monospace;
+  @include code-typography;
-  font-size: 13px;
-  line-height: 20px;
 }
 
 div.CodeMirror-linenumber:after {

_js/jsx-compiler.js

@@ -0,0 +1,19 @@
+/**
+ * @jsx React.DOM
+ */
+
+var HELLO_COMPONENT = "\
+/** @jsx React.DOM */\n\
+var HelloMessage = React.createClass({\n\
+  render: function() {\n\
+    return <div>{'Hello ' + this.props.name}</div>;\n\
+  }\n\
+});\n\
+\n\
+React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
+";
+
+React.renderComponent(
+  <ReactPlayground codeText={HELLO_COMPONENT} renderCode={true} />,
+  document.getElementById('jsxCompiler')
+);

_js/live_editor.js

@@ -111,9 +111,19 @@ var ReactPlayground = React.createClass({
     } catch (e) { }
 
     try {
-      eval(this.getDesugaredCode());
+      if (this.props.renderCode) {
+        React.renderComponent(
+          React.DOM.pre(null, this.getDesugaredCode()),
+          mountNode
+        );
+      } else {
+        eval(this.getDesugaredCode());
+      }
     } catch (e) {
-      React.renderComponent(<div content={e.toString()} class={{playgroundError: true}} />, mountNode);
+      React.renderComponent(
+        <div content={e.toString()} class={{playgroundError: true}} />,
+        mountNode
+      );
     }
   }
 });

docs/syntax.md

@@ -52,8 +52,11 @@ var app = <Nav color="blue"><Profile>click</Profile></Nav>;
 var app = Nav({color:'blue'}, Profile({}, 'click'));
 ```
 
-The [Getting Started](getting-started.html) guide shows how to setup JSX
+Use the [JSX Compiler](/react/jsx-compiler.html) to try out JSX and see how it
-compilation.
+desguars into native JavaScript.
+
+If you want to use JSX, the [Getting Started](getting-started.html) guide shows
+how to setup compilation.
 
 > Note:
 >

js/jsx-compiler.js

@@ -0,0 +1,19 @@
+/**
+ * @jsx React.DOM
+ */
+
+var HELLO_COMPONENT = "\
+/** @jsx React.DOM */\n\
+var HelloMessage = React.createClass({\n\
+  render: function() {\n\
+    return <div>{'Hello ' + this.props.name}</div>;\n\
+  }\n\
+});\n\
+\n\
+React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
+";
+
+React.renderComponent(
+  ReactPlayground( {codeText:HELLO_COMPONENT, renderCode:true}, null ),
+  document.getElementById('jsxCompiler')
+);

jsx-compiler.md

@@ -0,0 +1,14 @@
+---
+layout: default
+title: JSX Compiler Service
+id: jsx-compiler
+---
+<div class="jsxCompiler">
+  <h1>JSX Compiler</h1>
+  <p>
+    This tool demonstrates how <a href="/react/docs/syntax.html">JSX syntax</a>
+    is desguared into native JavaScript.
+  </p>
+  <div id="jsxCompiler"></div>
+  <script type="text/javascript" src="js/jsx-compiler.js"></script>
+</div>