Move HTMLtoJSX page off React site. References https://github.com/reactjs/react-magic/issues/52 (#6608)
Daniel Lo Nigro committed
May 27, 2016 at 16:39 UTC
871116f001f0ab1c62954a6f44cbde570c70eb99
8 files changed
+17
-98
docs/_js/html-jsx.js
deleted
-82
@@ -1,82 +0,0 @@
1
-/**
2
- * Copyright 2013-present, Facebook, Inc.
3
- * All rights reserved.
4
- *
5
- * This source code is licensed under the BSD-style license found in the
6
- * LICENSE file in the root directory of this source tree. An additional grant
7
- * of patent rights can be found in the PATENTS file in the same directory.
8
- */
9
-
10
-/**
11
- * This is a web interface for the HTML to JSX converter contained in
12
- * `html-jsx-lib.js`.
13
- */
14
-;(function() {
15
-
16
-var HELLO_COMPONENT = "\
17
-<!-- Hello world -->\n\
18
-<div class=\"awesome\" style=\"border: 1px solid red\">\n\
19
- <label for=\"name\">Enter your name: </label>\n\
20
- <input type=\"text\" id=\"name\" />\n\
21
-</div>\n\
22
-<p>Enter your HTML here</p>\
23
-";
24
-
25
- var HTMLtoJSXComponent = React.createClass({
26
- getInitialState: function() {
27
- return {
28
- outputClassName: 'NewComponent',
29
- createClass: true
30
- };
31
- },
32
- onReactClassNameChange: function(evt) {
33
- this.setState({ outputClassName: evt.target.value });
34
- },
35
- onCreateClassChange: function(evt) {
36
- this.setState({ createClass: evt.target.checked });
37
- },
38
- setInput: function(input) {
39
- this.setState({ input: input });
40
- this.convertToJsx();
41
- },
42
- convertToJSX: function(input) {
43
- var converter = new HTMLtoJSX({
44
- outputClassName: this.state.outputClassName,
45
- createClass: this.state.createClass
46
- });
47
- return converter.convert(input);
48
- },
49
- render: function() {
50
- return (
51
- <div>
52
- <div id="options">
53
- <label>
54
- <input
55
- type="checkbox"
56
- checked={this.state.createClass}
57
- onChange={this.onCreateClassChange} />
58
- Create class
59
- </label>
60
- <label style={{display: this.state.createClass ? '' : 'none'}}>
61
- ·
62
- Class name:
63
- <input
64
- type="text"
65
- value={this.state.outputClassName}
66
- onChange={this.onReactClassNameChange} />
67
- </label>
68
- </div>
69
- <ReactPlayground
70
- codeText={HELLO_COMPONENT}
71
- renderCode={true}
72
- transformer={this.convertToJSX}
73
- showCompiledJSTab={false}
74
- editorTabTitle="Live HTML Editor"
75
- />
76
- </div>
77
- );
78
- }
79
- });
80
-
81
- ReactDOM.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
82
-}());
docs/docs/02.1-jsx-in-depth.it-IT.md
+1
-1
@@ -84,7 +84,7 @@ var Nav = React.createClass({displayName: "Nav", });
84
85
Usa la [REPL di Babel](https://babeljs.io/repl/) per provare il JSX e vedere come viene trasformato
86
in JavaScript nativo, e il
87
-[convertitore da HTML a JSX](/react/html-jsx.html) per convertire il tuo HTML esistente a
87
+[convertitore da HTML a JSX](http://magic.reactjs.net/htmltojsx.htm) per convertire il tuo HTML esistente a
88
JSX.
89
90
Se desideri utilizzare JSX, la guida [Primi Passi](/react/docs/getting-started-it-IT.html) ti mostra come impostare la compilazione.
docs/docs/02.1-jsx-in-depth.ja-JP.md
+1
-1
@@ -80,7 +80,7 @@ var Nav = React.createClass({ });
80
var Nav = React.createClass({displayName: "Nav", });
81
```
82
83
-JSXを試し、どのようにネイティブなJavaScriptに変換されるか見るには、[JSX Compiler](/react/jsx-compiler.html)を、すでに存在するHTMLをJSXに変換するには[HTMLからJSXへのコンバーター](/react/html-jsx.html)を使ってください。
83
+JSXを試し、どのようにネイティブなJavaScriptに変換されるか見るには、[JSX Compiler](/react/jsx-compiler.html)を、すでに存在するHTMLをJSXに変換するには[HTMLからJSXへのコンバーター](http://magic.reactjs.net/htmltojsx.htm)を使ってください。
84
85
JSXを使いたい場合は、[始めてみましょう](/react/docs/getting-started-ja-JP.html)というガイドがどのようにコンパイルを設定するか示してくれます。
86
docs/docs/02.1-jsx-in-depth.ko-KR.md
+1
-1
@@ -83,7 +83,7 @@ var Nav = React.createClass({ });
83
var Nav = React.createClass({displayName: "Nav", });
84
```
85
86
-[바벨 REPL](https://babeljs.io/repl/)를 보면 JSX에서 어떻게 네이티브 JavaScript로 변환(desugars)하는지 볼 수 있고, [HTML-JSX 변환기](/react/html-jsx.html)는 이미 있는 HTML을 JSX로 변환해 줍니다.
86
+[바벨 REPL](https://babeljs.io/repl/)를 보면 JSX에서 어떻게 네이티브 JavaScript로 변환(desugars)하는지 볼 수 있고, [HTML-JSX 변환기](http://magic.reactjs.net/htmltojsx.htm)는 이미 있는 HTML을 JSX로 변환해 줍니다.
87
88
JSX를 사용 하시려면, [시작하기](/react/docs/getting-started-ko-KR.html) 가이드에서 어떻게 컴파일을 하기 위해 설정하는지 보실 수 있습니다.
89
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 [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.
85
+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](http://magic.reactjs.net/htmltojsx.htm) to convert your existing HTML to JSX.
86
87
If you want to use JSX, the [Getting Started](/react/docs/getting-started.html) guide shows how to set up compilation.
88
docs/docs/02.1-jsx-in-depth.zh-CN.md
+1
-1
@@ -82,7 +82,7 @@ var Nav = React.createClass({ });
82
var Nav = React.createClass({displayName: "Nav", });
83
```
84
85
-使用 [JSX 编译器](/react/jsx-compiler.html) 来试用 JSX 并理解它是如何转换到原生 JavaScript，还有 [HTML 到 JSX 转换器](/react/html-jsx.html) 来把现有 HTML 转成 JSX。
85
+使用 [JSX 编译器](/react/jsx-compiler.html) 来试用 JSX 并理解它是如何转换到原生 JavaScript，还有 [HTML 到 JSX 转换器](http://magic.reactjs.net/htmltojsx.htm) 来把现有 HTML 转成 JSX。
86
87
如果你要使用 JSX，这篇 [新手入门](/react/docs/getting-started.html) 教程来教你如何搭建环境。
88
docs/html-jsx.html
new
+12
@@ -0,0 +1,12 @@
1
+<!DOCTYPE html>
2
+<html>
3
+<head>
4
+ <title>HTML to JSX</title>
5
+ <!-- Github Pages lacks basic functionality such as permanent server-side
6
+ redirects, so the best we can do is a meta redirect -->
7
+ <meta http-equiv="refresh" content="0; url=http://magic.reactjs.net/htmltojsx.htm" />
8
+</head>
9
+<body>
10
+ This page has moved to <a href="http://magic.reactjs.net/htmltojsx.htm">http://magic.reactjs.net/htmltojsx.htm</a>
11
+</body>
12
+</html>
docs/html-jsx.md
deleted
-11
@@ -1,11 +0,0 @@
1
----
2
-layout: default
3
-title: HTML to JSX
4
-id: html-jsx
5
----
6
-<div class="jsxCompiler">
7
- <h1>HTML to JSX Compiler</h1>
8
- <div id="jsxCompiler"></div>
9
- <script src="https://reactcommunity.org/react-magic/htmltojsx.min.js"></script>
10
- <script src="js/html-jsx.js"></script>
11
-</div>