lukechilds
/
react.dev
mirror of https://github.com/lukechilds/react.dev.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Move HTMLtoJSX page off React site. References https://github.com/reactjs/react-magic/issues/52 (#6608)

main
Daniel Lo Nigro 9 years ago
committed by Paul O’Shannessy
parent
b49356879f
commit
ce7528f0cd
8 changed files with 17 additions and 98 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 82
      _js/html-jsx.js
  2. 2
      docs/02.1-jsx-in-depth.it-IT.md
  3. 2
      docs/02.1-jsx-in-depth.ja-JP.md
  4. 2
      docs/02.1-jsx-in-depth.ko-KR.md
  5. 2
      docs/02.1-jsx-in-depth.md
  6. 2
      docs/02.1-jsx-in-depth.zh-CN.md
  7. 12
      html-jsx.html
  8. 11
      html-jsx.md

82
_js/html-jsx.js
View File

@ -1,82 +0,0 @@
/**
* Copyright 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
/**
* This is a web interface for the HTML to JSX converter contained in
* `html-jsx-lib.js`.
*/
;(function() {
var HELLO_COMPONENT = "\
<!-- Hello world -->\n\
<div class=\"awesome\" style=\"border: 1px solid red\">\n\
<label for=\"name\">Enter your name: </label>\n\
<input type=\"text\" id=\"name\" />\n\
</div>\n\
<p>Enter your HTML here</p>\
";
var HTMLtoJSXComponent = React.createClass({
getInitialState: function() {
return {
outputClassName: 'NewComponent',
createClass: true
};
},
onReactClassNameChange: function(evt) {
this.setState({ outputClassName: evt.target.value });
},
onCreateClassChange: function(evt) {
this.setState({ createClass: evt.target.checked });
},
setInput: function(input) {
this.setState({ input: input });
this.convertToJsx();
},
convertToJSX: function(input) {
var converter = new HTMLtoJSX({
outputClassName: this.state.outputClassName,
createClass: this.state.createClass
});
return converter.convert(input);
},
render: function() {
return (
<div>
<div id="options">
<label>
<input
type="checkbox"
checked={this.state.createClass}
onChange={this.onCreateClassChange} />
Create class
</label>
<label style={{display: this.state.createClass ? '' : 'none'}}>
·
Class name:
<input
type="text"
value={this.state.outputClassName}
onChange={this.onReactClassNameChange} />
</label>
</div>
<ReactPlayground
codeText={HELLO_COMPONENT}
renderCode={true}
transformer={this.convertToJSX}
showCompiledJSTab={false}
editorTabTitle="Live HTML Editor"
/>
</div>
);
}
});
ReactDOM.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
}());

2
docs/02.1-jsx-in-depth.it-IT.md
View File

@ -84,7 +84,7 @@ var Nav = React.createClass({displayName: "Nav", });
Usa la [REPL di Babel](https://babeljs.io/repl/) per provare il JSX e vedere come viene trasformato
in JavaScript nativo, e il
[convertitore da HTML a JSX](/react/html-jsx.html) per convertire il tuo HTML esistente a
[convertitore da HTML a JSX](http://magic.reactjs.net/htmltojsx.htm) per convertire il tuo HTML esistente a
JSX.
Se desideri utilizzare JSX, la guida [Primi Passi](/react/docs/getting-started-it-IT.html) ti mostra come impostare la compilazione.

2
docs/02.1-jsx-in-depth.ja-JP.md
View File

@ -80,7 +80,7 @@ var Nav = React.createClass({ });
var Nav = React.createClass({displayName: "Nav", });
```
JSXを試し、どのようにネイティブなJavaScriptに変換されるか見るには、[JSX Compiler](/react/jsx-compiler.html)を、すでに存在するHTMLをJSXに変換するには[HTMLからJSXへのコンバーター](/react/html-jsx.html)を使ってください。
JSXを試し、どのようにネイティブなJavaScriptに変換されるか見るには、[JSX Compiler](/react/jsx-compiler.html)を、すでに存在するHTMLをJSXに変換するには[HTMLからJSXへのコンバーター](http://magic.reactjs.net/htmltojsx.htm)を使ってください。
JSXを使いたい場合は、[始めてみましょう](/react/docs/getting-started-ja-JP.html)というガイドがどのようにコンパイルを設定するか示してくれます。

2
docs/02.1-jsx-in-depth.ko-KR.md
View File

@ -83,7 +83,7 @@ var Nav = React.createClass({ });
var Nav = React.createClass({displayName: "Nav", });
```
[바벨 REPL](https://babeljs.io/repl/)를 보면 JSX에서 어떻게 네이티브 JavaScript로 변환(desugars)하는지 볼 수 있고, [HTML-JSX 변환기](/react/html-jsx.html)는 이미 있는 HTML을 JSX로 변환해 줍니다.
[바벨 REPL](https://babeljs.io/repl/)를 보면 JSX에서 어떻게 네이티브 JavaScript로 변환(desugars)하는지 볼 수 있고, [HTML-JSX 변환기](http://magic.reactjs.net/htmltojsx.htm)는 이미 있는 HTML을 JSX로 변환해 줍니다.
JSX를 사용 하시려면, [시작하기](/react/docs/getting-started-ko-KR.html) 가이드에서 어떻게 컴파일을 하기 위해 설정하는지 보실 수 있습니다.

2
docs/02.1-jsx-in-depth.md
View File

@ -82,7 +82,7 @@ var Nav = React.createClass({ });
var Nav = React.createClass({displayName: "Nav", });
```
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.
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.
If you want to use JSX, the [Getting Started](/react/docs/getting-started.html) guide shows how to set up compilation.

2
docs/02.1-jsx-in-depth.zh-CN.md
View File

@ -82,7 +82,7 @@ var Nav = React.createClass({ });
var Nav = React.createClass({displayName: "Nav", });
```
使用 [JSX 编译器](/react/jsx-compiler.html) 来试用 JSX 并理解它是如何转换到原生 JavaScript，还有 [HTML 到 JSX 转换器](/react/html-jsx.html) 来把现有 HTML 转成 JSX。
使用 [JSX 编译器](/react/jsx-compiler.html) 来试用 JSX 并理解它是如何转换到原生 JavaScript，还有 [HTML 到 JSX 转换器](http://magic.reactjs.net/htmltojsx.htm) 来把现有 HTML 转成 JSX。
如果你要使用 JSX，这篇 [新手入门](/react/docs/getting-started.html) 教程来教你如何搭建环境。

12
html-jsx.html
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<title>HTML to JSX</title>
<!-- Github Pages lacks basic functionality such as permanent server-side
redirects, so the best we can do is a meta redirect -->
<meta http-equiv="refresh" content="0; url=http://magic.reactjs.net/htmltojsx.htm" />
</head>
<body>
This page has moved to <a href="http://magic.reactjs.net/htmltojsx.htm">http://magic.reactjs.net/htmltojsx.htm</a>
</body>
</html>

11
html-jsx.md
View File

@ -1,11 +0,0 @@
---
layout: default
title: HTML to JSX
id: html-jsx
---
<div class="jsxCompiler">
<h1>HTML to JSX Compiler</h1>
<div id="jsxCompiler"></div>
<script src="https://reactcommunity.org/react-magic/htmltojsx.min.js"></script>
<script src="js/html-jsx.js"></script>
</div>
Write Preview
Loading…
Cancel
Save