parent
25e56a4540
commit
0f4cc6ee84
|
@ -21,6 +21,7 @@ React.renderComponent(
|
|||
codeText={HELLO_COMPONENT}
|
||||
renderCode={true}
|
||||
transformer={transformer}
|
||||
/>,
|
||||
showCompiledJSTab={false}
|
||||
/>,
|
||||
document.getElementById('jsxCompiler')
|
||||
);
|
||||
|
|
|
@ -85,7 +85,8 @@ var ReactPlayground = React.createClass({
|
|||
return {
|
||||
transformer: function(code) {
|
||||
return JSXTransformer.transform(code).code;
|
||||
}
|
||||
},
|
||||
showCompiledJSTab: true
|
||||
};
|
||||
},
|
||||
|
||||
|
@ -116,7 +117,7 @@ var ReactPlayground = React.createClass({
|
|||
compiledCode = this.compileCode();
|
||||
} catch (err) {}
|
||||
|
||||
var jsContent =
|
||||
var JSContent =
|
||||
<CodeMirrorEditor
|
||||
key="js"
|
||||
className="playgroundStage CodeMirror-readonly"
|
||||
|
@ -125,7 +126,7 @@ var ReactPlayground = React.createClass({
|
|||
readOnly={true}
|
||||
/>;
|
||||
|
||||
var jsxContent =
|
||||
var JSXContent =
|
||||
<CodeMirrorEditor
|
||||
key="jsx"
|
||||
onChange={this.handleCodeChange}
|
||||
|
@ -138,22 +139,28 @@ var ReactPlayground = React.createClass({
|
|||
var JSTabClassName =
|
||||
'playground-tab' + (isJS ? ' playground-tab-active' : '');
|
||||
|
||||
var JSTab =
|
||||
<div
|
||||
className={JSTabClassName}
|
||||
onClick={this.handleCodeModeSwitch.bind(this, this.MODES.JS)}>
|
||||
Compiled JS
|
||||
</div>;
|
||||
|
||||
var JSXTab =
|
||||
<div
|
||||
className={JSXTabClassName}
|
||||
onClick={this.handleCodeModeSwitch.bind(this, this.MODES.JSX)}>
|
||||
Live JSX Editor
|
||||
</div>
|
||||
|
||||
return (
|
||||
<div className="playground">
|
||||
<div>
|
||||
<div
|
||||
className={JSXTabClassName}
|
||||
onClick={this.handleCodeModeSwitch.bind(this, this.MODES.JSX)}>
|
||||
Live JSX Editor
|
||||
</div>
|
||||
<div
|
||||
className={JSTabClassName}
|
||||
onClick={this.handleCodeModeSwitch.bind(this, this.MODES.JS)}>
|
||||
Compiled JS
|
||||
</div>
|
||||
{JSXTab}
|
||||
{this.props.showCompiledJSTab && JSTab}
|
||||
</div>
|
||||
<div className="playgroundCode">
|
||||
{isJS ? jsContent : jsxContent}
|
||||
{isJS ? JSContent : JSXContent}
|
||||
</div>
|
||||
<div className="playgroundPreview">
|
||||
<div ref="mount" />
|
||||
|
|
Loading…
Reference in New Issue