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

本文主要是介绍React学习计划-React16--React基础(五)脚手架创建项目、todoList案例、配置代理、消息订阅与发布,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、使用脚手架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})

这篇关于React学习计划-React16--React基础(五)脚手架创建项目、todoList案例、配置代理、消息订阅与发布的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/531401

相关文章

使用Python和Pyecharts创建交互式地图

《使用Python和Pyecharts创建交互式地图》在数据可视化领域,创建交互式地图是一种强大的方式,可以使受众能够以引人入胜且信息丰富的方式探索地理数据,下面我们看看如何使用Python和Pyec... 目录简介Pyecharts 简介创建上海地图代码说明运行结果总结简介在数据可视化领域,创建交互式地

Java Stream流使用案例深入详解

《JavaStream流使用案例深入详解》:本文主要介绍JavaStream流使用案例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录前言1. Lambda1.1 语法1.2 没参数只有一条语句或者多条语句1.3 一个参数只有一条语句或者多

IntelliJ IDEA 中配置 Spring MVC 环境的详细步骤及问题解决

《IntelliJIDEA中配置SpringMVC环境的详细步骤及问题解决》:本文主要介绍IntelliJIDEA中配置SpringMVC环境的详细步骤及问题解决,本文分步骤结合实例给大... 目录步骤 1:创建 Maven Web 项目步骤 2:添加 Spring MVC 依赖1、保存后执行2、将新的依赖

MySQL 中的 JSON 查询案例详解

《MySQL中的JSON查询案例详解》:本文主要介绍MySQL的JSON查询的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录mysql 的 jsON 路径格式基本结构路径组件详解特殊语法元素实际示例简单路径复杂路径简写操作符注意MySQL 的 J

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

Python Transformers库(NLP处理库)案例代码讲解

《PythonTransformers库(NLP处理库)案例代码讲解》本文介绍transformers库的全面讲解,包含基础知识、高级用法、案例代码及学习路径,内容经过组织,适合不同阶段的学习者,对... 目录一、基础知识1. Transformers 库简介2. 安装与环境配置3. 快速上手示例二、核心模

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方