React app（使用create-react-app制作）不解析组件

Question

我有一个React应用程序（使用create-react-app制作），其中包含以下组件：

import React from 'react'; 

const Sample = () => {
 return (<h1>Some sample text.</h1>);
}

export default Sample;

但是，当我运行npm run start时，我收到以下错误：

Users/blah/blah/blah/blah/node_modules/babel-
core/lib/transformation/file/index.js:590
5:27:45 PM api.1 |        throw err;
5:27:45 PM api.1 |        ^
5:27:45 PM api.1 |  SyntaxError: 
/Users/blah/blah/blah/blah/my_app/src/components/sux.jsx: Unexpected token (4:12)
5:27:45 PM api.1 |    2 | 
5:27:45 PM api.1 |    3 | const Sample = () => {
5:27:45 PM api.1 |  > 4 |     return (<h1>Some sample text</h1>);
5:27:45 PM api.1 |      |             ^
5:27:45 PM api.1 |    5 | }
5:27:45 PM api.1 |    6 | 
5:27:45 PM api.1 |    7 | export default Sample;
5:27:45 PM api.1 |      at Parser.pp$5.raise ( ... and so on

为什么这不能正确解析？我已经包含了返回，我删除了它，我已经更改了标记 - 这一切都会导致相同的错误。

有任何想法吗？谢谢！

更新：

这解析很好：

import React, { Component } from 'react';

const Sample = () => {
 return ("wtf?");
}

export default Sample;

为什么它解析字符串但不解析html标记？

Answer 1

您是否在样本文件中导入了React？ import React from 'react';使用jsx的每个组件都必须将React导入它。

Answer 2

我通过明确添加babel-preset-react来解决问题。但是，对我来说似乎很奇怪，因为我的应用程序中的所有其他jsx组件都没有抛出此解析错误。

有任何想法吗？

感谢大家的帮助！