インラインバーベルスクリプト：予期しないトークン

Question

私はthis JS fiddleにいくつかの反応があります。フィドルのコードのほとんどは、この部分を除いて、関係ありません。

class TodoApp extends Component { 
    render() { 
    return { 
     <div> 
     <button onClick={() => { 
      store.dispatch({ 
      type: 'ADD_TODO', 
      text: 'Test', 
      id: nextTodoId++ 
      }) 
     }}> 
      Add Todo 
     </button> 
     <ul> 
      {this.props.todos.map(todo => 
      <li key={todo.id}> 
       {todo.text} 
      </li> 
     )} 
     </ul> 
     </div> 
    } 
    } 
} 

これが解釈されている場合、私はブラウザにこのエラーが表示されます。

Uncaught SyntaxError: Inline Babel script: Unexpected token (130:5) 
    128 |  render() { 
    129 |  return { 
> 130 |   <div> 
     |  ^

なぜ私は理解していませんJSXは認識されません。

私は、HTML部分にこれを追加しました：

<script src="https:// fb.me /react-0.14.3.js"></script> 
<script src="https:// fb.me /react-dom-0.14.3.js"></script> 

Iが反応して反応DOMスクリプトを取得していますので、（私はそう私が質問を投稿することができなかっただろう、URLへのいくつかのスペースを追加しました）、JSXコードを正しく解釈する必要がありますか？

Answer 1

あなたはJSX周り{と}を使用すべきではない、あなたが使用する必要があります(と)：

return (
     <div> 
     ... 
     </div> 
     ); 

Fixed Fiddle（それはあなたが藤堂の追加]をクリックしたときに明らかにされているその他の問題がありますが、構文エラーは修正されました）

これはまったく何も使用したくない場合です。それは必要ではありませんが、一般的です。また、これは有効です。

// NOT CORRECT 
return 
    <div> 
    ... 
    </div>; 

それが原因である（恐怖のです：あなたはそんなに(...)を参照してください

return <div> 
    ... 
    </div>; 

理由は、これが正しいませですが、悲しいことにサイレント障害につながるということですそれを作る、return後;を挿入します）自動セミコロン挿入、：

// NOT CORRECT 
return; 
    <div> 
    ... 
    </div>; 

など、return;に続いて、決して実行されないReact.createElementコールが続きます。