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框架来构建一个完整的前台项目。关注本栏目,会实时更新。

相关推荐
CHNE_TAO_EMSM几秒前
Android studio 打开文件时自动下载源码
前端·javascript·android studio
一孤程1 小时前
Airtest自动化测试第五篇:小程序与Web测试——跨平台自动化全覆盖
前端·自动化测试·小程序·自动化·测试·airtest
IT_陈寒1 小时前
SpringBoot自动配置不是你以为的那样的智能
前端·人工智能·后端
yume_sibai2 小时前
大屏数据可视化 - 边框红绿呼吸灯实现详解
前端·信息可视化·typescript
Hyyy2 小时前
很多Desktop都在上的Computer Use是什么
前端·llm
慢功夫2 小时前
开篇:VS Code 为什么不是一个普通 React App
前端·visual studio code
你挚爱的强哥2 小时前
Vue2 实现 1.5s 十连击监听(连续点击若干次),封装通用可复用点击检测工具,不用 data!Vue 封装通用连击监听方法,支持自定义时长与点击次数
前端·javascript·vue.js
huashengzsj3 小时前
Shopify个人建站如何搭建独立站:从零开始的完整指南
前端·网络·人工智能
程序猿小泓3 小时前
从 Claude Code 学 Agent Harness:一个前端工程师的 AI Agent 学习笔记
前端·人工智能·学习
柒和远方4 小时前
从审计日志到可下载证据包:事务型 Outbox、租约 fencing 与保留水位
前端·后端·架构