随笔分类 - React
ReactJS相关技术
摘要：目的：webpack打包时将资源文件copy到指定路径 npm install copy-webpack-plugin@5.0 -d yarn add copy-webpack-plugin@5.0 -d 高版本的react/vue版本才能用copy-webpack-plugin@11.0.0 低版
阅读全文
摘要：前些天为公司business partner做了个PWA小工具，用到react-router-dom。没多想，直接npm install react-router-dom --save之后拿出之前的代码抄了一遍，结果居然不work。查了半天才发现react-router-dom最新版本(6.XX)居
阅读全文
摘要：第一篇介绍了如何将React组件转换为Web Component 第二篇介绍了子应用(Web Component)中的路由可以正常作用与Shell App 第三篇介绍了Sub App与Shell App通过属性或自定义事件交互 第四篇介绍Web Component + React实现微前端的POC
阅读全文
摘要：第一篇介绍了如何将React组件转换为Web Component 第二篇介绍了子应用(Web Component)中的路由可以正常作用与Shell App 第三篇介绍了Sub App与Shell App通过属性或自定义事件交互 第四篇介绍Web Component + React实现微前端的POC
阅读全文
摘要：第一篇介绍了如何将React组件转换为Web Component 第二篇介绍了子应用(Web Component)中的路由可以正常作用与Shell App 第三篇介绍了Sub App与Shell App通过属性或自定义事件交互 第四篇介绍Web Component + React实现微前端的POC
阅读全文
摘要：第一篇介绍了如何将React组件转换为Web Component 第二篇介绍了子应用(Web Component)中的路由可以正常作用与Shell App 第三篇介绍了Sub App与Shell App通过属性或自定义事件交互 第四篇介绍Web Component + React实现微前端的POC
阅读全文
摘要：第一篇介绍了如何将React组件转换为Web Component 第二篇介绍了子应用(Web Component)中的路由可以正常作用与Shell App 第三篇介绍了Sub App与Shell App通过属性或自定义事件交互 前文已经介绍过如何将React组件编译为Web组件(Web Compon
阅读全文
摘要：第一篇介绍了如何将React组件转换为Web Component 第二篇介绍了子应用(Web Component)中的路由可以正常作用与Shell App 本文将介绍React实现的Web Component如何与Shell App交互，包括属性、事件。 先介绍属性传递，打开index.html，为
阅读全文
摘要：前一篇讲述了如何把React组件转换为Web组件，同时也留下了几个问题。其中之一就是组件（子应用）内部的路由如何影响到Shell App(以及反之)。 这里我们动手做个测试，依旧以React为例。 打开上一篇建立的项目，执行 npm install react-router-dom --save n
阅读全文
摘要：最近在思考如何实践微前端, 方案有许多，Web Components也是其中之一。 本文就先从如何将React组件转换为Web Component组件开始，探索Web Component实现微前端的方案。 当然市面上成熟的框架，如SingleSPA，QianKun自然也是可以实现Micro-Fron
阅读全文
摘要：Serverless Computing(或称为函数计算CFC)如今已是各大云平台的标准功能。中小型应用(包括Web, Rest API, 定时任务等)都可以通过函数计算实现。其灵活性强，扩展性高，费用相对低。 灵活性强，扩展性高 显然一个原子服务就可以定义成一个函数，多个函数之间可以自由组合，自然
阅读全文
摘要：本文介绍如何使用如何创建一个react项目，并使用expressjs在linux上后台运行。这里假设已经用create-react-app新建了一个CRA项目，并上传至git。 1: 连接Linux(ubuntu)服务器 假设已经有了.pem文件(用户名密码的方式也可以)，将.pem文件放置于win
阅读全文
摘要：之前写过一篇文章，如何将rollup + StoryBook实现的react组件库发布到私有仓库，文章链接。 在注意到GitHub的Actions功能之后，觉得这才是我们需要的CICD解决方案，比之前Jenkins，Azure Pipeline方便多了。 因此这里记录下使用Github action
阅读全文
摘要：场景： React应用需要实现登录界面与Dashboard界面的切换。 使用一个全局变量存储用户信息，如果为空，则进入登录界面；否则进入Dashboard界面。 实现方法： 通过useContext保存全局用户信息，如果全局user对象的email字段为空，就说明退出登录，否则为登录状态。 User
阅读全文
摘要：我们知道React等前端框架默认都是SPA+CSR (单页应用+客户端渲染)，所谓客户端渲染就是服务端返回：空页面 + JS bundle文件，在客户端浏览器再通过JS bundle对指定的DOM节点进行页面渲染(生成html、css)。 这种CSR模式有两个主要问题 1：在加载完js bundle
阅读全文
摘要：JS解构的用法想必大家都知道，但解构时可以赋予别名大家就不一定都了解了。 起因：在公司项目中希望通过传入的参数动态生成组件标签。 解决方式：对入参解构，赋予别名，并使用别名作为组件标签。 先解释JS中解构的别名 const obj = { x: 1 }; //otherName为x的别名 const
阅读全文
摘要：新建项目文件夹： mkdir react-setup cd react-setup mkdir public src touch public/index.html touch src/app.js 配置及依赖： npm init -y npm install webpack webpack-cli
阅读全文
摘要：为什么要使用eslint、airbnb配置项？ 因为： ESLint + Airbnb = Standard JS 步骤如下： 1：create-react-app cra-eslint-airbnb-sample --template typescript 2：cd cra-eslint-airb
阅读全文
摘要：npx create-next-app sample01 npm install --save-dev typescript npm install --save-dev @types/react @types/react-dom @types/node //该命令会在项目根目录下新建tsconfi
阅读全文
摘要：Performance中的LCP (Largest Contentful Paint)，根据官方定义，就是页面中Size最大区域的渲染时间。 https://web.dev/lcp/ 所以，如果页面中有些区域(比如一个复杂的控件)渲染时间较久，一定要有比它更大的区域可以快速渲染。 比如以下例子： 三
阅读全文
