第十六章 脚手架文件介绍
react项目脚手架文件目录
public ---- 静态资源文件夹
|-------favicon.icon ------ 网站页签图标
|-------index.html -------- 主页面
|-------logo192.png ------- logo图
|-------logo512.png ------- logo图
|-------manifest.json ----- 应用加壳的配置文件
|-------robots.txt -------- 爬虫协议文件src ---- 源码文件夹
|-------App.css -------- App组件的样式
|-------App.js --------- App组件
|-------App.test.js ---- 用于给App做测试
|-------index.css ------ 全局样式
|-------index.js ------- 入口文件
|-------logo.svg ------- logo图
|-------reportWebVitals.js ---- 页面性能分析文件(需要web-vitals库的支持)
|-------setupTests.js ---- 组件单元测试的文件(需要jest-dom库的支持)
public/index.html
<!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" /><metaname="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>
public/index.html文件是React应用程序的入口点，负责提供HTML文档的基本结构，并包含一个id为root的div元素，这是React应用程序将呈现的地方。
src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><App /></React.StrictMode>
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();src/index.js文件是React应用程序的主要入口点，负责将应用程序呈现到DOM中。
1：首先，该文件导入了React和ReactDOM库
import React from 'react';
import ReactDOM from 'react-dom';
2: 然后，它导入了应用程序的主要组件，即src/App.js文件中定义的组件：
import App from './App';
3: 接下来，它使用ReactDOM.render()方法将应用程序呈现到DOM中。这个方法需要两个参数：要呈现的React元素和要将其呈现到的DOM节点。在这个例子中，要呈现的React元素是<App />，它是应用程序的主要组件。要将其呈现到的DOM节点是document.getElementById('root')，它是在public/index.html文件中定义的id为root的div元素。
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);
最后，该文件还包含了一些用于开发和调试的代码。例如，它使用了React.StrictMode组件，这个组件可以帮助您在开发过程中发现潜在的问题。它还使用了console.log()方法，这个方法可以将消息记录到浏览器的控制台中，以帮助您调试应用程序。
相关文章：
第十六章 脚手架文件介绍
react项目脚手架文件目录 public ---- 静态资源文件夹 |-------favicon.icon ------ 网站页签图标 |-------index.html -------- 主页面 |-------logo192.png ------- logo图 |-------logo512.png ------- logo图 |-------manifest.json ----- 应用加壳的配置文件 |-------rob…...
基于Clion开发（stm32移植FreeRTOS+LVGL）
嵌入式单片机开发中，通常使用 Keil IAR 或 芯片厂商提供的IDE，这类IDE界面风格还停留在十几年前XP风，代码编辑实在让人难受，所以很多时候笔者都是采用VSCode编辑，然后再用这类IDE下载调试使用，另外像keil 和…...
Python | 蓝桥杯进阶第三卷——动态规划
欢迎交流学习~~ 专栏： 蓝桥杯Python组刷题日寄 蓝桥杯进阶系列： 🏆 Python | 蓝桥杯进阶第一卷——字符串 🔎 Python | 蓝桥杯进阶第二卷——贪心 💝 Python | 蓝桥杯进阶第三卷——动态规划 ✈️ Python | 蓝桥杯进阶…...
蓝桥杯31天真题冲刺|题解报告|第二十九天
大家好，我是snippet，今天是我们刷题的第二十九天，今天主打打比赛，牛客AcWing力扣，今天的牛客是真的有趣，下面是我今天AcWing周赛的题解 目录 一、热身计算 题目链接：4944. 热身计算 - AcWing题…...
[Rust GUI]fltk-rs的helloworld
1、安装VSCode 下载安装VSCode 安装VSCode扩展 rust-analyzer或rust-analyzer(CN) 2、安装Microsoft C 生成工具 访问微软官网下载生成工具，勾选使用 C 的桌面开发之后会自动勾选5个项目 取消勾选以下项目 用于 Windows 的 C CMake 工具 测试工具核心功能 - 生成…...
蓝桥杯真题05
重新排序 问题描述 给定一个数组 A 和一些查询 Li,Ri 求数组中第 Li 至第 Ri个元素之和。 小蓝觉得这个问题很无聊, 于是他想重新排列一下数组, 使得最终每个查询结果的和尽可能地大。小蓝想知道相比原数组, 所有查询结果的总和最多可以增加多少? 输入格式 输入第一行包含…...
PMP那些事儿，备考小白看过来
一、PMP是什么？ PMP指的是项目管理专业人士资格认证。它是由美国项目管理协会(Project Management Institute(PMI)发起的，严格评估项目管理人员知识技能是否具有高品质的资格认证考试。 其目的是为了给项目管理人员提供统一的行业标准。目前࿰…...
【数据分析实战】基于python对酒店预订需求进行分析
文章目录📚引言📖数据加载以及基本观察📑缺失值观察及处理🔖缺失值观察以及可视化🔖缺失值处理📖用户数据探索📑什么时间预定酒店将会更经济实惠？📑哪个月份的酒店预订是…...
【新2023Q2模拟题JAVA】华为OD机试 - 数组的中心位置
最近更新的博客 华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为od机试，独家整理 已参加机试人员的实战技巧本篇题解：数组的中心位置 题目 给你一…...
Vue的props组件详解
const props defineProps({name: String, }); String 是在 defineProps() 函数中用来声明 name prop 的类型，表示 name 必须是字符串类型。如果父组件没有传入 name 或传入的 name 不是字符串类型，那么就会产生类型验证错误。 defineProps() 函数支持…...
抽烟行为识别预警系统 yolov5
抽烟行为识别预警系统基于yolov5网络模型智能分析技术，抽烟行为识别预警算法通过监测现场人员抽烟行为自动存档进行报警提示。我们选择当下YOLO卷积神经网络YOLOv5来进行抽烟识别检测。6月9日，Ultralytics公司开源了YOLOv5，离上一次YOLOv4发布…...
【0基础学爬虫】爬虫基础之文件存储
大数据时代，各行各业对数据采集的需求日益增多，网络爬虫的运用也更为广泛，越来越多的人开始学习网络爬虫这项技术，K哥爬虫此前已经推出不少爬虫进阶、逆向相关文章，为实现从易到难全方位覆盖，特设【0基础学…...
airflow源码分析-任务调度器实现分析
Airflow源码分析-任务调度器实现分析 概述 本文介绍Airflow执行器的总体实现流程。通过函数调用的方式说明了Airflow scheduler的实现原理，对整个调度过程的源码进行了分析。 通过本文，可以基本把握住Airflow的调度器的运行原理主线。 启动调度器 可…...
和reduceRight())
一文学会数组的reduce()和reduceRight()
reduce()方法和reduceRight()方法依次处理数组的每个成员，最终累计为一个值。 它们的差别是，reduce()是从左到右处理，reduceRight()则是从右到左，其他完全一样。 [1, 2, 3, 4, 5].reduce(function (a, b) {console.log(a, b);ret…...
登录校验-Filter
上一篇介绍完了基础应用和细节，现在来完成登录校验功能基本流程： 要进入后台管理系统，必须完成登录操作，此时就需要访问登录接口Login。登录成功服务端会生成一个JWT令牌，并且返回给前端，前端会将JWT令牌存…...
C C++ Java python 分别写出不同表白girlfriend的爱心动态代码实现
C `` #include <stdio.h> #include <stdlib.h> #include <windows.h> void heart_animation() {int i, j, k; for (i = 1; i <= 6; i++) {for (j = -3; j <= 3; j++) {for (k = -4; k <= 4; k++) {if (abs(j) + abs(k) < i * 2) {printf(“I”)…...
ThreeJS-投影、投影模糊（十七）
无投影： 完整的代码： <template> <div id"three_div"></div> </template> <script> import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/Or…...
蓝桥杯赛前冲刺-枚举暴力和排序专题1（包含历年蓝桥杯真题和AC代码）
目录 连号区间数（第四届蓝桥杯省赛CB组,第四届蓝桥杯省赛JAVAB组） 递增三元组（第九届蓝桥杯省赛CB组,第九届蓝桥杯省赛JAVAB组） 特别数的和（第十届蓝桥杯省赛CB组,第十届蓝桥杯省赛JAVAB组） 错误票据&a…...
Github库中的Languages显示与修改
目录 前言 【.gitattributes】文件 修改GitHub语言 前言 上传一个项目到GitHub时，发现显示的语言并非是自己项目所示的语言，这样的情况是经常发生的，为了能到达自己所需快速检索，或者是外部访问者能很好的搜索我们的项目&#…...
RocketMQ消息高可靠详解
文章目录 消息同步策略殊途同归同步基于offset而不是消息本身刷盘策略RocketMQ broker服务端以组为单位提供服务的，拥有着一样的brokerName则认为是一个组。其中brokerId=0的就是master，大于0的则为slave。 消息同步策略 master和slave都可以提供读服务，但是只有master允许…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应，这是一种非线性光学现象，主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场，对材料产生非线性响应，可能…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容：参考网站： PID算法控制 PID即：Proportional（比例）、Integral（积分&…...
React Native 导航系统实战（React Navigation）
导航系统实战（React Navigation） React Navigation 是 React Native 应用中最常用的导航库之一，它提供了多种导航模式，如堆栈导航（Stack Navigator）、标签导航（Tab Navigator）和抽屉…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes（简称K8s）中，Ingress是一个API对象，它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress，你可…...
3.3.1_1 检错编码（奇偶校验码）
从这节课开始，我们会探讨数据链路层的差错控制功能，差错控制功能的主要目标是要发现并且解决一个帧内部的位错误，我们需要使用特殊的编码技术去发现帧内部的位错误，当我们发现位错误之后，通常来说有两种解决方案。第一…...
cf2117E
原题链接：https://codeforces.com/contest/2117/problem/E 题目背景： 给定两个数组a,b，可以执行多次以下操作：选择 i (1 < i < n - 1)，并设置 或，也可以在执行上述操作前执行一次删除任意 和 。求…...
第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代，智能代理（agents）不再是孤立的个体，而是能够像一个数字团队一样协作。然而，当前 AI 生态系统的碎片化阻碍了这一愿景的实现，导致了“AI 巴别塔问题”——不同代理之间…...
TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 （一）概念解析 TRS（Total Return Swap）收益互换是一种金融衍生工具，指交易双方约定在未来一定期限内，基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
unix/linux，sudo，其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...
Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统，支持多语言对话（如 中文，英文，日语），语音情感（如 开心，悲伤）&#x…...