2022最新React项目实战(React后台管理系统、TypeScript+React18)_react实战项目,react项目实战资源-CSDN下载

共3个文件

pdf：3个

react.js

typescript

5星 · 超过95%的资源需积分: 2 156 浏览量 2023-05-12 14:38:00 上传评论 2 收藏 1.5MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

【2022最新】React项目实战(React后台管理系统、TypeScript+React18).zip （3个子文件）

【2022最新】React项目实战(React后台管理系统、TypeScript+React18)

React通用后台管理系统-笔记3.pdf 441KB

React通用后台管理系统-笔记2.pdf 564KB

React通用后台管理系统-笔记1.pdf 595KB

环境

Ant Design of React官网：https://ant.design/docs/react/introduce-cn

一、创建项目

打开package.json，参考以下各模块版本：

下载后进入到项目文件夹，安装package.json中的包：

尝试更改package.json启动命令：

二、项目目录初始化

删除掉官方自带而对我们暂时帮助不大的文件。

删除src下除了main.tsxs和App.tsx的其他文件；

主文件/src/main.tsx修改成：

node:

16.17.1

npm:

8.15.0

npm init vite

Project name: lege-management

Select a framework: react

Select a variant: react-ts

"dependencies": {

 "react": "^18.2.0",

 "react-dom": "^18.2.0",

 "react-redux": "^7.2.8",

 "react-router-dom": "^6.3.0",

 "redux": "^4.1.2"

npm i  

"scripts": {

 "dev": "vite --host --port 3002",

 "build": "tsc && vite build",

 "preview": "vite preview"

}

App.tsx文件修改成：

三、样式初始化

【注：乐哥认为reset-css比Normalize.css更直接，干净利落去除默认样式，更适合在企业里的场景，

所以用reset-css，而不用Normalize.css】

路径下执行以下命令，安装reset-css：

在src/main.tsx中引入reset-css：

四、scss的安装和初步使用

安装sass :

src下新建assets/styles/global.scss：

import React from 'react'

import ReactDOM from 'react-dom/client'

import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(

<React.StrictMode>

 <App />

</React.StrictMode>

)

import { useState } from 'react'

function App() {

const [count, setCount] = useState(0)

return (

 <div className="App">

  顶级组件

 </div>

)

}

export default App

npm i reset-css

import React from 'react'

import ReactDOM from 'react-dom/client'

import "reset-css"

import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(

<React.StrictMode>

 <App />

</React.StrictMode>

)

# 安装sass  vite中很方便，loader这些都不用自己配置，只需要安装好即可使用

npm i --save-dev sass

main.tsx中引入全局样式

五、配置项目路径别名

5.1、路径别名的配置

目前ts对@指向src目录的提示是不支持的，vite默认也是不支持的。

所以需要手动配置@符号的指向

在vite.conﬁg.ts中添加配置：

这时候引入的会path模块报红，但其实我们已经有node，所以就已经有path模块，只是缺少ts的一些

声明配置。

所以需要安装关于node这个库的ts声明配置

$color:#eee;

body{

 // 禁止选中文字

 user-select:none;

 background-color: $color;

}

img{

 // 禁止拖动图片

 -webkit-user-drag:none;

}

import React from 'react'

import ReactDOM from 'react-dom/client'

import "reset-css"

import "./assets/styles/global.scss"

import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(

<React.StrictMode>

 <App />

</React.StrictMode>

)

import path from "path"

// https://vitejs.dev/config/

export default defineConfig({

plugins: [react()],

resolve:{

 alias:{

  "@":path.resolve(__dirname,'./src')

 }

}

})

npm i -D @types/node

安装成功就没有报红了,如果import后面的path报红，就把引入换成 import * as path from

'path';

5.2、配置路径别名的提示

虽然现在路径别名已经有了，但是在文件中输入@是没有提示路径的

需要我们在tsconﬁg.json中：添加两项配置

配置好之后敲@后就有路径资源提示了

六、scss模块化

6.1、scss的进一步使用

src下新建components文件夹

components文件夹下新建Comp1文件夹，新建index.tsx和comp1.scss

src/components/Comp1/index.tsx中：

src/components/Comp1/comp1.scss中：

components文件夹下新建Comp2文件夹，新建index.tsx:

"compilerOptions": {

 ...

 "baseUrl": "./",

 "paths": {

  "@/*": [

   "src/*"

  ]

 }

import "./comp1.scss"

function Comp() {

return (

 <div className="box">

   <p>这是Comp1里面的组件</p>

 </div>

)

}

export default Comp

.box{

 color:red

}

在App.tsx中使用这两个组件：

此时会发现，Comp2/index.tsx中没有引入comp1.scss竟然也有box的样式！！！

说明Comp1的引入comp1.scss就是全局引入，这不是我们要的现象，所以这时候我们就需要用到模块

化css

6.2、scss的模块化

src/components/Comp1/comp1.scss 改名为 comp1.module.scss

在comp1.tss中：

这样就不会影响其他组件了。

！！注意：styles.box 的 box 在 .module.scss 文件中只能是类名，标签名字不起作用

// ！！！注意，在Comp2组件中不引入上面的comp1.scss样式

function Comp() {

return (

 <div className="box">

   <p>这是Comp2里面的组件</p>

 </div>

)

}

export default Comp

import { useState } from 'react'

import Comp1 from "./components/Comp1"

import Comp2 from "./components/Comp2"

function App() {

const [count, setCount] = useState(0)

return (

 <div className="App">

  <Comp1></Comp1>

  <Comp2></Comp2>

 </div>

)

}

export default App

// 修改引入的语句

import styles from "./comp1.module.scss";

function Comp() {

return (

  // 修改类名编程模块化写法

 <div className={styles.box}>

   <p>这是Comp1里面的组件</p>

 </div>

)

}

export default Comp

评论收藏

内容反馈

AshleyK

2023-07-26

这个React项目实战对新手来说非常友好，能够迅速上手。
啊看看

2023-07-26

文件中的示例代码丰富，能够帮助开发者更好地理解和应用React框架。
蓝洱

2023-07-26

使用TypeScript开发React项目，代码更加稳定可靠，减少了潜在bug的出现概率。
Xhinking

2023-07-26

文件中的React后台管理系统设计得很简洁实用，能够满足大部分需求。
老许的花开

2023-07-26

React18的引入进一步提升了项目的性能和用户体验，页面加载速度明显快了起来。

_揽

粉丝: 3w+

2022最新React项目实战(React后台管理系统、TypeScript+React18)

react最全项目实战

react 项目实战 使用react搭建酒店后端管理系统 第一讲 登录功能

react+antd搭建后台管理框架

react-native学习代码包括项目（React Native跨平台开发，从零基础入门到项目实战-6天）

react-admin：React + AntD后台管理系统解决方案

react-antd实现一个后台管理系统

2019 react入门至高阶实战，含react hooks

react入门实战项目-类印象笔记应用源码

React前后端项目实战.zip

基于TypeScript+React拖动配置大屏的后台管理系统源码+项目部署操作说明.zip

React + Typescript + vite 后台管理系统

react18 vite antd design ts 后台管理模版

react模板react项目模板React18+webpack5+TypeScript4+mobx6+react-router-dom6.zip

基于React18、React-Router V6、Redux Vite2、Ant-Design 开源的一套后台管理框架

基于 React hooks + Typescript + Cesium 的 三维 webgis 实战系列教程数据

React开发实战完整版，直接下载

react单页面项目实例

react.js完整项目

react入门实战项目_todo-list项目实现_项目源码

React18结合TS视频教程下载2022

(源码)基于 React 和 antd 框架的后台管理系统.zip

基于React18+Typescript+Vite+zustand+Antd+unocss且超级好用的中后台管理框架

(源码)基于React和Umi框架的Monorepo企业级中后台管理系统.zip

react-antd-ts-admin:react + antd + typescript的后台管理系统

2022升级 React18+TS高仿AntD从零到一打造组件库

react-为typescript而生基于redux的前端数据流管理方案

nestjs+mysql(redis)+react+typescript+swagger。后台管理系统。nestjs学习.zip

typescript+react+webpack+react-bootstrap搭建

基于React和Ant Design的昆仑管理系统前端设计源码

SMM项目⑦:登录、注销与注册功能

IPO指导手册（46页）.zip

最新资源

react 项目实战使用react搭建酒店后端管理系统第一讲登录功能

基于 React hooks + Typescript + Cesium 的三维 webgis 实战系列教程数据