title: Inline Babel script: Unexpected token
body: <p>I have <a href="https://jsfiddle.net/mx0jLt2u/1/" rel="nofollow noreferrer">this JS fiddle</a> with some React. Most of the code in the fiddle is not relevant, except for this part:</p>
  
  <pre><code>class TodoApp extends Component {
      render() {
      return {
          &lt;div&gt;
          &lt;button onClick={() =&gt; {
              store.dispatch({
              type: 'ADD_TODO',
              text: 'Test',
              id: nextTodoId++
            })
          }}&gt;
              Add Todo
          &lt;/button&gt;
          &lt;ul&gt;
              {this.props.todos.map(todo =&gt;
              &lt;li key={todo.id}&gt;
                  {todo.text}
              &lt;/li&gt;
            )}
          &lt;/ul&gt;
        &lt;/div&gt;
      }
    }
  }
  </code></pre>
  
  <p>When this is interpreted, I get this error in the browser:</p>
  
  <pre><code>Uncaught SyntaxError: Inline Babel script: Unexpected token (130:5)
    128 |     render() {
    129 |     return {
  &gt; 130 |         &lt;div&gt;
        |         ^
  </code></pre>
  
  <p>I don't understand why the JSX is not recognised.</p>
  
  <p>I have added this to the HTML part:</p>
  
  <pre><code>&lt;script src="https:// fb.me /react-0.14.3.js"&gt;&lt;/script&gt;
  &lt;script src="https:// fb.me /react-dom-0.14.3.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Since I am getting the React and React DOM scripts(I added some spaces to the URLs, otherwise I would not have been able to post the question), the JSX code should be properly interpreted, right?</p>