reactjs - 如何将react jsx文件编译成js文件

Question

我是 React js 的新手，我使用 create-react-app npm 包来创建 React 项目。 当我运行 npm start在终端中命令并查看浏览器错误的开发者控制台Uncaught SyntaxError: Unexpected token <显示在控制台中。它显示 jsx 文件未编译为 js 文件。

我的一个javascript文件代码是

class ProductsList extends React.Component{
    render(){
       return (
         <div class="">
         Hello
         </div>
       );
    }
}

ReactDOM.render(
    <ProductsList/>,
    document.getElementById('content')
);

Answer 1

具有 .jsx 扩展名的文件已经是 JavaScript 文件。这应该与 .js 文件相同。使用 jsx 只是为了强调该文件包含使用 JSX 语法糖编写的代码。

使用 create-react-app 生成项目应该已经默认设置了 webpack。您的代码应该已经从 ES6 转换为 ES5。应该没有问题。

我在您的代码中注意到的一件事是您使用 class 作为 div 的 Prop 。默认情况下，在 React 中，您必须改用 className。

<div className="some-class">
  Hello
</div>