The library for web and native user interfaces.
Add a JSX Compiler tool.
yungsters committed
May 30, 2013 at 09:13 UTC
955b472f8bd56c947f146b8b3d20b905fbc8b413
7 files changed
+100
-11
docs/_config.yml
+4
-4
@@ -1,14 +1,14 @@
1
----
1
+---
2
pygments: true
3
name: React
4
react_version: 0.3.0
5
-exclude:
5
+exclude:
6
- Gemfile
7
- Gemfile.lock
8
- README.md
9
- Rakefile
10
-redcarpet:
11
- extensions:
10
+redcarpet:
11
+ extensions:
12
- fenced_code_blocks
13
markdown: redcarpet
14
baseurl: /react
docs/_css/react.scss
+27
-3
@@ -3,6 +3,12 @@
3
@import '_typography';
4
@import '_solarized';
5
6
+@mixin code-typography {
7
+ font-family: 'source-code-pro', Menlo, 'Courier New', Consolas, monospace;
8
+ font-size: 13px;
9
+ line-height: 20px;
10
+}
11
+
12
$skinnyContentWidth: 650px;
13
$contentWidth: 920px;
14
$contentPadding: 20px;
@@ -396,6 +402,26 @@ section.black content {
402
padding-bottom: 40px;
403
}
404
405
+/* JSX Compiler */
406
+
407
+.jsxCompiler {
408
+ margin: 0 auto;
409
+ padding-top: 20px;
410
+ width: 1220px;
411
+
412
+ #jsxCompiler {
413
+ margin-top: 20px;
414
+ }
415
+
416
+ .playgroundPreview {
417
+ padding: 14px;
418
+ width: 600px;
419
+
420
+ pre {
421
+ @include code-typography;
422
+ }
423
+ }
424
+}
425
426
/* Button */
427
@@ -482,9 +508,7 @@ p {
508
/* Code Mirror */
509
510
div.CodeMirror pre, div.CodeMirror-linenumber, code {
485
- font-family: 'source-code-pro', Menlo, 'Courier New', Consolas, monospace;
486
- font-size: 13px;
487
- line-height: 20px;
511
+ @include code-typography;
512
}
513
514
div.CodeMirror-linenumber:after {
docs/_js/jsx-compiler.js
new
+19
@@ -0,0 +1,19 @@
1
+/**
2
+ * @jsx React.DOM
3
+ */
4
+
5
+var HELLO_COMPONENT = "\
6
+/** @jsx React.DOM */\n\
7
+var HelloMessage = React.createClass({\n\
8
+ render: function() {\n\
9
+ return <div>{'Hello ' + this.props.name}</div>;\n\
10
+ }\n\
11
+});\n\
12
+\n\
13
+React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
14
+";
15
+
16
+React.renderComponent(
17
+ <ReactPlayground codeText={HELLO_COMPONENT} renderCode={true} />,
18
+ document.getElementById('jsxCompiler')
19
+);
docs/_js/live_editor.js
+12
-2
@@ -111,9 +111,19 @@ var ReactPlayground = React.createClass({
111
} catch (e) { }
112
113
try {
114
- eval(this.getDesugaredCode());
114
+ if (this.props.renderCode) {
115
+ React.renderComponent(
116
+ React.DOM.pre(null, this.getDesugaredCode()),
117
+ mountNode
118
+ );
119
+ } else {
120
+ eval(this.getDesugaredCode());
121
+ }
122
} catch (e) {
116
- React.renderComponent(<div content={e.toString()} class={{playgroundError: true}} />, mountNode);
123
+ React.renderComponent(
124
+ <div content={e.toString()} class={{playgroundError: true}} />,
125
+ mountNode
126
+ );
127
}
128
}
129
});
docs/docs/syntax.md
+5
-2
@@ -52,8 +52,11 @@ var app = <Nav color="blue"><Profile>click</Profile></Nav>;
52
var app = Nav({color:'blue'}, Profile({}, 'click'));
53
```
54
55
-The [Getting Started](getting-started.html) guide shows how to setup JSX
56
-compilation.
55
+Use the [JSX Compiler](/react/jsx-compiler.html) to try out JSX and see how it
56
+desguars into native JavaScript.
57
+
58
+If you want to use JSX, the [Getting Started](getting-started.html) guide shows
59
+how to setup compilation.
60
61
> Note:
62
>
docs/js/jsx-compiler.js
new
+19
@@ -0,0 +1,19 @@
1
+/**
2
+ * @jsx React.DOM
3
+ */
4
+
5
+var HELLO_COMPONENT = "\
6
+/** @jsx React.DOM */\n\
7
+var HelloMessage = React.createClass({\n\
8
+ render: function() {\n\
9
+ return <div>{'Hello ' + this.props.name}</div>;\n\
10
+ }\n\
11
+});\n\
12
+\n\
13
+React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
14
+";
15
+
16
+React.renderComponent(
17
+ ReactPlayground( {codeText:HELLO_COMPONENT, renderCode:true}, null ),
18
+ document.getElementById('jsxCompiler')
19
+);
docs/jsx-compiler.md
new
+14
@@ -0,0 +1,14 @@
1
+---
2
+layout: default
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/syntax.html">JSX syntax</a>
10
+ is desguared into native JavaScript.
11
+ </p>
12
+ <div id="jsxCompiler"></div>
13
+ <script type="text/javascript" src="js/jsx-compiler.js"></script>
14
+</div>