mirror of
https://github.com/zebrajr/react.git
synced 2026-01-15 12:15:22 +00:00
[docs] Stop supporting our JSX compiler page
Link to Babel REPL directly instead.
This commit is contained in:
@@ -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')
|
||||
);
|
||||
@@ -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 {
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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/).
|
||||
|
||||
@@ -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/).
|
||||
|
||||
Reference in New Issue
Block a user