Use --harmomy in docs examples for cleaner code

Rakefile

@@ -4,12 +4,12 @@ require('yaml')
 
 desc "generate js from jsx"
 task :js do
-  system "../bin/jsx _js js"
+  system "../bin/jsx --harmony _js js"
 end
 
 desc "watch js"
 task :watch do
-  Process.spawn "../bin/jsx --watch _js js"
+  Process.spawn "../bin/jsx --watch --harmony _js js"
   Process.waitall
 end
 

_js/examples/hello.js

@@ -1,12 +1,12 @@
-var HELLO_COMPONENT = "\
+var HELLO_COMPONENT = `
-var HelloMessage = React.createClass({\n\
+var HelloMessage = React.createClass({
-  render: function() {\n\
+  render: function() {
-    return <div>Hello {this.props.name}</div>;\n\
+    return <div>Hello {this.props.name}</div>;
-  }\n\
+  }
-});\n\
+});
-\n\
+
-React.render(<HelloMessage name=\"John\" />, mountNode);\
+React.render(<HelloMessage name="John" />, mountNode);
-";
+`;
 
 React.render(
   <ReactPlayground codeText={HELLO_COMPONENT} />,

_js/examples/markdown.js

@@ -1,35 +1,35 @@
-var MARKDOWN_COMPONENT = "\
+var MARKDOWN_COMPONENT = `
-var converter = new Showdown.converter();\n\
+var converter = new Showdown.converter();
-\n\
+
-var MarkdownEditor = React.createClass({\n\
+var MarkdownEditor = React.createClass({
-  getInitialState: function() {\n\
+  getInitialState: function() {
-    return {value: 'Type some *markdown* here!'};\n\
+    return {value: 'Type some *markdown* here!'};
-  },\n\
+  },
-  handleChange: function() {\n\
+  handleChange: function() {
-    this.setState({value: this.refs.textarea.getDOMNode().value});\n\
+    this.setState({value: this.refs.textarea.getDOMNode().value});
-  },\n\
+  },
-  render: function() {\n\
+  render: function() {
-    return (\n\
+    return (
-      <div className=\"MarkdownEditor\">\n\
+      <div className="MarkdownEditor">
-        <h3>Input</h3>\n\
+        <h3>Input</h3>
-        <textarea\n\
+        <textarea
-          onChange={this.handleChange}\n\
+          onChange={this.handleChange}
-          ref=\"textarea\"\n\
+          ref="textarea"
-          defaultValue={this.state.value} />\n\
+          defaultValue={this.state.value} />
-        <h3>Output</h3>\n\
+        <h3>Output</h3>
-        <div\n\
+        <div
-          className=\"content\"\n\
+          className="content"
-          dangerouslySetInnerHTML={{\n\
+          dangerouslySetInnerHTML={{
-            __html: converter.makeHtml(this.state.value)\n\
+            __html: converter.makeHtml(this.state.value)
-          }}\n\
+          }}
-        />\n\
+        />
-      </div>\n\
+      </div>
-    );\n\
+    );
-  }\n\
+  }
-});\n\
+});
-\n\
+
-React.render(<MarkdownEditor />, mountNode);\
+React.render(<MarkdownEditor />, mountNode);
-";
+`;
 
 React.render(
   <ReactPlayground codeText={MARKDOWN_COMPONENT} />,

_js/examples/timer.js

@@ -1,26 +1,26 @@
-var TIMER_COMPONENT = "\
+var TIMER_COMPONENT = `
-var Timer = React.createClass({\n\
+var Timer = React.createClass({
-  getInitialState: function() {\n\
+  getInitialState: function() {
-    return {secondsElapsed: 0};\n\
+    return {secondsElapsed: 0};
-  },\n\
+  },
-  tick: function() {\n\
+  tick: function() {
-    this.setState({secondsElapsed: this.state.secondsElapsed + 1});\n\
+    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
-  },\n\
+  },
-  componentDidMount: function() {\n\
+  componentDidMount: function() {
-    this.interval = setInterval(this.tick, 1000);\n\
+    this.interval = setInterval(this.tick, 1000);
-  },\n\
+  },
-  componentWillUnmount: function() {\n\
+  componentWillUnmount: function() {
-    clearInterval(this.interval);\n\
+    clearInterval(this.interval);
-  },\n\
+  },
-  render: function() {\n\
+  render: function() {
-    return (\n\
+    return (
-      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>\n\
+      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
-    );\n\
+    );
-  }\n\
+  }
-});\n\
+});
-\n\
+
-React.render(<Timer />, mountNode);\
+React.render(<Timer />, mountNode);
-";
+`;
 
 React.render(
   <ReactPlayground codeText={TIMER_COMPONENT} />,

_js/examples/todo.js

@@ -1,40 +1,41 @@
-var TODO_COMPONENT = "\
+var TODO_COMPONENT = `
-var TodoList = React.createClass({\n\
+var TodoList = React.createClass({
-  render: function() {\n\
+  render: function() {
-    var createItem = function(itemText) {\n\
+    var createItem = function(itemText) {
-      return <li>{itemText}</li>;\n\
+      return <li>{itemText}</li>;
-    };\n\
+    };
-    return <ul>{this.props.items.map(createItem)}</ul>;\n\
+    return <ul>{this.props.items.map(createItem)}</ul>;
-  }\n\
+  }
-});\n\
+});
-var TodoApp = React.createClass({\n\
+var TodoApp = React.createClass({
-  getInitialState: function() {\n\
+  getInitialState: function() {
-    return {items: [], text: ''};\n\
+    return {items: [], text: ''};
-  },\n\
+  },
-  onChange: function(e) {\n\
+  onChange: function(e) {
-    this.setState({text: e.target.value});\n\
+    this.setState({text: e.target.value});
-  },\n\
+  },
-  handleSubmit: function(e) {\n\
+  handleSubmit: function(e) {
-    e.preventDefault();\n\
+    e.preventDefault();
-    var nextItems = this.state.items.concat([this.state.text]);\n\
+    var nextItems = this.state.items.concat([this.state.text]);
-    var nextText = '';\n\
+    var nextText = '';
-    this.setState({items: nextItems, text: nextText});\n\
+    this.setState({items: nextItems, text: nextText});
-  },\n\
+  },
-  render: function() {\n\
+  render: function() {
-    return (\n\
+    return (
-      <div>\n\
+      <div>
-        <h3>TODO</h3>\n\
+        <h3>TODO</h3>
-        <TodoList items={this.state.items} />\n\
+        <TodoList items={this.state.items} />
-        <form onSubmit={this.handleSubmit}>\n\
+        <form onSubmit={this.handleSubmit}>
-          <input onChange={this.onChange} value={this.state.text} />\n\
+          <input onChange={this.onChange} value={this.state.text} />
-          <button>{'Add #' + (this.state.items.length + 1)}</button>\n\
+          <button>{'Add #' + (this.state.items.length + 1)}</button>
-        </form>\n\
+        </form>
-      </div>\n\
+      </div>
-    );\n\
+    );
-  }\n\
+  }
-});\n\
+});
-React.render(<TodoApp />, mountNode);\
+
-";
+React.render(<TodoApp />, mountNode);
+`;
 
 React.render(
   <ReactPlayground codeText={TODO_COMPONENT} />,