在浏览器环境下,我们如何使用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
相关推荐
前端开源库-react-element-to-jsx-string将react元素转换为JSX字符串,将reactElement转换为相应的JSX字符串。
babel-plugin-transform-react-createelement-to-jsx 将React.createElement调用转换回JSX语法。 这对于转换开始时认为“我们不需要臭臭的编译器”的项目将已经编译的JS转换成可维护的东西(例如语法→ →→ react-...
这与babel-plugin-transform-react-jsx 。 用法 npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-env\ --save-dev 在您的.babelrc ...
react-native-in-app-notification-master.rar
按字母顺序排列道具以确定的顺序对对象键进行排序( o={{a: 1, b:2}} === o={{b:2, a:1}} ) 处理ref和key属性,它们总是在props之上React的JSX文档缩进样式用生成的目录 设置yarn add react-element-to-jsx-string...
在浏览器组件中进行React渲染 一个React组件,可帮助您呈现浏览器特定的内容。 为什么? 是否曾经想过为所有IE用户设置横幅广告,并...import RenderInBrowser from 'react-render-in-browser' ; const Example =
前端开源库-react-transform-render-visualizerReact Transform呈现可视化工具,ReactJS的呈现可视化工具
markdown-to-jsx 最轻巧,可定制的React markdown组件。 markdown-to-jsx使用经过大量修改的...markdown-to-jsx默认情况下会导出React组件, markdown-to-jsx JSX markdown-to-jsx : ES6风格的用法*: import Ma
react-hooks-in-action-code
npm install --save react-native-push-notification react-native link NOTE: For Android, you will still have to manually update the AndroidManifest.xml (as below) in order to use Scheduled Notifications...
react-native-charts-wrapper图表库页面布局使用案例
babel-plugin-transform-redom-jsx安装npm install babel-plugin-transform-redom-jsx --save-dev用法Babel配置: { " plugins " : [ " babel-plugin-transform-redom-jsx " , [ " transform-react-jsx " , { " ...
vite-plugin-react-jsx 这是的插件,与React一起使用时可增强jsx的转换。 在开发模式下,它将在开发模式下添加调试信息,以便React Devtools(和其他工具)可以显示元素来自的文件名和行号,这在调试时非常有用。 ...
画中画ReactReact组件,可让您轻松在您的应用中实现画中画API( )安装npm install --save react-picture-in-picture 或者yarn add react-picture-in-picture用法import React , { useState } from 'react'import ...
此存储库本质上是transform-react-jsx除了它将子级作为数组而不是作为其他参数传递。 如果愿意,可以此问题的。 安装 npm install --save-dev babel-plugin-transform-h-jsx 用法 您可以通过命令行运行babel : ...
yarn add babel-plugin-transform-react-to-vue --dev 用法 { "plugins" : [ "transform-react-to-vue" ] } 注意:如果您希望它与实验性ECMAScript功能(如class-properties )一起使用,请将该插件与babel-plugin...
react-dnd-in-chinese react-dnd 中文文档
react-native-in-app-utils React原生包装器,用于处理iOS中的应用内购买。 突破性变革 由于RN 0.40+的重大更改,从npm安装时请使用此库的版本5或更高版本。 笔记 您需要一个Apple Developer帐户才能使用应用程序内...
react-native-baidu-map简单应用
react-native-vector-icons的简单使用, index.ios.js文件 等主要代码