admin管理员组文章数量:1331091
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>Increment</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;
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>Increment</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;
Share
Improve this question
edited Mar 17, 2023 at 19:49
marc_s
756k184 gold badges1.4k silver badges1.5k bronze badges
asked Apr 21, 2018 at 23:37
R.C.P.RajapaksheR.C.P.Rajapakshe
331 silver badge5 bronze badges
1
-
The
{...}
inreturn { ... }
denote an object literal. An object literal needs to contain a sequence ofkey: value,
pairs, not JSX. – Felix Kling Commented Apr 22, 2018 at 0:01
1 Answer
Reset to default 9You 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.
本文标签: javascriptReactJS Syntax error srcAppjs Unexpected token (166)Stack Overflow
版权声明:本文标题:javascript - ReactJS :Syntax error: srcApp.js: Unexpected token (16:6) - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742269592a2444052.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论