随笔分类 - React
ReactJS相关技术
摘要：安装私有NPM仓库 安装python 2.7 或以上版本 npm install -global verdaccio --unsafe-perm 启动命令：verdaccio 加入用户(客户端)：npm adduser --registry http://localhost:4873 项目发布：np
阅读全文
摘要：换了台笔记本，重新安装环境，遇到些奇怪的问题 1: create-react-app my-app --typescript 无法创建一个TS的React项目 必须用create-react-app my-app --template typescript 命令 可能是版本关系吧 2：创建出的项目，
阅读全文
摘要：要解决的问题： 1：JWT存在local storage和cookie里面有什么不同，如何选择？ 2：使用ExpressJS作为前端React应用的Web Server。 登录、登出等请求都会由ExpressJS代码处理。 先来看第一个问题,local storage 和 cookie的方案各自优缺
阅读全文
摘要：在后台接口还没准备好的时候，我们可能会需要模拟数据来支持前端开发。 继续使用之前的代码示例：https://github.com/992990831/modernization/tree/main/full-demo npm install axios --save npm install mock
阅读全文
摘要：之前讲述了React-router的使用方法，这一篇讲述其实现原理 1：react-router的Link组件会被翻译为a标签， 其query、to、hash等属性都会被翻译为href属性 2：通过history.listen监听路由变化 以下源码可以在react-router.js中找到 3：ma
阅读全文
摘要：由于篇幅原因，再开一个性能优化的帖子，讲一下怎么做lazy loading和code split 先介绍一个VS Code插件，可以查看import package的大小。 插件名：Import Cost import React, { Suspense, lazy } from 'react';
阅读全文
摘要：测试框架：Jest + Enzyme 一句话来说，Jest的作用是跑test case， Enzyme的作用是在内存中渲染React组件，并对生成的DOM做比较。 1: 安装Enzyme: npm install --save-dev enzyme npm install --save-dev en
阅读全文
摘要：步骤一：使用React + Styled Component + Type Script实现响应式布局，效果如下 PC模式 Mobile模式 以上效果没有使用三方控件，都是原生css实现。代码示例：https://github.com/992990831/modernization/tree/mai
阅读全文
摘要：useMemo, useCallBack 这两个概念并非看上去那么容易理解，使用的不好的话，也很难带来任何的性能提升。 先说useMemo, 简单来说就是把返回值缓存起来，并监控一个变量。 如果被监控的变量不变，则返回值不变。以下是两个适用useMemo的场景 import React, { FC,
阅读全文
摘要：官网地址：https://styled-components.com/docs/basics 使用Styled Component的几大理由 1）Scoped Style(范围限定的样式) 不用担心引用的css文件被其他人修改 2）CSS in JS 可以在JS中使用component内部变量做条件
阅读全文
摘要：示例1：useMounted export const useMounted = () => { const isMounted = useRef<boolean>(false); useEffect(() => { isMounted.current = true; return () => {
阅读全文
摘要：useState & useEffect useState与useEffect经常一起被使用，用法简单，这里不多做介绍。以下一些概念需要搞清楚： 1）仅在函数组件的头部调用Hook。不要在循环体中、条件判断或嵌套方法中调用Hook。 https://reactjs.org/docs/hooks-ru
阅读全文
摘要：官网参考地址： https://reactrouter.com/web/example/basic 基础用法： import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; <Router> <div
阅读全文
摘要：安装： npm install axios --save 新建TUAPI.js import axios from 'axios'; export const TUAPI = axios.create({ baseURL: process.env.REACT_APP_BASE_URL, respon
阅读全文
摘要：ExpressJS常用中间件： npm install cookie-parser --save npm install body-parser --save npm install compression --save npm install errorhandler --save npm ins
阅读全文
摘要：react-app-rewired的作用是在不eject的情况下修改webpack配置 目标：修改build的output目录 1: npm install react-app-rewired --save-dev 2: 根目录下新建文件：config-overrides.js 3：添加以下配置 m
阅读全文
摘要：使用--typescript参数新建React项目 create-react-app react-ts-demo --template typescript 新建Header.tsx文件，加入以下代码： import React, { FC } from 'react'; interface MyP
阅读全文
