[docs] Stop supporting our JSX compiler page
Link to Babel REPL directly instead.
Paul O’Shannessy committed
Sep 10, 2015 at 10:26 UTC
411ed31cb1d74759d0e913f1d89f832b8d43289f
6 files changed
+8
-91
docs/_js/jsx-compiler.js
deleted
-46
@@ -1,46 +0,0 @@
1
-var HELLO_COMPONENT = "\
2
-var HelloMessage = React.createClass({\n\
3
- render: function() {\n\
4
- return <div>Hello {this.props.name}</div>;\n\
5
- }\n\
6
-});\n\
7
-\n\
8
-React.render(<HelloMessage name=\"John\" />, mountNode);\
9
-";
10
-
11
-function transformer(harmony, code) {
12
- return JSXTransformer.transform(code, {harmony: harmony}).code;
13
-}
14
-
15
-var CompilerPlayground = React.createClass({
16
- getInitialState: function() {
17
- return {harmony: false};
18
- },
19
- handleHarmonyChange: function(e) {
20
- this.setState({harmony: e.target.checked});
21
- },
22
- render: function() {
23
- return (
24
- <div>
25
- <ReactPlayground
26
- codeText={HELLO_COMPONENT}
27
- renderCode={true}
28
- transformer={transformer.bind(null, this.state.harmony)}
29
- showCompiledJSTab={false}
30
- showLineNumbers={true}
31
- />
32
- <label className="compiler-option">
33
- <input
34
- type="checkbox"
35
- onChange={this.handleHarmonyChange}
36
- checked={this.state.harmony} />{' '}
37
- Enable ES6 transforms (<code>--harmony</code>)
38
- </label>
39
- </div>
40
- );
41
- }
42
-});
43
-React.render(
44
- <CompilerPlayground />,
45
- document.getElementById('jsxCompiler')
46
-);
docs/css/react.scss
-32
@@ -481,38 +481,6 @@ section.black content {
481
padding-bottom: 40px;
482
}
483
484
-/* JSX Compiler */
485
-
486
-.jsxCompiler {
487
- margin: 0 auto;
488
- padding-top: 20px;
489
- width: 1220px;
490
-
491
- label.compiler-option {
492
- display: block;
493
- margin-top: 5px;
494
- }
495
-
496
- #jsxCompiler {
497
- margin-top: 20px;
498
- }
499
-
500
- .playgroundPreview {
501
- padding: 0;
502
- width: 600px;
503
-
504
- pre {
505
- @include code-typography;
506
- }
507
- }
508
-
509
- .playgroundError {
510
- // The compiler view kills padding in order to render the CodeMirror code
511
- // more nicely. For the error view, put a padding back
512
- padding: 15px 20px;
513
- }
514
-}
515
-
484
/* Button */
485
486
.button {
docs/docs/02-displaying-data.md
+1
-1
@@ -92,7 +92,7 @@ With JSX this becomes:
92
93
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.**
94
95
-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).
95
+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/).
96
97
JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/jsx-gotchas.html) for some key differences.
98
docs/docs/02.1-jsx-in-depth.md
+1
-1
@@ -82,7 +82,7 @@ var Nav = React.createClass({ });
82
var Nav = React.createClass({displayName: "Nav", });
83
```
84
85
-Use the [JSX Compiler](/react/jsx-compiler.html) to try out JSX and see how it
85
+Use the [Babel REPL](https://babeljs.io/repl/) to try out JSX and see how it
86
desugars into native JavaScript, and the
87
[HTML to JSX converter](/react/html-jsx.html) to convert your existing HTML to
88
JSX.
docs/jsx-compiler.md
+5
-10
@@ -1,14 +1,9 @@
1
---
2
-layout: default
2
+layout: single
3
title: JSX Compiler Service
4
id: jsx-compiler
5
---
6
-<div class="jsxCompiler">
7
- <h1>JSX Compiler</h1>
8
- <p>
9
- This tool demonstrates how <a href="/react/docs/jsx-in-depth.html">JSX syntax</a>
10
- is desugared into native JavaScript.
11
- </p>
12
- <div id="jsxCompiler"></div>
13
- <script src="js/jsx-compiler.js"></script>
14
-</div>
6
+
7
+**_This tool has been removed as JSXTransformer has been deprecated._**
8
+
9
+We recommend using another tool such as [the Babel REPL](https://babeljs.io/repl/).
docs/tips/03-if-else-in-JSX.md
+1
-1
@@ -78,4 +78,4 @@ return (
78
>
79
> 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`.
80
81
-Try using it today with the [JSX compiler](/react/jsx-compiler.html).
81
+Try using it today with the [Babel REPL](https://babeljs.io/repl/).