搭建环境的时候,我们必须要先确保环境有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. 关于微人事中POI导入文件到数据库的异常以及自己的一些技术心得

    前言 在近四个月的时间里面,我的微人事项目才逐渐接近尾声,在昨天的测试接口中出现了两次数组越界以及一次空指针异常,三处异常我都通过吊事bug根据项目实际情况解决了,但是在空指针异常那里还是带有疑问,起 ...

  2. Centos7 安装 codeblocks 搭建 C++ 集成开发环境

    1 安装GCC和G++ yum install gcc yum install gcc-c++ 2 安装gtk-devel 默认没有安装开发所需要的文档 yum install gtk* 3 安装wx ...

  3. 好奇心驱使下试验了 chatGPT 的 js 代码的能力

    手边的项目中有个函数,主要实现图片分片裁剪功能.可以优化一下. 也想看看 chatGPT 的代码理解能力,优化能力,实现能力,用例能力. 于是有了这篇文章. 实验结果总结: chatGPT 确实强大, ...

  4. Linux shell和环境变量

    环境变量 存储有关shell会话和工作环境信息:允许在内存中存储数据. 注意什么时候要用$ 什么时候不用$:用到变量,需要$;操作变量,不需要$.printenv除外 分为两类: 全局变量:对shel ...

  5. [OpenCV-Python] 13 颜色空间转换

    文章目录 OpenCV-Python:IV OpenCV中的图像处理 13 颜色空间转换 13.1 转换颜色空间 13.2 物体跟踪 13.3 怎样找到要跟踪对象的 HSV 值? OpenCV-Pyt ...

  6. std::cin 和 std::getline 混用的问题

    如果存在如下的输入, 11 is a prime 考虑如下的程序, std::cin>>number; std::getline(std::cin,input) std::cin 在读取数 ...

  7. ET–异步协程使用–TimerComponent篇

    之前可能也有群友写过一些关于ET框架中TimerComponent的使用教程,我这里写下关于TimerComponent的常规使用跟一些不常规使用的方法以及一些情况下需要使用到的不同的函数. 先来看看 ...

  8. SQLLabs靶场 less11-20

    SQLLabs靶场 less11-20 Less-11-16 请求方式 注入类型 拼接方式 POST 联合.报错.布尔盲注.延时盲注 username='x'11 请求方式 注入类型 拼接方式 POS ...

  9. "树形List"与"扁平List"互转(Java实现)

    背景:在平时的开发中,我们时常会遇到下列场景 公司的组织架构的数据存储与展示 文件夹层级的数据存储与展示 评论系统中,父评论与诸多子评论的数据存储与展示 ...... 对于这种有层级的结构化数据,就像 ...

  10. 使用STM32CubeMX生成ThreadX实时操作系统工程模板

    博客主页:链接.转载请注明出处! 由于需要在stm32上使用USB Host CDC-ECM,连接EC20发送数据到服务器,接触到了ThreadX实时操作系统. 在调研过程中,发现stm32官方USB ...