React后台管理系统(TypeScript、Redux状态管理)环境搭建01
搭建环境的时候,我们必须要先确保环境有node环境和npm环境,如下使用cmd命令

确保自己有了这两个环境之后我们就可以开始搭建项目,首先找一个文件夹,这个文件夹用来初始化当前环境,例如,我这里选择的是E盘的learn-react目录下:依次敲击一下命令:

选择的时候选择React和TypeScript,这时候就可以去文件夹中使用vscode打开项目,发现有初始项目只有2个依赖:

我们需要添加依赖:
"react-redux": "8.0.5",
"react-router-dom": "6.4.4",
"redux": "^4.2.0"
然后使用npm i命令,进行下载依赖

下载完毕之后,就可以使用npm run dev来启动项目

点击即可访问主页,我这里展示如下:

可以看到,主页展示成功。
我们这里还可以在启动的时候加上条件参数例如 --host :这个参数就是来展示我们的本地地址和网络访问的地址; --port 端口号 =>这个使用来指定启动的时候的端口号

React后台管理系统(TypeScript、Redux状态管理)环境搭建01的更多相关文章
- 微信小程序里使用 Redux 状态管理
微信小程序里使用 Redux 状态管理 前言 前阵子一直在做小程序开发,采用的是官方给的框架 wepy , 如果还不了解的同学可以去他的官网查阅相关资料学习:不得不说的是,这个框架确相比于传统小程序开 ...
- TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建
1.TypeScript完全解读-开发环境搭建 初始化项目 手动创建文件夹 D:\MyDemos\tsDemo\client-demo 用VSCode打开 npm init:初始化项目 然后我们的项目 ...
- react+redux状态管理实现排序 合并多个reducer文件
这个demo只有一个reducer 所以合并reducer这个demo用不到 ,但是我写出来这样大家以后可以用到,很好用,管理多个reducer,因为只要用到redux就不会只有一个reducer所以 ...
- react之redux状态管理
1.传统MVC框架的缺陷 模型(model)-视图(view)-控制器(controller)的缩写 V即View视图:用户看到并与之交互的界面. M即Model模型是管理数据:很多业务逻辑都在模型中 ...
- 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件
实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...
- 《React后台管理系统实战 零》:基础笔记
day01 1. 项目开发准备 1). 描述项目 2). 技术选型 3). API接口/接口文档/测试接口 2. 启动项目开发 1). 使用react脚手架创建项目 2). 开发环境运行: npm s ...
- react后台管理系统路由方案及react-router原理解析
最近做了一个后台管理系统主体框架是基于React进行开发的,因此系统的路由管理,选用了react-router(4.3.1)插件进行路由页面的管理配置. 实现原理剖析 1.hash的方式 ...
- Redux状态管理方法与实例
状态管理是目前构建单页应用中不可或缺的一环,也是值得花时间学习的知识点.React官方推荐我们使用Redux来管理我们的React应用,同时也提供了Redux的文档来供我们学习,中文版地址为http: ...
- React项目中使用Mobx状态管理(二)
并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...
- 【共享单车】—— React后台管理系统开发手记:主页面架构设计
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
随机推荐
- Charlotte Holmes series
Charlotte Holmes Novel The charactors are adorable. Jamie and Charlotte are a very cute couple. More ...
- QtDesigner第一个程序
用QTDesigner设计界面简单多了,而且更加直观.先看下效果图,是不是比我们用代码写的布局要美观多了 制作.ui界面 (1).打开Pycharm的界面设计工具QTDsigner Pycharm-& ...
- Java线程池浅析
1. 什么是线程池?我们为什么需要线程池? 线程池即可以存放线程的容器,若干个可执行现成在"容器"中等待被调度. 我们都知道,线程的生命周期中有以下状态:新建状态(New).就绪状 ...
- day31:socketserver&hashlib&hmac&TCP登录
目录 1.socketserver:实现TCP协议下Server端的并发 2.hashlib模块 3.hashlib应用:文件校验 4.hmac应用:服务器的合法性校验 5.TCP登录程序 1.soc ...
- DG:switchover切换操作
问题描述:我们配置DG的目的就是为了在主库出现故障时,备库能够提供服务,保证业务的正常运行,switchover是用户有计划的进行停机切换,能够保证不丢失数据,我记录一下我进行switchover中的 ...
- Dapr和Rainbond集成,实现云原生BaaS和模块化微服务开发
背景 Dapr 是一个开源的分布式应用运行时,帮助开发者构建松耦合的分布式应用程序,具有良好的可扩展性和可维护性.Rainbond 是一款企业级的云原生应用管理平台,提供了丰富的功能和工具,方便开发者 ...
- YII2.0框架分页
这篇文章主要介绍了Yii分页用法,以实例形式详细分析了比较常见的几种分页方法及其应用特点,非常具有实用价值,需要的朋友可以参考下: 在这里我主要联查的 book 表和 book_press 两张表进行 ...
- RDIFramework.NET代码生成器全新V5.0版本发布
RDIFramework.NET代码生成器介绍 RDIFramework.NET代码生成器,代码.文档一键生成. RDIFramework.NET代码生成器集代码生成.各数据库对象文档生成.数据库常用 ...
- 移除List的统一逻辑写法 LeetCode 203
原理:通过创建一个新的结点,放在头结点的前面,作为真正头结点的前驱结点,这样头结点就成为了意义上的非头结点,这样就可以统一操作结点的删除操作. 需要注意的是:这个新的结点是虚拟头结点,真的的头结点依然 ...
- 【Qt6】QWindow类可以做什么
原来的水文标题是"用 VS Code 搞 Qt6",想想还是直接改为"Qt6",反正这个用不用 VS Code 也能搞.虽然我知道大伙伴们都很讨厌 CMake, ...