ReactJS：语法错误：src / App.js：意外令牌（16：6）

Question

I'm getting started with reactjs and tried a simple example in a tutorial.Syntax error occurs when returning html tags.

Here is the error i'm getting

./src/App.js Syntax error: C:/Users/react-tutotial/src/App.js: Unexpected token (16:6)

14 |   render() {
   |     return{
16 |       <div>
   |       ^
17 |         <button>Increament</button>
18 |         {this.state.count}

this is the app.js file

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


class App extends Component {
  constructor(){
    super();

    this.state = {
      count : 0
    };
  }
  render() {
    return{
      <div>
        <button>Increment</button>
        {this.state.count} 
      </div>
    };
  }
}

export default App;

Answer 1

You should use ( / ) there, not { / } :

 render() {
    return (                                 // changed this line
      <div>
        <button>Increment</button>
        {this.state.count} 
      </div>
    );                                       // changed this line
  }

And know that () s there are optional, but if you do remove them, <div> must be in the same line as return , like return <div> an on. (When you break a line after return JavaScript goes nuts.)

---

Edit:

Ok, I feel like I should elaborate on what "goes nuts" is: when you break a line right after return , JavaScript will basically consider it a return; and ignore the rest. And that is effectively the same as return undefined; . Blame this on JavaScript's ASI (Automatic Semicolon Insertion) "feature".

About why exactly { / } doesn't work: Although when inside a JSX "expression" you can use curly braces to place any JavaScript expression , at that point where the error appears, you are not inside a JSX expression yet. This makes that code be interpreted as regular JavaScript expression. And in regular JavaScript, a curly brace alone either creates a context (where let variables would be local, for instance) or object literals. A return expects an expression. A context is not an expression. And your code is not (nor it should be) a valid object literal.