当前位置： 首页 > news >正文

第十六章 脚手架文件介绍

news 文章来源：https://blog.csdn.net/qq_36362721/article/details/129840884 2025/5/7 22:50:53

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…...

编程日记 2023/5/23 16:37:06

基于Clion开发（stm32移植FreeRTOS+LVGL）

嵌入式单片机开发中&#xff0c;通常使用 Keil IAR 或 芯片厂商提供的IDE&#xff0c;这类IDE界面风格还停留在十几年前XP风&#xff0c;代码编辑实在让人难受&#xff0c;所以很多时候笔者都是采用VSCode编辑&#xff0c;然后再用这类IDE下载调试使用&#xff0c;另外像keil 和…...

编程日记 2023/5/22 13:34:50

Python | 蓝桥杯进阶第三卷——动态规划

欢迎交流学习~~ 专栏&#xff1a; 蓝桥杯Python组刷题日寄 蓝桥杯进阶系列&#xff1a; &#x1f3c6; Python | 蓝桥杯进阶第一卷——字符串 &#x1f50e; Python | 蓝桥杯进阶第二卷——贪心 &#x1f49d; Python | 蓝桥杯进阶第三卷——动态规划 ✈️ Python | 蓝桥杯进阶…...

编程日记 2023/5/28 19:11:54

蓝桥杯31天真题冲刺|题解报告|第二十九天

大家好&#xff0c;我是snippet&#xff0c;今天是我们刷题的第二十九天&#xff0c;今天主打打比赛&#xff0c;牛客AcWing力扣&#xff0c;今天的牛客是真的有趣&#xff0c;下面是我今天AcWing周赛的题解 目录 一、热身计算 题目链接&#xff1a;4944. 热身计算 - AcWing题…...

编程日记 2023/5/29 5:57:42

[Rust GUI]fltk-rs的helloworld

1、安装VSCode 下载安装VSCode 安装VSCode扩展 rust-analyzer或rust-analyzer(CN) 2、安装Microsoft C 生成工具 访问微软官网下载生成工具&#xff0c;勾选使用 C 的桌面开发之后会自动勾选5个项目 取消勾选以下项目 用于 Windows 的 C CMake 工具 测试工具核心功能 - 生成…...

编程日记 2023/5/12 3:58:50

蓝桥杯真题05

重新排序 问题描述 给定一个数组 A 和一些查询 Li,Ri 求数组中第 Li 至第 Ri个元素之和。 小蓝觉得这个问题很无聊, 于是他想重新排列一下数组, 使得最终每个查询结果的和尽可能地大。小蓝想知道相比原数组, 所有查询结果的总和最多可以增加多少? 输入格式 输入第一行包含…...

编程日记 2023/5/13 3:01:40

PMP那些事儿，备考小白看过来

一、PMP是什么&#xff1f; PMP指的是项目管理专业人士资格认证。它是由美国项目管理协会(Project Management Institute(PMI)发起的&#xff0c;严格评估项目管理人员知识技能是否具有高品质的资格认证考试。 其目的是为了给项目管理人员提供统一的行业标准。目前&#xff0…...

编程日记 2023/5/24 12:44:12

【数据分析实战】基于python对酒店预订需求进行分析

文章目录&#x1f4da;引言&#x1f4d6;数据加载以及基本观察&#x1f4d1;缺失值观察及处理&#x1f516;缺失值观察以及可视化&#x1f516;缺失值处理&#x1f4d6;用户数据探索&#x1f4d1;什么时间预定酒店将会更经济实惠&#xff1f;&#x1f4d1;哪个月份的酒店预订是…...

编程日记 2023/5/25 15:59:36

【新2023Q2模拟题JAVA】华为OD机试 - 数组的中心位置

最近更新的博客 华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为od机试，独家整理 已参加机试人员的实战技巧本篇题解：数组的中心位置 题目 给你一…...

编程日记 2023/5/17 1:36:32

Vue的props组件详解

const props defineProps({name: String, }); String 是在 defineProps() 函数中用来声明 name prop 的类型&#xff0c;表示 name 必须是字符串类型。如果父组件没有传入 name 或传入的 name 不是字符串类型&#xff0c;那么就会产生类型验证错误。 defineProps() 函数支持…...

编程日记 2023/5/13 21:47:30

抽烟行为识别预警系统 yolov5

抽烟行为识别预警系统基于yolov5网络模型智能分析技术&#xff0c;抽烟行为识别预警算法通过监测现场人员抽烟行为自动存档进行报警提示。我们选择当下YOLO卷积神经网络YOLOv5来进行抽烟识别检测。6月9日&#xff0c;Ultralytics公司开源了YOLOv5&#xff0c;离上一次YOLOv4发布…...

编程日记 2023/5/12 9:06:54

【0基础学爬虫】爬虫基础之文件存储

大数据时代&#xff0c;各行各业对数据采集的需求日益增多&#xff0c;网络爬虫的运用也更为广泛&#xff0c;越来越多的人开始学习网络爬虫这项技术&#xff0c;K哥爬虫此前已经推出不少爬虫进阶、逆向相关文章&#xff0c;为实现从易到难全方位覆盖&#xff0c;特设【0基础学…...

编程日记 2023/5/17 22:01:14

airflow源码分析-任务调度器实现分析

Airflow源码分析-任务调度器实现分析 概述 本文介绍Airflow执行器的总体实现流程。通过函数调用的方式说明了Airflow scheduler的实现原理&#xff0c;对整个调度过程的源码进行了分析。 通过本文&#xff0c;可以基本把握住Airflow的调度器的运行原理主线。 启动调度器 可…...

编程日记 2023/5/9 4:47:22

一文学会数组的reduce()和reduceRight()

reduce()方法和reduceRight()方法依次处理数组的每个成员&#xff0c;最终累计为一个值。 它们的差别是&#xff0c;reduce()是从左到右处理&#xff0c;reduceRight()则是从右到左&#xff0c;其他完全一样。 [1, 2, 3, 4, 5].reduce(function (a, b) {console.log(a, b);ret…...

编程日记 2023/5/26 20:25:16

登录校验-Filter

上一篇介绍完了基础应用和细节&#xff0c;现在来完成登录校验功能基本流程&#xff1a; 要进入后台管理系统&#xff0c;必须完成登录操作&#xff0c;此时就需要访问登录接口Login。登录成功服务端会生成一个JWT令牌&#xff0c;并且返回给前端&#xff0c;前端会将JWT令牌存…...

编程日记 2023/5/25 16:02:00

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”)…...

编程日记 2023/5/17 22:02:25

ThreeJS-投影、投影模糊（十七）

无投影&#xff1a; 完整的代码&#xff1a; <template> <div id"three_div"></div> </template> <script> import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/Or…...

编程日记 2023/5/11 22:22:56

蓝桥杯赛前冲刺-枚举暴力和排序专题1（包含历年蓝桥杯真题和AC代码）

目录 连号区间数&#xff08;第四届蓝桥杯省赛CB组,第四届蓝桥杯省赛JAVAB组&#xff09; 递增三元组&#xff08;第九届蓝桥杯省赛CB组,第九届蓝桥杯省赛JAVAB组&#xff09; 特别数的和&#xff08;第十届蓝桥杯省赛CB组,第十届蓝桥杯省赛JAVAB组&#xff09; 错误票据&a…...

编程日记 2023/5/22 13:37:01

Github库中的Languages显示与修改

目录 前言 【.gitattributes】文件 修改GitHub语言 前言 上传一个项目到GitHub时&#xff0c;发现显示的语言并非是自己项目所示的语言&#xff0c;这样的情况是经常发生的&#xff0c;为了能到达自己所需快速检索&#xff0c;或者是外部访问者能很好的搜索我们的项目&#…...

编程日记 2023/5/11 2:48:00

RocketMQ消息高可靠详解

文章目录 消息同步策略殊途同归同步基于offset而不是消息本身刷盘策略RocketMQ broker服务端以组为单位提供服务的，拥有着一样的brokerName则认为是一个组。其中brokerId=0的就是master，大于0的则为slave。 消息同步策略 master和slave都可以提供读服务，但是只有master允许…...

编程日记 2023/5/10 16:15:14

【python设计模式】4、建造者模式

哲学思想&#xff1a; 建造者模式的哲学思想是将复杂对象的创建过程分解成多个简单的步骤&#xff0c;并将这些步骤分别封装在一个独立的建造者类中。然后&#xff0c;我们可以使用一个指挥者类来控制建造者的调用顺序&#xff0c;以便在每个步骤完成后正确地构建复杂对象。 …...

编程日记 2023/5/25 16:03:12

【全网独家】华为OD机试Golang解题 - 机智的外卖员

华为Od必看系列 华为OD机试 全流程解析+经验分享,题型分享,防作弊指南华为od机试，独家整理 已参加机试人员的实战技巧华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典使用说明 如果想要在华为od机试中获取高分…...

编程日记 2023/5/13 3:05:25

Sentinel滑动时间窗限流算法原理及源码解析（中）

文章目录 MetricBucketMetricEvent数据统计的维度WindowWrap样本窗口实例 范型T为MetricBucket windowLengthInMs 样本窗口长度 windowStart 样本窗口的起始时间戳 value 当前样本窗口的统计数据 其类型为MetricBucket MetricBucket MetricEvent数据统计的维度 1、首先计算27t位…...

编程日记 2023/5/15 3:46:38

【OpenLayers】VUE+OpenLayers+ElementUI加载WMS地图服务

【OpenLayers】VUEOpenLayersElementUI加载WMS地图服务准备工作安装vue创建vue项目安装OpenLayers安装ElementUI加载wms地图服务准备工作 需要安装好nodejs&#xff0c;nodejs下载地址&#xff0c;下载对应的版本向导式安装即可。 安装完成后&#xff0c;控制台输入node -v&a…...

编程日记 2023/5/22 13:59:55

linux 命名管道 mkfifo

专栏内容&#xff1a;linux下并发编程个人主页&#xff1a;我的主页座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物&#xff0e;目录 前言 概述 原理介绍 接口说明 代码演示 结尾 前言 本专栏主要分享linux下并发编程…...

编程日记 2023/5/26 20:26:30

Redis（主从复制、哨兵模式、集群）概述及部署

目录 1.redis高可用 2.redis持久化 1.Redis 提供两种方式进行持久化&#xff1a; 2.RDB 持久化 3.AOF持久化 4.RDB和AOF的优缺点 5.Redis 性能管理 3.redis主从复制 1.Redis主从复制的概念 2.Redis主从复制的作用 3.Redis主从复制的搭建 4.redis哨兵模式 1.哨兵模式…...

编程日记 2023/5/22 13:59:42

windows下软件包安装工具之Scoop安装与使用

Scoop介绍 Scoop是Windows的命令行程序安装器。 Scoop从命令行安装程序&#xff0c;及其容易。它有如下特点&#xff1a; 消除权限弹出窗口隐藏 GUI 向导样式的安装程序防止安装大量程序的 PATH 污染避免安装和卸载程序的意外副作用自动查找并安装依赖项自行执行所有额外的设…...

编程日记 2023/5/10 19:48:06

九龙证券|人工智能+国产软件+智慧城市概念股火了，欧洲资管巨头大举抄底

近一周组织调研个股数量有130多只&#xff0c;迈瑞医疗成为调研组织数量最多的股票。 证券时报数据宝统计&#xff0c;近一周组织调研公司数量有130多家。从调研组织类型来看&#xff0c;证券公司调研相对最广泛&#xff0c;调研80多家公司。 迈瑞医疗获超500家组织调研 迈瑞…...

编程日记 2023/5/12 20:03:47

Nacos下载安装与配置(windows)

一、Nacos下载 官网地址&#xff1a;home (nacos.io) 点击前往Github&#xff0c;跳转至Github下载页面。 点击Tags&#xff0c;跳转至版本选择页面&#xff0c;此处选择2.2.0版本。 点击nacos-server-2.2.0.zip&#xff0c;进行下载。 二、Nacos安装 将下载的压缩包解压至需…...

编程日记 2023/5/27 15:05:17

QT学习笔记（语音识别项目 ）

语音识别项目 我们知道 AI 智能音箱已经在我们生活中不少见&#xff0c;也许我们都玩过&#xff0c;智能化非常高&#xff0c;功能 强大&#xff0c;与我们平常玩的那种蓝牙音箱&#xff0c;Wifi 音箱有很大的区别&#xff0c;AI 智能在哪里呢&#xff1f;语音识别技 术和云端…...

编程日记 2023/5/24 21:21:26