前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React.js中JSX的原理与关键实现

React.js中JSX的原理与关键实现

作者头像
马克社区
发布2022-06-17 19:10:23
1.9K0
发布2022-06-17 19:10:23
举报
文章被收录于专栏:高端IT高端IT

在开始开发之前,我们需要创建一个空项目文件夹。 安装

代码语言:text
复制
初始化

npm init -y

2.安装webpack相关依赖

npm install webpack webpack-cli -D

代码语言:text
复制
安装babel-loader相关依赖

npm install babel-loader @babel/core @babel/preset-env -D

代码语言:text
复制
安装jsx支持依赖

npm install @babel/plugin-transform-react-jsx -D

配置

代码语言:text
复制
在根目录下创建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 } }

代码语言:text
复制
创建一个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

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档