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将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

SpringCloud动态配置注解@RefreshScope与@Component的深度解析

《SpringCloud动态配置注解@RefreshScope与@Component的深度解析》在现代微服务架构中,动态配置管理是一个关键需求,本文将为大家介绍SpringCloud中相关的注解@Re... 目录引言1. @RefreshScope 的作用与原理1.1 什么是 @RefreshScope1.

SpringKafka消息发布之KafkaTemplate与事务支持功能

《SpringKafka消息发布之KafkaTemplate与事务支持功能》通过本文介绍的基本用法、序列化选项、事务支持、错误处理和性能优化技术,开发者可以构建高效可靠的Kafka消息发布系统,事务支... 目录引言一、KafkaTemplate基础二、消息序列化三、事务支持机制四、错误处理与重试五、性能优

SpringIntegration消息路由之Router的条件路由与过滤功能

《SpringIntegration消息路由之Router的条件路由与过滤功能》本文详细介绍了Router的基础概念、条件路由实现、基于消息头的路由、动态路由与路由表、消息过滤与选择性路由以及错误处理... 目录引言一、Router基础概念二、条件路由实现三、基于消息头的路由四、动态路由与路由表五、消息过滤

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

springboot security之前后端分离配置方式

《springbootsecurity之前后端分离配置方式》:本文主要介绍springbootsecurity之前后端分离配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的... 目录前言自定义配置认证失败自定义处理登录相关接口匿名访问前置文章总结前言spring boot secu