如何在我的应用程序中获得JSX支持

Question

我的index.js文件中有以下内容

class PersonProfileBadge extends React.Component {
constructor(props) {
super(props);
this.alias = this.props.alias;
}
render() {
return e(
'img',
{
src: `https://internal-cdn.foo.com/somepath/?uid=${this.alias}`,
className: 'profile_photo'
}
);
}
}

当我把它渲染成时，它就起作用了

ReactDOM.render(
e(PersonProfileBadge, {'alias': 'stupidfatcat'}),
navProfilePicture
);

但我正在努力获得JSX的支持，因为它使代码看起来更可读

ReactDOM.render(
<PersonProfileBadge alias='stupidfatcat' />,
navProfilePicture
);

但我得到了这个错误：

Uncaught SyntaxError: Unexpected token '<'

在我的index.html中，我有以下导入

<script src="internalcdnpathto/static/react/react.production.min.js"></script>
<script src="internalcdnpathto/static/react-dom/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="/static/index.js"></script>

不完全确定我做错了什么，甚至不确定从哪里开始。

Answer 1

为了使用JSX，通常需要添加一个预处理器。在您的项目中尝试JSX的最快方法是将此标签添加到您的页面：

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

现在您可以在任何标记中使用JSX，方法是添加type="text/babel"；这种方法非常适合学习和创建简单的演示。然而，它会使你的网站速度变慢，不适合制作。

阅读官方React文档中的更多信息。

Answer 2

您需要babel将代码从JSX编译为javascript

ReactDOM.render(
<PersonProfileBadge alias='stupidfatcat' />,
navProfilePicture
);

到：

ReactDOM.render(
e(PersonProfileBadge, {'alias': 'stupidfatcat'}),
navProfilePicture
);

你应该使用类似bundler的webpack，这样你每次更改代码时都会解析代码，我建议你通过create-react-app创建一个项目

或者看看Babel单机版