搭建环境的时候,我们必须要先确保环境有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. python入门教程之十二Open及file操作

    读和写文件 open() 将会返回一个 file 对象,基本语法格式如下: open(filename, mode) filename:包含了你要访问的文件名称的字符串值. mode:决定了打开文件的 ...

  2. dfs实现

    1.思路:从图中的未访问的一个顶点开始,沿着一条路一直走到底,然后这条路尽头的节点,在从另外一条路走到底,不断递归此过程,直到所有遍历完成特点:不撞南墙不回头2.具体实现:当从一个未知的顶点出发,将这 ...

  3. 【云享专刊】开源遇上华为云,OCP架构变身“云原生框架”

    摘要:华为云DTSE团队出品云原生改造指南,助力轻松实践OCP上云. 本文分享自华为云社区<[云享专刊]开源遇上华为云,OCP架构变身"云原生框架">,作者:华为云社区 ...

  4. Matlab蚁群算法求解旅行商问题

    目录 问题展现 解决代码 代码1 输出结果 代码2 输出结果 代码3 输出结果 问题展现 假设有一个旅行商人要拜访全国 31 个省会城市,他需要选择所要走的路径,路径的限制是每个城市只能拜访一次,而且 ...

  5. Java 的 SPI 机制

    什么是SPI机制? SPI机制( Service Provider Interface)是Java的一种服务发现机制,为了方便应用扩展.那什么是服务发现机制?简单来说,就是你定义了一个接口,但是不提供 ...

  6. SpringCloud Gateway 3.x 响应头添加 Skywalking TraceId

    在微服务架构中,一次请求可能会被多个服务处理,而每个服务又会产生相应的日志,且每个服务也会有多个实例.在这种情况下,如果系统发生异常,没有 Trace ID,那么在进行日志分析和追踪时就会非常困难,因 ...

  7. Ajax 以及 Ajax基于Promise封装

    AJAX - 创建 XMLHttpRequest 对象 var xmlhttp = new XMLHttpRequest(); 通过打印实例对象我们发现,我们打印的是 xmlhttp 对象,里面所有的 ...

  8. [OpenCV-Python] 16 图像平滑

    文章目录 OpenCV-Python:IV OpenCV中的图像处理 16 图像平滑 16.1 平均 16.2 高斯模糊 16.3 中值模糊 16.4 双边滤波 OpenCV-Python:IV Op ...

  9. CS144 计算机网络 Lab3:TCP Sender

    前言 在 Lab2 中我们实现了 TCP Receiver,负责在收到报文段之后将数据写入重组器中,并回复给发送方确认应答号.在 Lab3 中,我们将实现 TCP 连接的另一个端点--发送方,负责读取 ...

  10. 极速进化,光速转录,C++版本人工智能实时语音转文字(字幕/语音识别)Whisper.cpp实践

    业界良心OpenAI开源的Whisper模型是开源语音转文字领域的执牛耳者,白璧微瑕之处在于无法通过苹果M芯片优化转录效率,Whisper.cpp 则是 Whisper 模型的 C/C++ 移植版本, ...