b站React禹哥版视频笔记-React应用（基于react脚手架）

已于 2022-07-09 20:36:16 修改
阅读量636 收藏
点赞数
分类专栏： # b站视频-尚硅谷禹哥React视频笔记 b站视频笔记 文章标签： react.js javascript 前端
于 2022-07-03 20:38:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44286392/article/details/125588945
版权

目录

前言

上一篇：React面向组件编程（下）
本篇内容：React应用（基于react脚手架）

一、初始化react脚手架

1.react脚手架：

1.xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目

a.包含了所有需要的配置（语法检查、jsx编译、devServer…）
b.下载好了所有相关的依赖
c.可以直接运行一个简单效果

2.react提供了一个用于创建react项目的脚手架库: create-react-app
3.项目的整体技术架构为: react + webpack + es6 + eslint
4.使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

2.创建项目并启动

  1. 全局安装：npm i -g create-react-app
  2. 切换到你想创建项目的目录下，使用命令：create-react-app xxx(项目名，比如，hello-react)
  3. 进入项目文件夹：cd hello-react
  4. 启动项目：yarn start或npm start
    注：若create-react-app安装失败，可以尝试更换npm源，更换成淘宝的，参考
    在这里插入图片描述
    在这里插入图片描述
    安装成功后：在这里插入图片描述
    启动项目：在这里插入图片描述
    会让你选择用哪个浏览器打开，成功的页面（即成功运行了react官方给的模板项目）：

二、脚手架文件介绍

1.public

public文件一般存静态资源，比如页面、样式、公共的图片

以后写项目时，只有一个.html文件，也就是单页面应用(SPA)

favicon.icon ------ 网站页签图标
index.html -------- 主页面
logo192.png ------- logo图
logo512.png ------- logo图
manifest.json ----- 应用加壳的配置文件
robots.txt -------- 爬虫协议文件

2.src

App.js：定义了一个组件App
App.css：组件App的样式文件
App.test.js：测试App的，我们几乎不用
index.css：通用的样式
index.js：入口文件
logo.svg：logo图片
reportWebVitals.js：记录页面性能，里面用了web-vitals库
aetupTest.js：用于组件测试，里面用了第三方库web-vitals

三、一个简单的Hello组件

后缀同为.js，区分组件文件和普通js文件：
1.组件文件首字母大写，普通js文件首字母小写
2.把组件文件后缀改为.jsx

上图中的写法在App.js中引入组件时略显臃肿，下图中是另一种写法：

四、样式的模块化

当两个组件样式中有相同的className时，后引入的组件样式会覆盖掉之前的样式

  1. 把文件名改为index.module.css
  2. 引入css文件时：import hello from './index.module.css'
  3. 使用样式时：className={hello.title}

样式的模块化用的不是很多，一般用less的嵌套写法即可

五、vscode中react插件的安装

在vscode的插件市场中搜索react👇
在这里插入图片描述
比如，一些代码片段：
rcc：类式组件
rfc：函数式组件

六、组件化编码流程

tips：
①打开终端快捷键：ctrl + ~
②停止运行快捷键：ctrl + C

  1. 拆分组件: 拆分界面,抽取组件

  2. 实现静态组件: 使用组件实现静态页面效果

  3. 实现动态组件
    3.1 动态显示初始化数据

    3.1.1 数据类型
3.1.2 数据名称
3.1.2 保存在哪个组件?

    3.2 交互(从绑定事件监听开始)

七、组件的组合使用-TodoList案例

功能: 组件化实现此功能

  1. 显示所有todo列表
  2. 输入文本, 点击按钮显示到列表的首位, 并清除输入的文本

1.静态组件

  1. App.js中引入模块的顺序
    ①外部模块②自己的模块③样式文件
  2. 拆分List与Item时，先把List整个拆分，再在List里面拆分Item

2.动态初始化列表

数据存放在App的state中，传给子组件List：

export default class App extends Component{
    // 初始化状态
    state={todos:[
        {id:'001',name:'吃饭',done:true},
        {id:'002',name:'睡觉',done:true},
        {id:'003',name:'敲代码',done:false},
    ]} 

    render(){
        const {todos}=this.state;
        return (
                <div className="todo-container">
                    <div className="todo-wrap">
                    <Header/>
                    <List todos={todos}/>
                    <Footer/>
                    </div>
                </div>
        )
    }
}

把List中的数据批量传递给其子组件Item：

export default class List extends Component{
    render(){
        const {todos}=this.props;
        return (
            <ul className="todo-main">
                {
                    todos.map(todo=>{
                        // return <Item key={todo.id} id={todo.id} name={todo.name} done={todo.done}/>
                        return <Item key={todo.id} {...todo}/>  // 批量传递
                    })
                }
            </ul>
        )
    }
}

Item组件接收数据：

export default class Item extends Component {
  render() {
    const {name,done}=this.props
    return (
          <li>
            <label>
                <input type="checkbox" defaultChecked={done}/>
                <span>{name}</span>
            </label>
            <button className="btn btn-danger" style={{display:'none'}}>删除</button>
          </li>
    )
  }
}

3.添加todo

父给子传数据：props
子给父传数据：利用函数

比如子组件Header给父组件App传数据：

需要给input框绑定一个键盘事件：onKeyUp

专门生成唯一id的库：uuid
安装：yarn add uuid或者npm i uuid
但这个库有点大，不推荐，推荐nanoid

import React, { Component } from 'react'
import {nanoid} from 'nanoid'

import './index.css'

export default class Header extends Component {
  handleKeyUp=(event)=>{
    // 解构赋值获取keyCode,target
    const {keyCode,target}=event
    // 判断按下的是否为回车键
    if(keyCode!==13) return
    //添加的todo名字不能为空
    if(target.value.trim()===''){
      alert('输入不能为空！')
      return
    }
    // 准备好一个todo对象
    const todoObj={id:nanoid(),name:target.value,done:false}
    // 将todoObj传递给App
    this.props.addTodo(todoObj)
    // 清空输入
    target.value=''
  }
  render() {
    return (
      <div className="todo-header">
            <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
      </div>
    )
  }
}

4.鼠标移入效果

鼠标悬浮在某一项上面时，该项高亮，且后面出现“删除”按钮

export default class Item extends Component {
  state={mouse:false}

  handleMouse=(flag)=>{
    return ()=>{
      console.log(flag)
      this.setState({mouse:flag})
    }
  }

  render() {
    const {name,done}=this.props
    const {mouse} = this.state
    return (
          <li style={{backgroundColor:mouse?'#ddd':'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
            <label>
                <input type="checkbox" defaultChecked={done}/>
                <span>{name}</span>
            </label>
            <button className="btn btn-danger" style={{display:mouse?'block':'none'}}>删除</button>
          </li>
    )
  }
}

3.添加一个todo

根据勾选或者未勾选，更改状态里的值

tips：状态在哪里，操作状态的方法就在哪里
App给List传递props：

<List todos={todos} updateTodo={this.updateTodo}/>

// updateTodo用于更新一个todo对象
    updateTodo=(id,done)=>{
        // 获取状态中的todos
        const {todos}=this.state
        // 匹配 处理数据
        const newTodos=todos.map((todoObj)=>{
            if(todoObj.id===id) return {...todoObj,done}
            else return todoObj
        })
        this.setState({todos:newTodos})
    };

List给Item传递props：

return <Item key={todo.id} {...todo} updateTodo={updateTodo}/>

Item中的回调函数;

 // 勾选、取消勾选某一个todo的回调
  handleCheck=(id)=>{
    return (event)=>{
      // console.log(id,event.target.checked)
      this.props.updateTodo(id,event.target.checked)
    }
  }

4.对props进行限制

安装第三方库：yarn add prop-types
引入：import PropTypes from 'prop-types'
对传递的props进行类型以及必要性的限制：
Header组件中：

static propTypes={
    addTodo:PropTypes.func.isRequired
  }

List组件中：

static propTypes={
        todos:PropTypes.array.isRequired,
        updateTodo:PropTypes.func.isRequired
    }

5.删除一个todo

App组件中：

// deleteTodo用于删除一个todo对象
    // tips：不能用delete，因为delete是个关键字，用于删除对象中的某个属性
    deleteTodo=(id)=>{
        // 获取原来的todos
        const {todos}=this.state
        // 删除指定id的todo对象
        const newTodos=todos.filter((todoObj)=>{
            return todoObj.id!==id
        })
        // 更新状态
        this.setState({todos:newTodos})
    }

Item组件中：

// 删除一个todo的回调
  handleDelete=(id)=>{
    // console.log('通知App删除',id)
    // alert键只有确认
    if(window.confirm('确定删除吗？')){
      this.props.deleteTodo(id)
    }
  }

6.实现底部功能–Footer

tips：defaultChecked只在第一次时起作用
App组件给子组件Footer传递函数：

<Footer todos={todos} checkAllTodo={this.checkAllTodo} checkAllDone={this.checkAllDone}/>

在App组件中修改状态的值：

// checkAllTodo用于全选
    checkAllTodo=(done)=>{
        // 获取原来的todos
        const {todos}=this.state
        // 加工数据
        const newTodos=todos.map((todoObj)=>{
            return {...todoObj,done}
        })
        this.setState({todos:newTodos})
    }

    //checkAllDone用于清除已完成任务 
    checkAllDone=()=>{
        // 获取原来的todos
        const {todos}=this.state
        // 过滤数据
        const newTodos=todos.filter((todoObj)=>{
            //return todoObj.done===false
            return !todoObj.done
        })
        this.setState({todos:newTodos})
    }

子组件Footer调用父组件中的函数：

export default class Footer extends Component {
  // 全选checkbox的回调
  handleCheckAll=(event)=>{
    this.props.checkAllTodo(event.target.checked)
  }

  // 清除已完成任务的回调
  handleCheckAllDone=()=>{
    this.props.checkAllDone()
  }
  
  render() {
    const {todos}=this.props
    // 已完成的个数
    const doneCount=todos.reduce((pre,todo)=>{return pre + (todo.done?1:0)},0)
    // 总数
    const total=todos.length
    return (
        <div className="todo-footer">
            <label>
            <input type="checkbox" onChange={this.handleCheckAll} checked={doneCount===total&&total!==0?true:false}/>  
            </label>
            <span>
            <span>已完成{doneCount}</span> / 全部{total}
            </span>
            <button className="btn btn-danger" onClick={this.handleCheckAllDone}>清除已完成任务</button>
        </div>
    )
  }
}

7.总结TodoList案例

  1. 动态初始化列表，如何确定将数据放在哪个组件的state中？
    某个组件使用：放在其自身的state中
    某些组件使用：放在它们共同的父组件的state中(官方称此操作为状态提升)
  2. 关于父子组件之间通信：
    父–>子传递数据：通过props
    子–>父传递数据：通过props，要求父提前给子传递一个函数
  3. 注意defaultChecked和checked的区别，类似的还有defaultValue和value
  4. 状态在哪里，操作状态的方法就在哪里

写在后面

这周的进度比较慢，今天已经周六了，原计划明天看到p100，现在才到p65
因为从周一到周三调了毕设的代码，现在也算跑通了
这两天要赶赶进度了
下一篇是第四章的内容：React ajax

七里香777
关注
专栏目录
React尚硅谷张天禹笔记（更新中......）
weixin_52617854的博客
06-05 3218
React笔记
如何命令行结束react程序_React学习笔记 --- React脚手架
weixin_39888807的博客
10-23 1932
React学习笔记 --- React脚手架一 、 脚手架的作用1.1 为什么需要脚手架根本原因: 前端项目的复杂化不会再是在HTML中引入几个css文件，引入几个编写的js文件或者第三方的js文件这么简单；需要引入的css文件和js文件增多引入的css和js可能还需要在引入别的css和js文件比如css可能是使用less、sass等预处理器进行编写，我们需要将它们转成普通的css才能被浏览器解析...
react视频教程百度云资源链接
kksw1121
05-31 7110
https://pan.baidu.com/s/1UmBmxC0LJrPTopcKK3cq-Q 提取码：40ul
b站React禹哥版视频笔记-React入门
weixin_44286392的博客
06-26 987
react框架学习笔记
React全家桶开发谷粒前后端项目（张天禹老师）
shenruiaaa的博客
08-17 486
从头到尾开发一个利用react框架的前后端项目
b站React禹哥版视频笔记-React面向组件编程（上）
weixin_44286392的博客
06-27 1537
react框架学习笔记-第二章内容
b站React禹哥版视频笔记-React ajax
weixin_44286392的博客
07-09 125
b站React禹哥版视频笔记-第四章内容
React学习笔记---React脚手架
丑小鸭变黑天鹅的博客
12-21 1413
React脚手架一、使用create-react-app创建react应用1、react脚手架2、创建项目并启动3、react脚手架项目结构4、功能界面的组件化编码流程（通用）5、用脚手架写一个简单示例二、组件的组合使用（综合实例） 一、使用create-react-app创建react应用 1、react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 1）. 包含了所有需要的配置（语法检查、jsx编译、devServer…） 2）. 下载好了所有相关的依赖 3）. 可以直接运行
React系统学习笔记--超基础--超详细--超简洁--React应用基于脚手架（三）
m0_55644132的博客
11-06 507
脚手架是用webpack搭建的，我们现在不用从零开始搭建了xxx脚手架：用来帮助程序原快速创建一个基于xxx库的模板项目react提供了一个用于创建react项目的脚手架库：create-react-app（基于React脚手架的项目，把项目的每个文件读懂，再把自己的业务逻辑加进去）项目的整体技术架构为：react+webpack+es6+eslint使用脚手架开发的项目的特点：模块化、组件化、工程化有了这个库，才能创建出来脚手架。
React框架JavaWeb-开发笔记
06-11
这通常包括安装Node.js环境，使用`create-react-app`脚手架快速初始化一个新的React项目。在这个项目中，开发者可以定义各种组件，编写业务逻辑，并使用CSS预处理器如Sass或Less来管理样式。 同时，Java后端需要...
template-for-ts-react:一个基于React16，Antd，Mobx，Typescript的前端脚手架
03-19
一个基于React16 ， Antd ， Mobx ， Typescript的前端脚手架。 为什么是TSReact模板 目前市面上已经有create-react-app等开箱即用的脚手架，但create-react-app一方面没有默认支持typescript ，另一方面，大量的的...
Reactor 反应堆模式
Xpccccc的博客
09-27 1111
Reactor 反应堆模式
React&JSX使用
CherishTaoTao的博客
09-30 1088
在 React 开发中，除了 JSX 的基础使用，还有一些常见的注意事项和 JSX 的进阶用法。以下是需要重点注意的 React 开发技巧和。
react-问卷星项目（2）
BHDDGT的博客
09-29 1048
一个git hook 工具，即在git commit之前执行自定义的命令，将规范流程化，如执行代码风格的检查，避免提交非规范的代码，在github搜索即可。这两条是接着执行的，表示创建husky，在文档说明里也有，我按照视频里的指令执行会显示初始化失败，这两条我自己用的没问题。
从0学习React（4）---更新组件状态setState
qq_54432917的博客
09-29 473
在上篇文章中，我们讲了React中的一些基础，包括组件的种类以及state的使用。上篇文章的结尾，我们讲到了如何更新组件的状态（使用setState）。但是我没有讲的很详细，这篇文章我们详细的讲一下React中如何更新组件的状态。
React响应式修改数组和对象
警警的博客
09-30 727
React的状态是不可变的，这意味着你不能直接修改状态对象中的数组元素，而是需要创建一个新的数组来更新状态。你不能直接修改对象中的属性，而是需要创建一个新的对象来更新状态。不可变性（Immutability）：React中的状态是不可变的，这意味着你不能直接修改状态对象中的数组元素，而是需要创建一个新的数组来更新状态。避免直接修改状态：React的状态是不可变的，直接修改状态（如this.state.items.push(4)）不会触发重新渲染，因为React无法检测到这种变化。// 修改name属性。
前端框架对比和选择：Vue、React 和 Angular 谁更适合你的项目？
weixin_41989626的博客
09-30 1050
Vue.js 是由尤雨溪开发的渐进式前端框架。它以轻量级、易于上手和灵活性著称，非常适合中小型项目或快速开发原型。Vue 提供了简洁的 API 和双向数据绑定的能力，特别适合需要频繁更新视图的应用。优点：学习曲线较低：Vue的API设计非常直观，适合新手上手。渐进式框架：可以根据需求从小型组件逐步扩展为大型单页应用。丰富的生态：Vue Router、Vuex等工具可以轻松处理路由和状态管理。缺点：社区资源相对较少：相较于React和Angular，Vue的社区生态规模较小。企业支持较弱。
npx create-react-app react-basic 创建react 项目报错
最新发布
weixin_46191445的博客
10-01 287
npx create-react-app创建react 项目报错
csdn博客之星领域前十
09-18
CSDN博客之星涵盖了各个领域的优秀博主，他们的博客具有很高的影响力和专业性。以下是CSDN博客之星领域前十的简要介绍： 1. 人工智能领域：博主通过深入研究人工智能领域的最新技术和应用，为读者提供了深度学习、机器学习和自然语言处理等方面的知识和经验分享。 2. 大数据领域：这些博主关注数据的采集、存储、处理和分析等方面，为企业和研究机构提供大数据解决方案和案例分析，推动了大数据技术的发展和应用。 3. 嵌入式领域：博主将嵌入式系统的设计、开发和调试等方面的知识进行了深入剖析，展示了嵌入式系统在汽车、智能家居和物联网等领域的应用。 4. 前端开发领域：这些博主关注前端开发的最新技术和趋势，他们分享了HTML/CSS、JavaScript和前端框架等方面的教程和案例，为前端开发者提供了宝贵的参考和学习资源。 5. 后端开发领域：这些博主专注于后端开发技术，包括Java、Python、Go和Ruby等编程语言的应用和开发框架的使用，为开发者提供了实践经验和技术分享。 6. 移动开发领域：这些博主关注移动应用开发的最新趋势和技术，分享了iOS、Android和React Native等平台的开发经验和解决方案，为移动开发者提供了有益的指导和教程。 7. 云计算领域：这些博主研究了云计算技术的最新进展和应用案例，包括云平台的搭建、容器技术和虚拟化等方面，为企业和个人提供了云计算解决方案和最佳实践。 8. 安全领域：这些博主关注网络安全和信息安全的最新动态和技术，分享了渗透测试、加密算法和安全工具的使用方法和原理，为企业和网络从业者提供了安全防护和实战的建议。 9. 数据库领域：这些博主专注于数据库技术的研究和应用，包括关系数据库和NoSQL数据库的比较、优化和应用案例，为开发者和DBA提供了有关数据库设计和管理的专业知识。 10. IT管理领域：博主在信息技术管理方面具有丰富经验，分享了项目管理、IT服务管理和IT战略规划等方面的知识和经验，为企业和IT从业者提供了管理方面的指导和思路。 总之，CSDN博客之星领域前十的博主们在各自的领域里，通过博客的方式分享了宝贵的技术和经验，为读者提供了学习和成长的机会。他们的贡献推动了相应领域的发展和创新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值