React教程系列之In-browser JSX Transform

iteye_2245

于 2014-02-20 15:38:36 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： React facebook

本文链接：https://blog.youkuaiyun.com/iteye_2245/article/details/82569662

React 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在浏览器环境中使用JSXTransform处理JSX代码。通过设置script标签的type属性为text/jsx，并添加必要的注释声明，可以实现React组件的渲染。此外，还介绍了如何通过npm安装react-tools并配置监视任务来实现离线转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在浏览器环境下，我们如何使用JSX Transform

<script type="text/jsx">
        /** @jsx React.DOM */
        React.renderComponent(<h1>测试</h1>,document.getElementById('test'));
</script>

<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>

需要注意几点：

script的type为text/jsx
注释 /** @jsx React.DOM */ 是必须的

renderCOmponent方法：

第一个参数：类似模板
第二个参数：dom

单独拿出：

新建一个文件test.js，type="text/jsx"

离线转化：

npm install -g react-tools
jsx --watch **/**/

本文部分内容：

http://facebook.github.io/react/docs/tooling-integration.html#productionizing-precompiled-jsx

http://facebook.github.io/react/docs/getting-started.html