JSX在单独js文件中使用

1. 如果在html中使用，用

<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> 

<script type="text/babel">

即可

2.如果在单独的js文件中使用

<script type="text/babel"  src="myjs.js"></script>

会出现  Access to XMLHttpRequest at  跨域访问错误。

解决方案如下：

在终端上跳转到你的项目文件夹，然后粘贴这两个命令：

步骤 1： 执行 npm init -y 

步骤 2： 执行 npm install babel-cli@6 babel-preset-react-app@3

我们在这里使用 npm 只是用来安装 JSX 预处理器。

步骤 3： 创建一个名为 src 的文件夹，并执行：

npx babel --watch src --out-dir . --presets react-app/prod

这个命令启动了一个对 JSX 的自动监听器。

使用<script src="myjs.js"></script>，不改。

把写有JSX内容的js文件放在src文件下，监听器自动在根目录下生成一个myjs.js文件。

参考：

https://zh-hans.reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project