React—JSX转换成标准的JavaScript

React—JSX转换成标准的JavaScript

什么是JSX?
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
在 JavaScript 代码里写着 XML 格式的代码称为 JSX。
例如:

<script type="text/babel">
    React.render(
      <h1>这是一个JSX代码示例。</h1>,
      document.body
    );
</script>
JSX转换成标准的JavaScript:

A. 在线转换:
react应用需要调用哪些js文件?

<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<!--jsx转换成js后无需调用 browser.min.js 文件-->
<script src="js/browser.min.js"></script>
<!--含jsx语法的代码前要加 type="text/babel";除非通过HTTP服务,否则无法加载该类型文件-->
<script type="text/babel" src="src/main.js"></script>

B. 离线转换:
安装离线转换工具,项目根目录下执行命令:
依赖npm

cnpm install -g react-tools

将含有JSX格式的文件转换成标准的JavaScript文件,执行命令:

jsx --watch src/ build/

一旦修改src目录下的文件,build目录下会自动生成对应的文件。
此时react应用需要调用哪些js文件?

<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<!--<script src="js/browser.min.js"></script>-->
<!--删除文件类型 type="text/babel"-->
<script src="build/main.js"></script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值