Skip to content

Commit 3ade7db

Browse files
Daniel15Daniel15
committed
Move HTML to JSX page from the React site. References reactjs#52 
1 parent 4adebdf commit 3ade7db

File tree

5 files changed

+131
-7
lines changed

5 files changed

+131
-7
lines changed

‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["es2015", "react"]
3+
}

‎gulpfile.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
*
99
*/
1010

11+
var babel = require('gulp-babel');
1112
var del = require('del');
1213
var githubPages = require('gulp-gh-pages');
1314
var gulp = require('gulp');
@@ -24,7 +25,8 @@ var PACKAGE_OUTPUT_DIR = 'build/package/';
2425

2526
gulp.task('default', ['build']);
2627
gulp.task('build', [
27-
'build-htmltojsx', 'build-magic', 'build-site-misc', 'build-package'
28+
'build-htmltojsx', 'build-magic', 'build-site-htmltojsx', 'build-site-misc',
29+
'build-package'
2830
]);
2931

3032
gulp.task('build-htmltojsx', function() {
@@ -71,6 +73,12 @@ gulp.task('build-magic', function() {
7173
.pipe(livereload({ auto: false }));
7274
});
7375

76+
gulp.task('build-site-htmltojsx', function() {
77+
return gulp.src('src/htmltojsx-component.js')
78+
.pipe(babel())
79+
.pipe(gulp.dest(SITE_OUTPUT_DIR));
80+
});
81+
7482
gulp.task('build-site-misc', function() {
7583
return gulp.src(['site/*', 'test/*'])
7684
.pipe(gulp.dest(SITE_OUTPUT_DIR))
@@ -112,5 +120,6 @@ gulp.task('clean', function(callback) {
112120
gulp.task('watch', function() {
113121
livereload.listen();
114122
gulp.watch(['site/*', 'test/*'], ['build-site-misc']);
115-
gulp.watch('src/htmltojsx.js', ['build-htmltojsx']);
123+
gulp.watch('src/htmltojsx.js', ['build-htmltojsx', 'build-site-htmltojsx']);
124+
gulp.watch('src/htmltojsx-component.js', ['build-site-htmltojsx']);
116125
});

‎package.json

+8-5
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,18 @@
1010
"jsdom-no-contextify": "~3.1.0"
1111
},
1212
"devDependencies": {
13+
"babel-preset-es2015": "^6.6.0",
14+
"babel-preset-react": "^6.5.0",
15+
"del": "~2.2.0",
1316
"gulp": "~3.9.0",
14-
"webpack": "~1.13.0",
15-
"gulp-webpack": "~1.5.0",
17+
"gulp-babel": "^6.1.2",
18+
"gulp-gh-pages": "~0.5.4",
19+
"gulp-livereload": "~3.8.1",
1620
"gulp-rename": "~1.2.0",
1721
"gulp-uglify": "~1.5.1",
18-
"gulp-gh-pages": "~0.5.4",
22+
"gulp-webpack": "~1.5.0",
1923
"merge-stream": "~1.0.0",
20-
"del": "~2.2.0",
21-
"gulp-livereload": "~3.8.1"
24+
"webpack": "~1.13.0"
2225
},
2326
"repository": {
2427
"type": "git",

‎site/htmltojsx.htm

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6+
<title>HTML to JSX</title>
7+
<meta name="viewport" content="width=device-width" />
8+
<meta property="og:title" content="HTML to JSX" />
9+
<meta property="og:type" content="website" />
10+
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png" />
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/codemirror.min.css" />
12+
<link rel="stylesheet" href="https://facebook.github.io/react/css/react.css" />
13+
<link rel="stylesheet" href="https://facebook.github.io/react/css/syntax.css" />
14+
</head>
15+
<body>
16+
<div class="jsxCompiler">
17+
<h1>HTML to JSX Compiler</h1>
18+
<div id="jsxCompiler">Loading...</div>
19+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
21+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/codemirror.min.js"></script>
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/javascript/javascript.min.js"></script>
23+
<script src="https://facebook.github.io/react/js/live_editor.js"></script>
24+
<script src="htmltojsx.min.js"></script>
25+
<script src="htmltojsx-component.js"></script>
26+
</div>
27+
</body>
28+
</html>

‎src/htmltojsx-component.js

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
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.
12+
*/
13+
;(function() {
14+
15+
var HELLO_COMPONENT = "\
16+
<!-- Hello world -->\n\
17+
<div class=\"awesome\" style=\"border: 1px solid red\">\n\
18+
<label for=\"name\">Enter your name: </label>\n\
19+
<input type=\"text\" id=\"name\" />\n\
20+
</div>\n\
21+
<p>Enter your HTML here</p>\
22+
";
23+
24+
var HTMLtoJSXComponent = React.createClass({
25+
getInitialState: function() {
26+
return {
27+
outputClassName: 'NewComponent',
28+
createClass: true
29+
};
30+
},
31+
onReactClassNameChange: function(evt) {
32+
this.setState({ outputClassName: evt.target.value });
33+
},
34+
onCreateClassChange: function(evt) {
35+
this.setState({ createClass: evt.target.checked });
36+
},
37+
setInput: function(input) {
38+
this.setState({ input: input });
39+
this.convertToJsx();
40+
},
41+
convertToJSX: function(input) {
42+
var converter = new HTMLtoJSX({
43+
outputClassName: this.state.outputClassName,
44+
createClass: this.state.createClass
45+
});
46+
return converter.convert(input);
47+
},
48+
render: function() {
49+
return (
50+
<div>
51+
<div id="options">
52+
<label>
53+
<input
54+
type="checkbox"
55+
checked={this.state.createClass}
56+
onChange={this.onCreateClassChange} />
57+
Create class
58+
</label>
59+
<label style={{display: this.state.createClass ? '' : 'none'}}>
60+
·
61+
Class name:
62+
<input
63+
type="text"
64+
value={this.state.outputClassName}
65+
onChange={this.onReactClassNameChange} />
66+
</label>
67+
</div>
68+
<ReactPlayground
69+
codeText={HELLO_COMPONENT}
70+
renderCode={true}
71+
transformer={this.convertToJSX}
72+
showCompiledJSTab={false}
73+
editorTabTitle="Live HTML Editor"
74+
/>
75+
</div>
76+
);
77+
}
78+
});
79+
80+
ReactDOM.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
81+
}());

0 commit comments

Comments
 (0)