React.js中JSX的原理与关键实现
在开始开发之前,我们需要创建一个空项目文件夹。
安装
初始化
npm init -y
2.安装webpack相关依赖
npm install webpack webpack-cli -D
安装babel-loader相关依赖
npm install babel-loader @babel/core @babel/preset-env -D
安装jsx支持依赖
npm install @babel/plugin-transform-react-jsx -D
配置
在根目录下创建main.js文件
此文件为入口文件。
在项目根目录下创建webpack.config.js
module.exports={
entry:{
main:’./main.js’
},
module:{
rules:[
{
test:/.js$/,
use:{
loader:‘babel-loader’,
options:{
presets:[’@babel/preset-env’],
plugins:[[’@babel/plugin-transform-react-jsx’,{pragma:‘createElement’}]] // 自定义设置pragma参数,我也可以设置为我的名字:maomin
}
}
}
]
},
mode:‘development’,
optimization:{
minimize: false
}
}
创建一个reactJsx.js文件
此文件为主要逻辑文件。
开发
reactJsx.js
// 封装创建Dom节点
class ElementWrapper {
constructor(type) {
this.root = document.createElement(type);
}
setAttibute(name, value) {
this.root.setAttibute(name, value);
}
appendChild(component) {
this.root.appendChild(component.root);
}
}
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119882414
React.js中JSX的原理与关键实现的更多相关文章
- 从源码的角度看 React JS 中批量更新 State 的策略(下)
这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略,供我们继续深入学习研究 React 之用. 前置文章列表 深入理解 React JS 中的 setState 从源 ...
- 从源码的角度看 React JS 中批量更新 State 的策略(上)
在之前的文章「深入理解 React JS 中的 setState」与 「从源码的角度再看 React JS 中的 setState」 中,我们分别看到了 React JS 中 setState 的异步 ...
- 深入理解 React JS 中的 setState
此文主要探讨了 React JS 中的 setState 背后的机制,供深入学习 React 研究之用. 在课程 React.js入门基础与案例开发 中,有些同学会发现 React JS 中的 set ...
- 从源码的角度再看 React JS 中的 setState
在这一篇文章中,我们从源码的角度再次理解下 setState 的更新机制,供深入研究学习之用. 在上一篇手记「深入理解 React JS 中的 setState」中,我们简单地理解了 React 中 ...
- React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...
- ref 和 React.js 中的 DOM 操作
在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListen ...
- Js中的闭包原理
要了解清楚js中的闭包制机,那么得先了解全局执行环境.块级执行环境.函数执行环境.变量对象.环境栈.作用域链.摧毁执行环境. 全局执行环境 全局执行环境指的是最外层的执行环境.在web中全局执行环境被 ...
- React:JS中的this和箭头函数
JS中的this和纯面向对象(java,c++)中的this有点不大一样,其原因就是作用域不同,导致JS中的this的指向不明确,在java中的this指当前对象的this或当前类的this,在JS中 ...
- js中Ajax工作原理(转)
在写这篇文章之前,曾经写过一篇关于AJAX技术的随笔,不过涉及到的方面很窄,对AJAX技术的背景.原理.优缺点等各个方面都很少涉及null.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...
随机推荐
- event 事件对象
关于event对象 在触发的事件的函数里面我们会接收到一个event对象,通过该对象我们可以得到需要的一些参数,比如说我们需要知道此事件作用到谁身上了,就可以通过event的属性target来获取到( ...
- 快速排序算法 - go实现
在分析redis集群中大Key的时候,通常都采用分析rdb文件的方式:但是这种方式需要在每一台redis服务器上部署分析程序及分析脚本,而像salt之类的工具运维没有开放给我们使用,一台一台部署不好管 ...
- input清楚阴影 number属性
IOS,input出现阴影: input[type="text"],input[type="email"],input[type="search&qu ...
- shell基础知识讲解
第1章 shell基础 1.1 什么叫做shell编程 shell编程也叫做bash高级编程语法 1.2 常见的shell命令解释器 bash redhat和centos使用 d ...
- HashMap和Hashtable以及ConcurrentHashMap的区别
HashMap和Hashtable的区别 何为HashMap HashMap是在JDK1.2中引入的Map的实现类. HashMap是基于哈希表实现的,每一个元素是一个key-value对,其内部 ...
- 给swap分区扩容
一.先添加一块硬盘,如果硬盘空间还有没有被分区的也可以使用,再创建一个分区(分区可以是主分区或者扩展的逻辑分区) fdisk /dev/sdb n 代表创建分区 p 代表 ...
- 2022年最新Cloudflare免费自选IP教程(非Partner)
写在开头 众所周知,CF在去年底大规模禁用Host API key,使得Partner自选法失效.但最近,Cloudflare为所有计划添加了100个SaaS域免费额度(以前$2一个). 经过一番摸索 ...
- mybatis添加代码出现是第几条数据
- 五四青年节,今天要学习。汇总5道难度不高但可能遇到的JS手写编程题
壹 ❀ 引 时间一晃,今天已是五一假期最后一天了,没有出门,没有太多惊喜与意外.今天五四青年节,脑子里突然想起鲁迅先生以及悲欢并不相通的话,我的五一经历了什么呢,忍不住想说那大概是,父母教育孩子大声嚷 ...
- 为什么vue中的v-bind用在class属性上有点怪?
如图所见,普通的标签属性我们直接使用 :属性名=`props的值` 就可以了.为什么用到class里要加[ ] 这个???