03.初始React脚手架

news2024/12/23 4:51:41

一.使用create-react-app创建react应用

1.react脚手架
  1. xxx脚手架：用来帮助程序员快速创建一个基于xxx库的模板项目
    1. 包含了所有需要的配置（语法检查，jsx编译，devServer…）
    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 hello-react(项目名称)
  3. 进入项目文件夹： cd hrllo-react
  4. 启动项目：npm start
    在这里插入图片描述
    public文件夹介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- %PUBLIC_URL%代表public文件夹的路径 -->
      <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<!-- 开启理想视口，用于做移动端网页的适配 -->
      <meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- 用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器) -->
    <meta name="theme-color" content="red" />
<meta
      name="description"
      content="Web site created using create-react-app"
      />
<!-- 用于指定网页添加到手机主屏幕后的图标 -->
      <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- 应用加壳时的配置文件 -->
      <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<!-- 若浏览器不支持js则展示标签中的内容 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

src文件夹介绍
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wvrkgdMp-1682210833083)(D:\笔记\笔记\学习图片\src文件夹介绍.png)]
创建项目基础知识

例子：

import React, { Component } from "react";
import Hello from './Hello/Hello'
import Welcome from './Welcome/Welcome'
//分别暴露组件
//创建类似组件，和前面练习的代码一样
export default class App extends Component {
  render() {
    return (
      <div>
        <h2><Hello /></h2>
        <h2><Welcome /></h2>
      </div>
    )
  }
}
3.样式模块化

如果不使用样式模块化，当父组件内存在多个子组件，并且多个组件中含有相同的名称时会造成样式的覆盖，因此在不想改变名称下，引入了样式模块化。

import React,{Component} from "react";
// 采用了样式模块化，防止多组件时样式被覆盖
import hello from '../Hello/Hello.module.css'
//分别暴露组件
//创建类似组件，和前面练习的代码一样
export default class Hello extends Component{
  render(){
  return <h2 className={hello.title}>Hello React!</h2>
  }
}
4.功能化界面的组件化编码流程
  • 拆分组件：拆分界面，抽取组件
  • 实现静态组件：使用组件实现静态页面的效果
  • 实现动态组件：
    • 动态显示初始化数据
      • 数据类型
      • 数据名称
      • 保存在哪个组件
    • 交互（从绑定事件监听开始）
5.todoList中的注意事项

  • 当辅助见向子组件传递内容，较多的时并且传递的内容都属于同一个对象则可以利用扩展运算符。

    import React, { Component } from 'react'
import Item from '../Item/index.jsx'
import './index.css'
export default class List extends Component {
  render() {
    //因为父组件是todos={},所以结构赋值中使用的是todos
    const { todos } = this.props
    return (
      <ul className="todo-main">
        {
          todos.map((todo) => {
            //{...todo}批量传递
            return <Item key={todo.id} {...todo} />
          })
        }
      </ul>
    )
  }
}

  • checked不能够进行后续的更改，要想要改以后就必须使用onChange(),所以一般使用defaultChecked。但是defaultChecked只在第一次起作用

    例子：
    在这里插入图片描述

  • 在生成一个唯一的id的时候，可以借助第三方资源库uuid但是由于uuid内容太多所以我们可以安装nanoid来代替uuid

    例子：

    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名字不能为空,trim()去除空格
    if(target.value.trim()===""){
    alert("输入不能为空")
    return
    }
    console.log(target.value);
    //准备好一个todo对象
    const todoObj = {
      // uuid专门生成唯一id的一个库
      //安装uuid的方法：方式一：利用yarn  ：yarn add uuid;因为uuid内容较大，所以安装nanoid:yarn add nanoid方式二：利用npm:  npm i uuid,因为uuid内容较大，所以安装nanoid
      id: nanoid(),
      name: target.value,
      done: false
    }
    this.props.addtodo(todoObj)
    target.value=""
  }
  render() {
    return (
      <div className="todo-header">
        {/* onKeyUp:监听键盘按下事件 */}
        <input type="text" onKeyUp={this.handleKeyUp} placeholder="请输入你的任务名称，按回车键确认" />
      </div>
    )
  }
}

  • 为什么对于react中绑定的函数的返回结果需要写成函数？（利用的高阶函数）

    调用render函数时获取vdom，发现标签存在事件绑定-> 先执行代码中的方法-> 获取到的是undefined。当事件被触发时，无函数可执行

    总结:

    • 原生js事件绑定的值只有在事件被触发时才会执行

    • react中的事件绑定会在render函数调用时被触发，函数的返回值才是函数被触发时执行的逻辑代码。

      例子：

      import React, { Component } from 'react'
import './index.css'
export default class Item extends Component {
  //判断鼠标是否进来
  state = { mouse: false }
  handleMouse = (bool) => {
    return () => {
      this.setState({ mouse: bool })
    }
  }
  render() {
    const { name, done } = this.props
    return (
      <li style={{ backgroundColor: this.state.mouse ? '#ddd' : 'white' }} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
        <label>
          {/* checked不能够进行后续的更改，要想要改以后就必须使用onChange()
          所以一般使用defalutChecked
          */}
          <input type="checkbox" defaultChecked={done} />
          <span>{name}</span>
        </label>
        <button className="btn btn-danger" style={{ display: this.state.mouse?'block':'none' }}>删除</button>
      </li>
    )
  }
}

  • 如果不想使用高阶函数可以在标签中使用箭头函数然后把相应的方法放在箭头函数中。

    import React, { Component } from 'react'
import './index.css'
export default class Item extends Component {
  //判断鼠标是否进来
  state = { mouse: false }
  handleMouse = (bool) => {
    return () => {
      this.setState({ mouse: bool })
    }
  }
  //切换内容
  handleCheck = (id) => {
    return (event) => {
      this.props.updateTodo(id, event.target.checked)
    }
  }
  //删除一个todo的回调
  handleDelete=(id)=>{
    if(window.confirm('确定删除吗？')){
      this.props.deleteTodo(id)
    }
  }
  render() {
    const { id, name, done } = this.props
    return (
      <li style={{ backgroundColor: this.state.mouse ? '#ddd' : 'white' }} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
        <label>
          {/* checked不能够进行后续的更改，要想要改以后就必须使用onChange()
          所以一般使用defalutChecked
          */}
          <input type="checkbox" checked={done} onChange={this.handleCheck(id)} />
          <span>{name}</span>
        </label>
        <button onClick={()=>{this.handleDelete(id)}} className="btn btn-danger" style={{ display: this.state.mouse ? 'block' : 'none' }}>删除</button>
      </li>
    )
  }
}
6.todoList案例总结：

  • 拆分组件，实现静态组件。注意：className,style的写法

  • 动态初始化列表，如何确定将数据放在哪个组件的state中？

    • 某个组件使用：放在自身的state中
    • 某些组件的使用放在他们共同的父组件state中（官方称此操作为：状态提升）

  • 关于父子间通信

    • 【父组件】给【子组件】传递数据：通过props传递
    • 【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数

  • 注意defaultChecked和checked的区别，类似的还有defaultValue和value

  • 状态在哪里，操作方法就在哪里

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

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

相关文章

硬件还不够！激光雷达「开卷」感知算法+数据闭环

硬件还不够！激光雷达「开卷」感知算法+数据闭环

激光雷达正式进入量产周期&#xff0c;而如何用好激光雷达&#xff0c;并形成更优更具性价比的激光雷达系统方案&#xff0c;助力激光雷达量产上车并真正用好激光雷达系统&#xff0c;将是接下来两年激光雷达赛道的主要方向。 在近期开幕的上海国际车展上&#xff0c;亮道智能…
阅读更多...
学系统集成项目管理工程师（中项）系列10_立项管理

学系统集成项目管理工程师（中项）系列10_立项管理

1. 系统集成项目管理至关重要的一个环节 2. 重点在于是否要启动一个项目&#xff0c;并为其提供相应的预算支持 3. 项目建议 3.1. Request for Proposal, RFP 3.2. 立项申请 3.3. 项目建设单位向上级主管部门提交的项目申请文件&#xff0c;是对拟建项目提出的总体设想 3…
阅读更多...
延迟渲染 Deferred Rendering

延迟渲染 Deferred Rendering

前向渲染 先计算光照再裁剪。 前向渲染是现在最基础&#xff0c;也是最多引擎使用的标准。前向渲染的流程是给定一个几何体&#xff0c;引擎对其进行从顶点到像素着色器的一系列计算&#xff0c;然后输出到最终的图像缓冲区。场景中有多个几何体时&#xff0c;引擎就是对其挨个…
阅读更多...
薪资18K需要什么水平？来看看98年测试工程师的面试全过程…

薪资18K需要什么水平？来看看98年测试工程师的面试全过程…

我的情况 大概介绍一下个人情况&#xff0c;男&#xff0c;本科&#xff0c;三年多测试工作经验&#xff0c;懂python&#xff0c;会写脚本&#xff0c;会selenium&#xff0c;会性能&#xff0c;然而到今天都没有收到一份offer&#xff01;从年后就开始准备简历&#xff0c;年…
阅读更多...
西交大-一百本书-解决不能粘贴的限制

西交大-一百本书-解决不能粘贴的限制

快毕业了&#xff0c;要填四个一百&#xff0c;其他三个都几分钟就填完了。只有读一百本书要写读书笔记且不能粘贴&#xff0c;防谁呢真是的。发现一种解决不能粘贴限制的方法。顺道附上利用ChatGpt快速生成书评的方法。 四个一百网址 一、 解除粘贴限制 以edge浏览器为例 登…
阅读更多...
Python|勘测定界TXT坐标点转shp文件——Arcpy实现

Python|勘测定界TXT坐标点转shp文件——Arcpy实现

平时日常工作中，经常会遇到txt格式的测绘数据，这类数据通常只有不同地块的界址点集和坐标系信息，没法直接导入GIS软件中进行分析。拿到这类原始文本文件，首要工作就是将之转换为shp图层数据。 今天，主要分享两种转shp数据的方法，一种是在arcmap中直接转换，另一种是通过…
阅读更多...
springboot+RateLimiter+AOP自定义注解限流

springboot+RateLimiter+AOP自定义注解限流

springbootRateLimiterAOP自定义注解限流 RateLimiter简介springboot集成RateLimiterpom.xml引入RateLimiter常用api代码实现自定义注解Limiter限流切面验证 RateLimiter简介 RateLimiter是Guava库中的一个限流器&#xff0c;它提供如下功能&#xff1a; (1)基于PPS进行限流 (…
阅读更多...
论文推荐：基于联合损失函数的多任务肿瘤分割

论文推荐：基于联合损失函数的多任务肿瘤分割

以FFANet为主干&#xff0c;加入分类的分支&#xff0c;将模型扩展为多任务图像分割框架&#xff0c;设计了用于分类和分割的联合损失函数。 FFANetMTL 1、FFANet和分割分支 FFANet作为骨干网络&#xff0c;作为对VoVNet的重新设计和优化&#xff0c;FFANet在骨干网中加入了残…
阅读更多...
SpringMVC请求与响应

SpringMVC请求与响应

文章目录 请求与响应请求映射路径请求传参传递普通参数传递实体类参数传递数组参数传递集合参数传递JSON参数传递日期参数 响应数据 请求与响应 请求映射路径 请求映射路径是通过注解: RequestMapping 类型&#xff1a;方法注解, 类注解 位置&#xff1a;SpringMVC控制器方法…
阅读更多...
少儿编程 中国电子学会图形化编程等级考试Scratch编程一级真题解析（判断题）2023年3月

少儿编程 中国电子学会图形化编程等级考试Scratch编程一级真题解析（判断题）2023年3月

2023年3月scratch编程等级考试一级真题 判断题（共10题，每题2分，共20分） 26、在角色列表区和造型标签页都可以修改角色的名称。 答案：错 考点分析：考查Scratch平台使用，只有角色区可以修改角色的造型名称，造型标签不能修改，所以答案错误 27、可以在角色中切换舞台的…
阅读更多...
Java核心技术 卷1-总结-7

Java核心技术 卷1-总结-7

Java核心技术 卷1-总结-7 lambda 表达式方法引用构造器引用变量作用域异常分类声明受查异常 lambda 表达式 方法引用 有时&#xff0c; 可能已经有现成的方法可以完成你想要传递到其他代码的某个动作。例如&#xff0c; 假设你希望只要出现一个定时器事件就打印这个事件对象。…
阅读更多...
使用@Scope注解设置组件的作用域

使用@Scope注解设置组件的作用域

前言 Spring容器中的组件默认是单例的&#xff0c;在Spring启动时就会实例化并初始化这些对象&#xff0c;并将其放到Spring容器中&#xff0c;之后&#xff0c;每次获取对象时&#xff0c;直接从Spring容器中获取&#xff0c;而不再创建对象。 1.Scope注解概述 Scope注解能…
阅读更多...
【uni-app】【01】底部导航栏与页面切换

【uni-app】【01】底部导航栏与页面切换

1.(配置文件在哪)uni-app 路由控制是在 pages.json文件中的。 2.(基本配置项有哪些)初学的时候主要有三个配置项&#xff0c;①pages ② globalStyle ③ tabbar [!TOC] 接下来主要是对这三个配置项做一个简单介绍。 pages 负责页面管理。不需要自己写的&#xff0c;你在项目的p…
阅读更多...
【Scala入门】scala基础语法：类和对象，变量和常量

【Scala入门】scala基础语法：类和对象，变量和常量

上一篇请移步【Scala入门】Scala下载及安装&#xff08;Windows&#xff09;以及Idea创建第一个scala项目_水w的博客-CSDN博客 目录 一、Scala 二、Scala基础语法 2.1 注释与标识符规范 2.2 变量与常量 【案例&#xff1a;变量声明和赋值】 2.3 object 【案例&#xff1…
阅读更多...
合并二叉树-递归法

合并二叉树-递归法

1题目 给你两棵二叉树&#xff1a; root1 和 root2 。 想象一下&#xff0c;当你将其中一棵覆盖到另一棵之上时&#xff0c;两棵树上的一些节点将会重叠&#xff08;而另一些不会&#xff09;。你需要将这两棵树合并成一棵新二叉树。合并的规则是&#xff1a;如果两个节点重叠…
阅读更多...
gdb调试常用指令及案例讲解

gdb调试常用指令及案例讲解

文章目录 前言一、常用指令二、案例说明1、测试源文件2、编译和调试 三、其他指令四、案例说明 前言 GDB是一个由GNU开源组织发布的、UNIX/LINUX 操作系统下的、基于命令行的、功能强大的程序调试工具。 GDB 支持断点、单步执行、打印变量、观察变量、查看寄存器、查看堆栈等调…
阅读更多...
【JavaEE】_2.文件与IO

【JavaEE】_2.文件与IO

目录 1.文件概述 1.1 文件的概念 1.2 文件的存储 1.3 文件的分类 1.4 目录结构 1.5 文件操作 1.5.1 文件系统操作 1.5.2 文件内容操作 2. Java文件系统操作 2.1 File类所处的包 2.2 构造方法 2.3 方法 2.3.1 与文件路径、文件名有关的方法 2.3.2 文件是否存在与普…
阅读更多...
Java核心技术 卷1-总结-13

Java核心技术 卷1-总结-13

Java核心技术 卷1-总结-13 具体的集合散列集树集队列与双端队列优先级队列 映射基本映射操作 具体的集合 散列集 链表和数组可以有序的存储元素。但是&#xff0c;如果想要查看某个指定的元素&#xff0c;却又忘记了它的位置&#xff0c;就需要访问所有元素&#xff0c;直到找…
阅读更多...
vue2数据响应式原理(5) 通过重写函数实现数组响应式监听

vue2数据响应式原理(5) 通过重写函数实现数组响应式监听

其实 我们之前对数组的一个监听 还并不是很完美 我们打开案例 打开 output.js 更改代码如下 import { observe } from "./dataResp" const output () > {var obj {data: {data: {map: {dom: {isgin: true}},arg: 13},name: "小猫猫"},bool: [1,2,3,4…
阅读更多...
【经验与Bug】tensorflow草记

【经验与Bug】tensorflow草记

文章目录 1 常用小知识2 Learn1) 疑惑未解2) 为何要有"bias"&#xff1f; 3 问题处理1) jupyter的环境指定目录运行jupyter 2) Keras版本3) 为什么accuracy为100%&#xff0c;迭代时参数还在更新&#xff1f; 1 常用小知识 conda activate tf 在anaconda prompt使用&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023