[docs] Stop supporting our JSX compiler page

Link to Babel REPL directly instead.

_js/jsx-compiler.js

@@ -1,46 +0,0 @@
-var HELLO_COMPONENT = "\
-var HelloMessage = React.createClass({\n\
-  render: function() {\n\
-    return <div>Hello {this.props.name}</div>;\n\
-  }\n\
-});\n\
-\n\
-React.render(<HelloMessage name=\"John\" />, mountNode);\
-";
-
-function transformer(harmony, code) {
-  return JSXTransformer.transform(code, {harmony: harmony}).code;
-}
-
-var CompilerPlayground = React.createClass({
-  getInitialState: function() {
-    return {harmony: false};
-  },
-  handleHarmonyChange: function(e) {
-    this.setState({harmony: e.target.checked});
-  },
-  render: function() {
-    return (
-      <div>
-        <ReactPlayground
-          codeText={HELLO_COMPONENT}
-          renderCode={true}
-          transformer={transformer.bind(null, this.state.harmony)}
-          showCompiledJSTab={false}
-          showLineNumbers={true}
-        />
-        <label className="compiler-option">
-          <input
-            type="checkbox"
-            onChange={this.handleHarmonyChange}
-            checked={this.state.harmony} />{' '}
-          Enable ES6 transforms (<code>--harmony</code>)
-        </label>
-      </div>
-    );
-  }
-});
-React.render(
-  <CompilerPlayground />,
-  document.getElementById('jsxCompiler')
-);

css/react.scss

@@ -481,38 +481,6 @@ section.black content {
   padding-bottom: 40px;
 }
 
-/* JSX Compiler */
-
-.jsxCompiler {
-  margin: 0 auto;
-  padding-top: 20px;
-  width: 1220px;
-
-  label.compiler-option {
-    display: block;
-    margin-top: 5px;
-  }
-
-  #jsxCompiler {
-    margin-top: 20px;
-  }
-
-  .playgroundPreview {
-    padding: 0;
-    width: 600px;
-
-    pre {
-      @include code-typography;
-    }
-  }
-
-  .playgroundError {
-    // The compiler view kills padding in order to render the CodeMirror code
-    // more nicely. For the error view, put a padding back
-    padding: 15px 20px;
-  }
-}
-
 /* Button */
 
 .button {

docs/02-displaying-data.md

@@ -92,7 +92,7 @@ With JSX this becomes:
 
 We've found this has made building React apps easier and designers tend to prefer the syntax, but everyone has their own workflow, so **JSX is not required to use React.**
 
-JSX is very small. To learn more about it, see [JSX in depth](/react/docs/jsx-in-depth.html). Or see the transform in action in [our live JSX compiler](/react/jsx-compiler.html).
+JSX is very small. To learn more about it, see [JSX in depth](/react/docs/jsx-in-depth.html). Or see the transform in action in [the Babel REPL](https://babeljs.io/repl/).
 
 JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/jsx-gotchas.html) for some key differences.
 

docs/02.1-jsx-in-depth.md

@@ -82,7 +82,7 @@ var Nav = React.createClass({ });
 var Nav = React.createClass({displayName: "Nav", });
 ```
 
-Use the [JSX Compiler](/react/jsx-compiler.html) to try out JSX and see how it
+Use the [Babel REPL](https://babeljs.io/repl/) to try out JSX and see how it
 desugars into native JavaScript, and the
 [HTML to JSX converter](/react/html-jsx.html) to convert your existing HTML to
 JSX.

jsx-compiler.md

@@ -1,14 +1,9 @@
 ---
-layout: default
+layout: single
 title: JSX Compiler Service
 id: jsx-compiler
 ---
-<div class="jsxCompiler">
+
-  <h1>JSX Compiler</h1>
+**_This tool has been removed as JSXTransformer has been deprecated._**
-  <p>
+
-    This tool demonstrates how <a href="/react/docs/jsx-in-depth.html">JSX syntax</a>
+We recommend using another tool such as [the Babel REPL](https://babeljs.io/repl/).
-    is desugared into native JavaScript.
-  </p>
-  <div id="jsxCompiler"></div>
-  <script src="js/jsx-compiler.js"></script>
-</div>

tips/03-if-else-in-JSX.md

@@ -78,4 +78,4 @@ return (
 >
 > In the example above, an ES6 [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) is utilized to lexically bind the value of `this`.
 
-Try using it today with the [JSX compiler](/react/jsx-compiler.html).
+Try using it today with the [Babel REPL](https://babeljs.io/repl/).