搭建环境的时候,我们必须要先确保环境有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的更多相关文章

  1. 微信小程序里使用 Redux 状态管理

    微信小程序里使用 Redux 状态管理 前言 前阵子一直在做小程序开发,采用的是官方给的框架 wepy , 如果还不了解的同学可以去他的官网查阅相关资料学习:不得不说的是,这个框架确相比于传统小程序开 ...

  2. TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建

    1.TypeScript完全解读-开发环境搭建 初始化项目 手动创建文件夹 D:\MyDemos\tsDemo\client-demo 用VSCode打开 npm init:初始化项目 然后我们的项目 ...

  3. react+redux状态管理实现排序 合并多个reducer文件

    这个demo只有一个reducer 所以合并reducer这个demo用不到 ,但是我写出来这样大家以后可以用到,很好用,管理多个reducer,因为只要用到redux就不会只有一个reducer所以 ...

  4. react之redux状态管理

    1.传统MVC框架的缺陷 模型(model)-视图(view)-控制器(controller)的缩写 V即View视图:用户看到并与之交互的界面. M即Model模型是管理数据:很多业务逻辑都在模型中 ...

  5. 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件

    实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...

  6. 《React后台管理系统实战 零》:基础笔记

    day01 1. 项目开发准备 1). 描述项目 2). 技术选型 3). API接口/接口文档/测试接口 2. 启动项目开发 1). 使用react脚手架创建项目 2). 开发环境运行: npm s ...

  7. react后台管理系统路由方案及react-router原理解析

        最近做了一个后台管理系统主体框架是基于React进行开发的,因此系统的路由管理,选用了react-router(4.3.1)插件进行路由页面的管理配置. 实现原理剖析 1.hash的方式   ...

  8. Redux状态管理方法与实例

    状态管理是目前构建单页应用中不可或缺的一环,也是值得花时间学习的知识点.React官方推荐我们使用Redux来管理我们的React应用,同时也提供了Redux的文档来供我们学习,中文版地址为http: ...

  9. React项目中使用Mobx状态管理(二)

    并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...

  10. 【共享单车】—— React后台管理系统开发手记:主页面架构设计

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

随机推荐

  1. 【性能优化】优雅地优化慢查询:缓存+SQL修改组合拳

    问题描述 单例数据库模式中,后端高并发请求多(读多写少),导致数据库压力过大,关键接口响应变慢,严重影响体验. 需求 减少接口的响应时间. 寻找解决方案 由于问题主要处在数据库压力过大的情况,采用两种 ...

  2. pysimplegui之运行多个窗口

    运行多个窗口 这就是 PySimpleGUI 继续简单的地方,但问题空间刚刚进入"复杂"领域. 如果您希望在事件循环中运行多个窗口,那么有两种方法可以做到这一点. 当第二个窗口可见 ...

  3. [Linux]常用命令之【diff】

    1 概述 2 diff命令 diff 命令是 Linux 上比较重要的命令行工具,用于比较文本内容,并找到不相同的地方,diff 在命令行中打印每一行的改动之处. diff 程序的输出被称为补丁(pa ...

  4. 全网最详细中英文ChatGPT-GPT-4示例文档-智能多功能学习机从0到1快速入门——官网推荐的48种最佳应用场景(附python/node.js/curl命令源代码,小白也能学)

    目录 Introduce 简介 setting 设置 Prompt 提示 Sample response 回复样本 API request 接口请求 python接口请求示例 node.js接口请求示 ...

  5. 部署:戴尔iDRAC+Ubuntu 18.04系统安装

    Ubuntu镜像下载链接:http://mirrors.aliyun.com/ubuntu-releases/18.04/ 1.登录戴尔管理口 2.点击虚拟控制台 3.选择镜像 4.挂载镜像 5.选择 ...

  6. python过滤列表元素

    li = [1, 2, 3, 4, 5, 6] def fun(item, num): if item == num: return 1 else: return 0 def fun1(item, n ...

  7. jquery全选,全不选,反选,获取选择框的值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 明解STM32—GPIO应用设计篇之API函数及配置使用技巧

    一.前言 本篇开始对STM32的GPIO在实际开发设计中的使用配置和技巧进行探讨,可以先去回顾下之前介绍的GPIO的相关理论基础知识包括基本结构,工作模式和寄存器原理. 了解过STM32的GPIO相关 ...

  9. 痞子衡嵌入式:恩智浦i.MX RT1xxx系列MCU启动那些事(12)- 从SD/eMMC启动

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MXRT1xxx系列MCU的SD/eMMC卡启动. 最近在恩智浦官方社区上支持了一个关于 i.MXRT 从 SD 卡启动的案例 ...

  10. 【Azure Developer】Azure AD 注册应用的 OAuth 2.0 v2 终结点获取的 Token 解析出来依旧为v1.0, 这是什么情况!

    问题描述 使用 Azure AD 注册应用 Oauth2 v2.0的终结点(OAuth 2.0 token endpoint (v2):https://login.partner.microsofto ...