React+TS前台项目实战(一)-- 项目初始化配置及开此系列的初衷

文章目录


前言

前面 后台管理系统实战 系列教程暂时告一段落了,想了解全局各种配置的可自行查看。本次教程将重点介绍React前台项目的实操,关于具体的配置,将不再详细介绍,只提供本项目所需的额外配置项说明。React前台项目会更加考验性能方面的优化,如高频数据请求、组件渲染性能、代码分割和懒加载等方面的处理。


一、初始化项目

创建项目选择带typescript版本的,指令为
npx create-react-app react-frontend-ts- --template typescript

二、基础配置

1. 项目目录及说明如下

2. TS版本使用Craco需注意

注: TS版本的配置略有不同,具体看前面的文章 React中使用 ts 后,craco库配置别名时需要注意什么?


总结

接下来,我将以一个区块链项目为例子,使用TypeScript进行约束、通过memo和useMemo等函数来实现页面高频请求数据时的性能优化。还会使用react-query库来处理接口请求和数据缓存等处理、进行国际化语言配置、页面响应式处理、以及结合AndDesign UI框架来构建一个完整的前台项目。关注本栏目,会实时更新。

相关推荐
恋猫de小郭5 分钟前
Firebase 如何让全球 Android 和 Flutter 开发者集体 Build Fail
android·前端·flutter
墨白曦煜5 分钟前
智能体架构范式总结(React、Plan-And-Solve、Reflection)
前端·react.js·前端框架
qq_426003968 分钟前
多语言新增语种全量测试策略的测试范围
前端·javascript·python·自动化
frjc20 分钟前
Node.js 与 npm 极简安装教程
前端·npm·node.js
IMPYLH21 分钟前
HTML 的 <main> 元素
前端·html
深念Y23 分钟前
微服务抽取路线图:从胖单体到 ARM 集群
前端·arm开发·数据库·后端·微服务·云原生·架构
雪芽蓝域zzs40 分钟前
Vue3 + Vite本地模拟数据(读取 JSON 数据)
前端
亿元程序员42 分钟前
还有高手?用Shader让图片中的3D圆环转起来!
前端
灯澜忆梦44 分钟前
【基于GO的Web开发14】gin请求重定向
前端·后端·golang·gin
qq_452396231 小时前
第十一篇:《前端性能优化体系:从加载到交互的全链路》
前端·性能优化·交互