From 411ed31cb1d74759d0e913f1d89f832b8d43289f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= <paul@oshannessy.com>
Date: Thu, 10 Sep 2015 10:26:20 -0700
Subject: [PATCH] [docs] Stop supporting our JSX compiler page

Link to Babel REPL directly instead.
---
 docs/_js/jsx-compiler.js        | 46 ---------------------------------
 docs/css/react.scss             | 32 -----------------------
 docs/docs/02-displaying-data.md |  2 +-
 docs/docs/02.1-jsx-in-depth.md  |  2 +-
 docs/jsx-compiler.md            | 15 ++++-------
 docs/tips/03-if-else-in-JSX.md  |  2 +-
 6 files changed, 8 insertions(+), 91 deletions(-)
 delete mode 100644 docs/_js/jsx-compiler.js

diff --git a/docs/_js/jsx-compiler.js b/docs/_js/jsx-compiler.js
deleted file mode 100644
index bd1f2d8a1c..0000000000
--- a/docs/_js/jsx-compiler.js
+++ /dev/null
@@ -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')
-);
diff --git a/docs/css/react.scss b/docs/css/react.scss
index 75df4d3e6b..3400c9af9a 100644
--- a/docs/css/react.scss
+++ b/docs/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 {
diff --git a/docs/docs/02-displaying-data.md b/docs/docs/02-displaying-data.md
index f4f00123d2..f9a0b8d265 100644
--- a/docs/docs/02-displaying-data.md
+++ b/docs/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.
 
diff --git a/docs/docs/02.1-jsx-in-depth.md b/docs/docs/02.1-jsx-in-depth.md
index eb723fe882..d1c91b8f2a 100644
--- a/docs/docs/02.1-jsx-in-depth.md
+++ b/docs/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.
diff --git a/docs/jsx-compiler.md b/docs/jsx-compiler.md
index 3c0482f178..bcfa64302c 100644
--- a/docs/jsx-compiler.md
+++ b/docs/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>
-  <p>
-    This tool demonstrates how <a href="/react/docs/jsx-in-depth.html">JSX syntax</a>
-    is desugared into native JavaScript.
-  </p>
-  <div id="jsxCompiler"></div>
-  <script src="js/jsx-compiler.js"></script>
-</div>
+
+**_This tool has been removed as JSXTransformer has been deprecated._**
+
+We recommend using another tool such as [the Babel REPL](https://babeljs.io/repl/).
diff --git a/docs/tips/03-if-else-in-JSX.md b/docs/tips/03-if-else-in-JSX.md
index 024dfb5cd5..f659b423d1 100644
--- a/docs/tips/03-if-else-in-JSX.md
+++ b/docs/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/).