在开始开发之前,我们需要创建一个空项目文件夹。
安装
初始化
- npm init -y
2.安装webpack相关依赖
- npm install webpack webpack-cli -D
3.安装babel-loader相关依赖
- npm install babel-loader @babel/core @babel/preset-env -D
4.安装jsx支持依赖
- npm install @babel/plugin-transform-react-jsx -D
配置
1.在根目录下创建main.js文件 此文件为入口文件。
2.在项目根目录下创建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
3.创建一个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);
- }
- }
- // 封装插入文本节点
- class TextWrapper {
- constructor(content) {
- this.root = document.createTextNode(content);
- }
- }
- // 组件
- export class Component {
- constructor() {
- this.props = Object.create(null); // 创建一个原型为null的空对象
- this.children = [];
- this._root = null;
- }
- setAttribute(name, value) {
- this.props[name] = value;
- }
- appendChild(component) {
- this.children.push(component);
- }
- get root() { // 取值
- if (!this._root) {
- this._root = this.render().root;
- }
- return this._root;
- }
- }
- // 创建节点,createElement对照 webapck.config.js 中pragma参数。
- export function createElement(type, attributes, ...children) {
- let e;
- if (typeof type === "string") {
- e = new ElementWrapper(type);
- } else {
- e = new type();
- }
- for (let p in attributes) { // 循环属性
- e.setAttribute(p, attributes[p]);
- }
- let insertChildren = (children) => {
- for (let child of children) {
- if (typeof child === "string") {
- child = new TextWrapper(child);
- }
- if (typeof child === "object" && child instanceof Array) {
- insertChildren(child); // 递归
- } else {
- e.appendChild(child);
- }
- }
- };
- insertChildren(children);
- return e;
- }
- // 添加到Dom中
- export function render(component, parentElement) {
- parentElement.appendChild(component.root);
- }
main.js
import {createElement,Component,render} from './reactJsx.js'class MyComponent extends Component { render(){ return
执行
- import {createElement,Component,render} from './reactJsx.js'
- class MyComponent extends Component {
- render(){
- return <div>
- <h1>maomin</h1>
- {this.children}
- </div>
- }
- }
- render(<MyComponent id="name" class="age">
- <div>xqm</div>
- <div>my girlfriend</div>
- </MyComponent>,document.body)
二维数组中的查找 在一个 n * m 的二维数组中,每一行都按照从左到右递增的顺序...
日常运维 问题排查 怎么能够少了滴滴开源的 滴滴开源LogiKM一站式Kafka监控与管...
若您尚未拥有E-HPC集群,请先 创建E-HPC集群 弹性高性能计算E-HPC的管理控制台提...
最近,我和领域内的专家Vallery Lancey有过一次闲聊,主题是关于Kubernetes的。...
北京时间11月29日早间消息,美国市场研究公司Gartner周三发布报告称,第三季度全...
本文经AI新媒体量子位(公众号ID:QbitAI)授权转载,转载请联系出处。 NumPy是Py...
服务器按用途划分为通用型服务器和专用型服务器两类。 1、通用型服务器 通用型服...
GitOps 提供了一种自动化的管理基础架构的方法。它通过使用许多团队已经使用的De...
1. 接口描述 接口请求域名: tke.tencentcloudapi.com 。 从伸缩组创建节点池 默...
您可以按照性能指标(如vCPU个数)为不同实例规格设置权重,即指定不同实例规格...