【React源码分析之一】JSX 转化成JS

最新推荐文章于 2023-04-10 19:31:30 发布
最新推荐文章于 2023-04-10 19:31:30 发布
阅读量552 收藏
点赞数
文章标签： React Javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whueratsjtuer/article/details/100978782
版权
本文探讨了React开发中JSX的使用，它是增强版JavaScript，允许在JS中嵌入HTML。JSX通过Babel转化为JS代码，通过Babel playground可以观察这一过程。文章详细解释了React.createElement函数的作用，包括提取关键属性，处理子组件，以及如何应用defaultProps。ReactElement实际上是一个构造函数，根据输入参数创建一个对象。
摘要由CSDN通过智能技术生成

我们在开发react 过程中一般都是用JSX, 相当于enhanced JavaScript. 能再JS代码中嵌入HTML. 

JSX是通过Babel翻译成JS代码的， 可以通过这个Babel playground 来看看JSX中的html被翻译成什么JS代码

function comp(){
}

<comp id='id' key='key'>
  <span>what</span>
  <span>why</span>
</comp>
</
最低0.47元/天 解锁文章
郎总
关注
【React】在React中 JSX 代码如何转成 JS 代码？
pingan8787
10-24 1634
一、介绍 写 React 代码的朋友应该都是直接写 JSX 代码，JSX 让我们可以在 JS 中直接写 HTML 代码，可阅读性较高。本章节主要介绍 JSX 通过 babel 转换后会生成什么样式代码。 二、案例 div 标签 <div></div> 通过 babel 转换后： React.createElement("div", null); 带 id 属性的 ...
JSX到JavaScript的转换
Meskjei的博客
08-19 4230
可能初次接触React的人会惊讶于为什么可以在JS文件中写HTML的语句，例如return <div>hello</div>。 其实这种语法就是JSX，它实际上是一种语法糖。我们想“All-in-JS”，但是无奈HTML那样的标签语法更适合表示界面的结构与层次，于是人们便想出了JSX这种方法，即在JS中写标签，但是实际上最终编译时又会被转换为JavaScript。 那么，被...
React之jsx转js
weixin_34122810的博客
09-22 97
参考于：http://lib.csdn.net/article/react/22694 1.npm install -g babel-tools 2. 运行: jsx hello/jsx/ hello/build/ Note:jsx的文件后缀名也应为.js，否则无法识别。 如果要实时转化，则添加 --watch 选项。 转载于:https://www.cnblogs.com/i...
react 中jsx 转化成js
ppwwp的专栏
09-10 1643
node_modules/.bin/babel jsx --presets react --out-dir static jsx：为jsx文件夹 static：为生成的js文件夹
react中jsx文件是如何转换成js对象的
dbj1245的专栏
02-21 649
通过在线babel转换器，转换出jsx是如何变成js对象的 jsx文件 加入了正常的标签以及嵌套标签以及方法属性 function hello() { click=()=>{ console.log("hello") } return <div> <button onclick={this.clic...
React源码分析1-jsx转换及React.createElement
It_kc的博客
12-08 172
我们从 react 应用的入口开始对源码进行分析，创建一个简单的 hello, world 应用： 我们注意到，我们在 App 组件中直接写了 的 jsx 语句，那么 jsx 语法是如何被浏览器识别执行的呢？另外我在第一次学习 react 的时候，就有一个疑惑： 这段代码中， 似乎在代码中没有任何地方被用到，为什么要引入呢？我们在 react16.8 版本的代码中，尝试将 的引用去掉： 运行应用程序，发现会提示 的 error：这是因为上述的类组件 render 中返回了 的 jsx 语法，在Re
React精讲（三）jsx本质源码分析
weixin_45704555的博客
11-01 664
前面两讲讲到了react的书写方法，也讲到必须引入babel且在script标签上加上一个type="text/babel"的属性，jsx才能被执行。那么这一讲，我们将深入到 jsx的本质，具体了解jsx的来龙去脉。 jsx本质 实际上, jsx仅仅只是React.createElement(component, props, …children) 函数的语法糖。 语法糖：“生活有了糖会更甜，没有还是照样过”，上面这句话很形象地讲到了语法糖的作用，它是将一个较为复杂的代码封装成一个供开发者简单使用的形式，
react源码分析：babel如何解析jsx
小王的技术库
01-12 502
不管是类组件还是函数组件，最终我们写的jsx都被babel转化成了可识别的元素，其中我们也看了Component等内部实现，了解到了作为他是怎么被创建的，但是远远没有完，因为我们知道我们在写React的时候，会在后面带上一个，没错我们下一章节就要去探索一下方法了。整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
jsx编译成js
weixin_30570101的博客
11-01 961
对于一个只想使用一下react批量渲染的后端程序员来说，配置完整的编译环境可以没有必要，最好一条命令搞定。jsx其实就是js的语法糖，需要用编译工具编译下。 方法首先安装node.js，里面默认带了npm的包管理。 //命令行中全局安装 npm install --save-dev babel-cli babel-preset-react -g //执行命令 babel 目录...
react 转换JSX语法的插件brower.js
09-04
如果是要直接在HTML上编辑，需要下载react.js与react-dom.js。如果要使用JSX语法，则需要使用转换JSX语法的插件。这里使用brower.js brower,js：将使用的JSX语法转换成JavaScript语法
React—JSX转换成标准的JavaScript
SunPrincess的专栏
05-06 4983
React—JSX转换成标准的JavaScript什么是JSX？ JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 在 JavaScript 代码里写着 XML 格式的代码称为 JSX。 例如：<script type="text/babel"> React.render( <h1>这是一个JSX代码示例。</h1>, document.b
React文档翻译系列（三）JSX简介
weixin_34203832的博客
03-29 142
React文档翻译系列（三）JSX简介 先来看一下下面的变量声明： const element = <h1>Hello world!</h1> 这种有趣的标签语法既不是字符串也不是HTML。 这种形式被称作JSX，他是Javascript的一种扩展语法。我们推荐在React中使用这种形式来描述UI该是什么样子的。J...
自动将jsx转化为js
jtrllpqq的博客
12-04 3541
想将react应用到手头上的项目练手，计划希望可以把菜单组件化，塞到主页里，从而变相的实现类似iframe的功能。 然而在调用外部组建的时候出现了一系列问题，chrome甚至直接报错了，一直无法解决，因此只有放弃使用 browser.min.js和JSXTransformer.js，准备自己采用react-tools转化。 1.控制台输入：npm install -g react-t­ool
jsx由html转为js,react源码解析：JSX如何转化为javascript
weixin_39827905的博客
06-02 422
react中基本都使用JSX来开发，但JSX其实是javascript的一种语法糖。什么是语法糖？语法糖就是提供了一种全新的方式书写代码，但是其实现原理与之前的写法相同。语法糖可以说是广泛存在于各种计算机代码中，包括C语言中的a[i]其实就是*a+i的语法糖。而今天对于我们来说，a[i]其实已经很普遍和常用了，所以也没有人提这是语法糖这回事了。因为终极来说，所有语言都是汇编语言的语法糖：)简单说，...
「深入浅出」实现JSX的转换
最新发布
Jack, what else can you do besides holding your little darling?
04-10 632
由于近期在看React框架源码、底层实现方面的知识，所以想把学习心得整理出来。这也是一个新的系列「从0实现React 18核心模块」的第一篇。接下来还会更新：render、commit阶段的实现，以及Hooks架构、useState、useEffect、单双节点Diff的过程还有React 18中的并发更新原理。JSX 是什么语法？JSX 有什么优势，它的转换规则是什么或者它内部是如何实现的？
jsx转换之路
u013738122的博客
08-17 933
react起步——jsx转换之路 吐槽一下：学啥都是，真难，可能看一上午文章，还解决不了一个问题。万事开头难，不着急 使用npm获得react包 npm install --save react npm install --save react-dom 上边这两个包，一个是react的核心包，一个...
react JSX 原理解析
weixin_36725266的博客
07-30 793
what？ JSX是对js语法的扩展，使我们可以用类似xml方式描述视图 why? 执行快、类型安全、开发简单快速 how? babel-loader会预编译jsx为 React.createElement(type, props, …chilren) ...
React 16.7.0 源码分析及开发环境配置指南
.babelrc 文件用于配置Babel，这是一个JavaScript编译器，负责将React中的JSX语法和新版本的JavaScript代码转换成浏览器可以理解的代码。.editorconfig 文件定义了编辑器的编码风格，有助于保持项目中代码的一致性。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值