如何解决Card 1.jsx中Syntax error: Unexpected token (1:13)语法错误？

嘿，刚入门前端遇到这种小问题太正常了，我来帮你把问题拆解清楚～

首先看浏览器报的第一个错误：Unexpected token (1:13)，问题出在第一行的import语句上：

import React {component} from 'react';

这个写法不符合ES模块的导入语法，还有两处小问题：

• 导入默认导出（React）和命名导出（Component）时，需要用逗号分隔开
• React的组件类名Component首字母必须大写
• 另外看你的代码，你用的是函数组件（箭头函数定义的Card），其实根本不需要导入Component，所以最简单的修正就是把第一行改成：

import React from 'react';

（如果之后你要写类组件，才需要写成import React, { Component } from 'react';）

然后还有两个容易忽略的拼写错误：你把React里的className（用来替代HTML的class属性）拼写成了classnName（少了一个字母a），分别在这两处：

• <div classnName ="back">
• <div classnName ="Ans">Answer</div>

这会导致你的CSS样式无法正确绑定到元素上，一定要注意拼写哦～

最后给你贴出修正后的完整代码，我还调整了缩进让代码更易读：

import React from 'react';
import '../Card.css'

const Card = (props) => (
  <div className="card-container">
    <div className="card">
      <div className="front">
        <div className="Que">Question</div>
      </div>
      <div className="back">
        <div className="Ans">Answer</div>
      </div>
    </div>
  </div>
)

export default Card

以后遇到语法错误，可以先聚焦报错提示的行号，大部分时候都是小细节问题，多写几次就熟练啦～

内容的提问来源于stack exchange，提问作者Walyd abdallah