写react时script的type属性有两种值: text/babel text/jsx

最新推荐文章于 2022-07-26 23:28:37 发布
最新推荐文章于 2022-07-26 23:28:37 发布
阅读量8.9k 收藏 4
点赞数 2
文章标签： react script text/babel

JSX是什么
JSX其实是JavaScript的扩展，React为了代码的可读性更方便地创建虚拟DOM等原因，加入了一些类似XML的语法的扩展。

编译器——jsxTransformer
JSX代码并不能直接运行，需要将它编译成正常的JavaScript表达式才能运行，jsxTransformer.js就是这一编译器的角色。

第二代编译器——babel
React官方博客发布了一篇文章，声明其自身用于JSX语法解析的编译器JSTransform已经过期，不再维护，***React JS和React Native已经全部采用第三方Babel的JSX编译器实现。***原因是两者在功能上已经完全重复，而Babel作为专门的JavaScript语法编译工具，提供了更为强大的功能。而browser.js是babel编译器的浏览器版本。

小付君
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为Babel和TypeScript编译的代码添加moduleexports
08-08
为Babel和TypeScript编译的代码添加`module.exports`
react 学习雷区
会一点前端、会一点Java、会一点Python
08-10 436
1、引用自己编写的js时，<script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type=”text/babel” 。2、组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错。
babel转换html失败,javascript-将类型为“文本/ babel”的脚本放在HTML页面上时如何进行转译？...
weixin_39581945的博客
05-31 190
我有一个HTML页面：Hello WorldReactDOM.render(Hello, world!,document.getElementById('root'));浏览器如何查看类型为“ text / babel”的脚本,并让babel转换代码？ React库何时何地可以执行JavaScript代码？解决方法:在该文件中搜索“文本/ babel”.看看在runScripts()中使用它的地方...
2021-10-22
weixin_44566200的博客
10-22 94
JSX语法 全称： JavaScript XML 写法： const element = <h1>Hello, world!</h1>; 定义： ​ 是在Javascript代码里直接写XML的语法，React 使用 JSX 来替代常规的 JavaScript。它实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具（babel）转换成纯Javascript代码。 ​ React 官方推荐使用JSX， 直接使用纯Javascript代码写也是可以的，只是使用JSX会让
React入门和进阶
alin的博客
01-22 125
React入门和进阶 1. React使用方法 需要在html中导入三个文件，并且导入的顺序不能更改 <script src="js/react.development.js"></script> <script src="js/react-dom.development.js"></script> <script src="js/babel.min.js"></script> 随后其他的代码要放在body标签中其他标签的后面，
Babel 在浏览器环境使用方法
zzzhumengfan的博客
01-23 9346
Babel 也可以用于浏览器环境。但是，从 Babel 6.0 开始，不再直接提供浏览器版本，而是要用构建工具构建出来。如果你没有或不想使用构建工具 1.通过安装5.x版本的babel-core模块获取 $ npm install babel-core@old 运行上面的命令以后，就可以在当前目录的node_modules/babel-core/子目录里面，找到babel的浏览器版本bro...
react初学知识记录
fangqi20170515的博客
07-26 339
使用React.createElement(标签名，标签属性，标签内容)创建虚拟DOM。jsx创建虚拟DOM更简单。
React cdn 引用 为什么要 ＜script type=‘text/babel‘＞＜/script＞
我是小兵
11-18 4804
1. 关于一个 React.CreateElement 的思考 <!-- * @Author: QL * @Date: 2020-11-18 11:19:32 * @LastEditTime: 2020-11-18 14:01:36 * @FilePath: /react-master/Users/ql/Downloads/index.html --> <!DOCTYPE html> <html lang="en"> <head> <me
React -04 组件化开发（1）
qq_43955202的博客
06-27 340
1.JSX的本质 1.jsx使用没问题，但是去掉 type=“text/babel” 就会报错 jsx --> babel -> React.createElement(); <script type="text/babel"> const message = <h2>Hello World!</h2> ReactDOM.render(message,document.getElementById('app')); </script>
Vue不兼容IE解决方法 直接引用＜script＞
weixin_47765508的博客
01-04 1814
vue 使用最新的ES6语法，而IE不支持ES6，所以直接使用vue需要解决兼容性问题 vue+element 在IE浏览器的兼容问题 这是我的页面js引入 因为我用到了ES语法所以也要转换所以引入了ES6 <script src="https://cdn.bootcdn.net/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/
babel-plugin-remove-react-jsx-attribute:Webpack 打包时移除 HTML 属性
08-04
babel-plugin-remove-react-jsx-attribute安装 npm install --save-dev babel-plugin-remove-react-jsx-attributeyarn add -D babel-plugin-remove-react-jsx-attribute介绍这对于删除不需要转译的 JSX 属性很有用。...
babel-plugin-react-binding：React的两种方式绑定糖
02-01
Babel插件React绑定React的两种方式绑定糖。用法安装npm i babel-plugin-react-binding --save-dev将react-binding添加到.babelrc { "plugins" : [ [ "react-binding" , { // options } ] ]}在React JSX中使用绑定！...
babel-plugin-import-react：一个小的babel插件，可以自动导入React，它钩在您的组件上
01-31
babel插件导入React一个小型babel插件，可自动导入React并将其钩在您的组件上安装# yarnyarn add --dev babel-plugin-import-react# npmnpm i --save-dev babel-plugin-import-react用法将其包含在您的.babelrc {" ...
babel-plugin-transform-vue-jsx:vue 2.0 jsx的babel插件
05-02
这与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 ...
babel-plugin-react-directives:一个babel插件，提供了一些react（JSX）指令，类似于vue指令
05-01
babel-plugin-react-directives 一个babel插件，它为react（任何JSX）提供一些指令，类似于vue的指令。 现在，您可以在在线尝试它。目录 X秀X为X级相关配套已知的问题更新日志执照 用法需要节点v10.0.0或更高版本， ...
vsc标签script的type=“text/babel“时 自动保存格式化代码时总为一行,或者注释不了
qq_45260597的博客
08-02 1033
代码保存前 代码保存后，代码出现换行，且注释出错 原因和解决 这种问题大概率就是vscode设置或插件导致的，经过几个小时的查找，最终是因为插件JS-CSS-HTML Formatter导致的，把它禁用就可以了 ...
react（5）——创建虚拟dom的方式在type=“text/babel“时和type=“text/javascript“不同
木子 旭的博客
12-14 1412
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02_JSX</title> <script src="../js/react.development.js"></script> <script src="../js/react-dom.development.js">&l
【ReactJS】困惑于text/babel与browser.js还是babel.js？
'Ablaze 的专栏
01-01 6196
使用JSX　　使用JSX，可以极大的简化React元素的创建，JSX抽象化了React.createElement()函数的使用，其语法风格类似于HTML语法风格。对比如下代码可以让你更好的理解这一点。// 使用React.createElement() return React.createElement('div',null,'Hello',this.props.name);//使用JSX re
ES6-语法基础
qq_55917018的博客
12-25 466
ES6-语法基础
请你写一段 HTML 代码，在代码中有一段 JSX 代码， 这段代码使用了 React 和 React-Query, 能够发送异步请求访问一个 {API}。 API 是 https://api.exchangerate.host/latest. 并要求将 {API} 返回的数据以列表的形式展示在 HTML 页面上。
最新发布
02-22
<html> <head> <title>Exchange Rate</title> </head> <body> <div id="root"></div> <script type="text/babel"> const { useQuery } = ReactQuery; function App() { // Fetch the exchange rate data from the API const { data, isLoading, isError } = useQuery('exchangeRate', () => fetch('https://api.exchangerate.host/latest') .then(res => res.json()) ); // Render the exchange rate data in a list return ( <div> {isLoading ? ( <div>Loading...</div> ) : isError ? ( <div>Error!</div> ) : ( <ul> {Object.entries(data?.rates).map(([currency, rate]) => ( <li key={currency}>{currency}: {rate}</li> ))} </ul> )} </div> ); } ReactDOM.render(<App />, document.getElementById('root')); </script><script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/react[email protected]/dist/react-query.development.js"></script> <script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script> </body> </html>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值