React学习计划-React16--React基础(五)脚手架创建项目、todoList案例、配置代理、消息订阅与发布

news2025/1/24 5:12:58

一、使用脚手架create-react-app创建项目

  1. react脚手架
    1. xxx脚手架:用来帮助程序员快速创建一个基于xxx库的模板项目
      1. 包含了所有需要的配置(语法检查、jsx编译、devServe…)
      2. 下载好了所有相关的依赖
      3. 可以直接运行一个简单的效果
    2. react提供了一个用于创建react项目的脚手架库:create-react-app
    3. 项目的整体技术架构为:react+webpack+es6+eslint
    4. 使用脚手架开发的项目特点:模块化、组件化、工程化
  2. 创建项目并启动
    1. 全局安装npm install -g create-react-app
    2. 切换到想创建项目的目录create-react-app react-demo
    3. 进入项目文件夹cd react-demo
    4. 启动项目npm start
    5. 注意:创建项目下载依赖要是特别慢,可以换源create-react-app使用yarn创建react项目
  3. public文件夹index.html介绍
    在这里插入图片描述

二、todoList案例相关知识点

  1. 拆分组件、实现静态组件,注意:className、style的写法
  2. 动态初始化列表,如何确定姜数据放在哪个组件的state中?
    1. 某个组件使用:放在其自身的state
    2. 某些组件使用:放在他们共同的父组件state中(官方称此操作为:状态提升)
  3. 关于父子之间通信:
    1. 【父组件】给【子组件】传递数据:通过props传递
    2. 【子组件】给【父组件】传递数据:通过props传递,要求是父提前给子传递一个函数
  4. 注意defaultCheckedchecked区别,类似还有defaultValuevalue
  5. 状态在哪里,操作状态的方法就在哪里

案例:

  1. 文件目录结构:
    在这里插入图片描述

  2. App.js:
    在这里插入图片描述

  3. app.module.css:
    在这里插入图片描述

  4. Hearder

    • index.jsx
      在这里插入图片描述
    • index.css
      	.search {
      	  width: calc(100% - 20px);
      	  padding: 10px;
      	}
      
  5. List

    • index.jsx
      在这里插入图片描述
    • idnex.css
    ul {
      list-style:  none;
      margin: 0;
      padding: 0;
    }
    
  6. Item

    • index.jsx
      在这里插入图片描述

    • index.module.css

    .li-content{
      display: flex;
      justify-content: space-between;
      padding: 2px 5px;
    }
    .del {
      border: none;
      background: none;
      font-size: 18px;
      font-weight: bold;
      color: red;
    }
    
  7. Footer:

    • index.jsx
      在这里插入图片描述

    • index.module.css

    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      padding: 10px 20px;
      border-top: 1px solid #ccc;
    }
    .count{
      margin-left: 20px;
    }
    button {
      width: 150px;
      height: 40px;
      background-color: rgb(255, 0, 72);
      border-radius: 20px;
      color: #fff;
      cursor: pointer;
    }
    

8.运行效果
在这里插入图片描述

三、配置代理

在这里插入图片描述

  1. 代理到服务器的5000端口,前端端口是3000,请求时候http://localhost:3000/students 所有3000端口下没有的资源都会转发到http://localhost:5000,如果有则不转发
    在这里插入图片描述

  2. 配置多个代理
    在这里插入图片描述

四、消息订阅与发布(pubSub)

  1. 安装**yarn add pubsub-js**
  2. 接收组件List/index.jsx
  // 一挂载好就订阅消息
  import PubSub from 'pubsub-js'
  componentDidMount(){
    this.pub = PubSub.subscribe('defClick', (_, data) => {
      this.setState(data)
    })
  }

  // 取消订阅
  componentWillUnmount(){
    PubSub.unsubscribe(this.pub)
  }
  1. 发布信息Hearder/index.jsx
import PubSub from 'pubsub-js'
PubSub.publish('defClick', {val})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1330105.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Flink快速部署集群,体验炸了!

📢📢📢📣📣📣 哈喽!大家好,我是【IT邦德】,江湖人称jeames007,10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】!😜&am…

【Element】el-table 使用 el-table-infinite-scroll 插件实现滚动加载

虽然 el 官方提供了 Infinite Scroll 无限滚动 组件 但是却不支持 el-table 组件,这就很难受了,还好已经有大佬写好了插件,并且支持 element-plus/infinite-scroll 组件的所有选项。 el-table-infinite-scroll el-table-infinite-scroll 看…

Linux目录切换相关命令@cd/pwd

目录 基础指令 cd命令原型命令的搭配以及效果命令本身cd cd 指定目录 基础指令 pwd命令原型pwd 总结: 基础指令 cd cd 取自英文 Change Directory 的首字母组成。 英文的中文翻译为:更改目录。 很明显该指令是用来更改目录的。 命令原型 cd [Linux路径…

企业“数据入表”之政策及业务模式解读

2023年8月21日,财政部重磅发布了《企业数据资源相关会计处理暂行规定》(以下简称“暂行规定”),该规定将于2024年1月1日正式施行。 “暂行规定”发布后,引起全社会的广泛关注,关注的焦点集中在数据入表概念…

Unity中Shader旋转矩阵(四维旋转矩阵)

文章目录 前言一、围绕X轴旋转1、可以使用上篇文章中,同样的方法推导得出围绕X轴旋转的点阵。2、求M~rotate~ 二、围绕Y轴旋转1、可以使用上篇文章中,同样的方法推导得出围绕Y轴旋转的点阵。2、求M~rotate~ 三、围绕Z轴旋转1、可以使用上篇文章中&#x…

【数据结构之单链表】

数据结构学习笔记---003 数据结构之单链表1、什么是单链表?1.1、概念及结构 2、单链表接口的实现2.1、单链表的SList.h2.1.1、定义单链表的结点存储结构2.1.2、声明单链表各个接口的函数 2.2、单链表的SList.c2.2.1、遍历打印链表2.2.2、销毁单链表2.2.3、打印单链表元素2.2.4…

2023 Intellij IDEA的热部署配置

第一步&#xff1a;导入依赖 <!--热部署--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId></dependency>第二步&#xff1a;配置idea

计算机网络——计算机网络的概述(一)

前言&#xff1a; 面对马上的期末考试&#xff0c;也为了以后找工作&#xff0c;需要掌握更多的知识&#xff0c;而且我们现实生活中也已经离不开计算机&#xff0c;更离不开计算机网络&#xff0c;今天开始我们就对计算机网络的知识进行一个简单的学习与记录。 目录 一、什么…

0.618算法和基于Armijo准则的线搜索回退法

0.618代码如下&#xff1a; import math # 定义函数h(t) t^3 - 2t 1 def h(t): return t**3 - 2*t 1 # 0.618算法 def golden_section_search(a, b, epsilon): ratio 0.618 while (b - a) > epsilon: x1 b - ratio * (b - a) x2 a ratio * (b - a) h_…

Python实现广义最小二乘法线性回归模型(GLS算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 广义最小二乘法&#xff08;Generalized Least Squares&#xff09;是一种回归分析方法&#xff0c;适…

msyql 24day 数据库主从 主从复制 读写分离 master slave 有数据如何增加

目录 环境介绍读写分离纵向扩展横向扩展 数据库主从准备环境主库环境(master)从库配置(slave)状态分析重新配置问题分析 报错解决从库验证 有数据的情况下 去做主从清理环境环境准备数据库中的锁的机制主库配置从库配置最后给主库解锁常见错误 环境介绍 将一个数据库的数据 复…

数据库制作简易工人信息表

代码实现: #include <head.h>int add_msg(sqlite3* ppdb) {int id;char name[20];int age;double salary;//输入要插入的工人信息printf("请输入工号:");scanf("%d",&id);printf("请输入姓名:");scanf("%s",name);printf(&…

idea 注入mapper报错报红的几种解决方案

文章目录 前言方法1&#xff1a;为 Autowired 注解设置required false方法2&#xff1a;用 Resource 替换 Autowired方法3&#xff1a;在Mapper接口上加上Repository注解方法4&#xff1a;用Lombok方法5&#xff1a;把IDEA的警告关闭掉方法6&#xff1a;不用管他 前言 相信大…

2015年第四届数学建模国际赛小美赛A题飞机上的细长座椅解题全过程文档及程序

2015年第四届数学建模国际赛小美赛 A题 飞机上的细长座椅 原题再现&#xff1a; 航空公司座位是指在旅途中乘客可以乘坐的座位。一些航空公司现在推出了新的经济舱“超薄”座位。这些座椅除了重量较轻外&#xff0c;理论上还允许航空公司在不显著影响乘客舒适度的情况下增加运…

Zookeeper的学习笔记

Zookeeper概念 Zookeeper是一个树形目录服务&#xff0c;简称zk。 Zookeeper是一个分布式的、开源的分布式应用程序的协调服务 Zookeeper提供主要的功能包括&#xff1a;配置管理&#xff0c;分布式锁&#xff0c;集群管理 Zookeeper命令操作 zk数据模型 zk中的每一个节点…

初识大数据,一文掌握大数据必备知识文集(3)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

SpringMVC基础知识(持续更新中~)

笔记&#xff1a; https://gitee.com/zhengguangqq/ssm-md/blob/master/ssm%20md%E6%A0%BC%E5%BC%8F%E7%AC%94%E8%AE%B0/%E4%B8%89%E3%80%81SpringMVC.md 细节补充&#xff1a; ​​​​​​​

你还不会排序算法吗

>欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术…

用C实现字符串比较和用C实现字符串逆序输出-----(C每日一编程)

一&#xff0c;字符串比较 参考代码&#xff1a; int fun(char* p, char* q) {int i 0;while (*p *q) {if (*p \0)return 0;else p, q;}return *p - *q; } void main() {int n fun("goods", "people");printf("%d", n); }运行结果&#xf…

九州未来大模型一体机,加速AI应用落地

2023年已接近尾声&#xff0c;对于中国人工智能产业而言&#xff0c;这一年注定成为一个重要的转折点。在不同行业中&#xff0c;人工智能的应用不断涌现&#xff0c;众多大模型如雨后春笋般涌现。然而&#xff0c;在这一发展过程中也不可避免地出现了一系列问题&#xff0c;包…