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

前端笔记:Create React App 初始化项目的几个关键文件解读

1 介绍

  • Create React App 是一个官方支持的方式,用于创建单页应用的 React 设置
  • 用于构建用户界面的 JAVASCRIPT 库
  • 主要用于构建 UI

2 项目结构

一个典型的 Create React App 项目结构如下:

├── package.json
├── public                  # 这个是webpack的配置的静态目录
│   ├── favicon.ico
│   ├── index.html          # 默认是单页面应用,这个是最终的html的基础模板
│   └── manifest.json
└── src├── App.css             # App根组件的css├── App.js              # App组件代码├── App.test.js├── index.css           # 启动文件样式├── index.js            # 启动的文件(开始执行的入口)!!!!├── logo.svg└── serviceWorker.js

其中:

  • public/index.html: 是应用的入口HTML文件。
  • src/index.js: 是JavaScript入口文件,它渲染App组件。
  • src/App.js: 是一个示例组件,你可以开始在这里编写你的应用代码。
  • package.json: 包含项目的依赖和脚本命令等信息。

3 启动和创建

3.1 创建项目

npx create-react-app my-app

 你就创建了一个名为my-app的程序

其中public:

src:

3.2 启动

一旦你创建了项目,就可以进入项目目录并启动它

npm start

这将启动一个开发服务器,并在你的默认浏览器中打开一个新的标签页,显示你的 React 应用。

4 关键的几个文件

  • 在使用 Create React App 创建的项目中,关键的几个文件和目录分别承担着不同的职责。
  • 对于初步了解和开发而言,可以关注以下几个文件:

4.1 src/index.js

这个文件是整个 React 应用的入口点。它通常用于渲染根 React 组件到 HTML 页面上。

初始化创建完的index.js如下:

import React from 'react';
//从 'react' 模块中导入 React 对象。
//这是创建 React 组件和使用 React 功能的基础。import ReactDOM from 'react-dom/client';
//从 'react-dom/client' 模块中导入 ReactDOM 对象。
//这个对象提供了与 DOM 相关的方法,如将 React 组件渲染到页面上。import './index.css';
//导入 index.css 文件,这个文件通常包含应用的全局样式。import App from './App';
//从本地的 App.js 文件中导入 App 组件(函数组件)。
//App 组件通常是应用的根组件,包含了其他的子组件。import reportWebVitals from './reportWebVitals';
//从 reportWebVitals.js 文件中导入 reportWebVitals 函数。
//这个函数用于测量和报告页面性能。const root = ReactDOM.createRoot(document.getElementById('root'));
//使用 ReactDOM.createRoot() 方法创建一个 React 根
//这个方法的参数是一个 DOM 元素,这里是 id 为 'root' 的元素,它将作为 React 组件渲染的挂载点root.render(<React.StrictMode><App /></React.StrictMode>
);
//使用 root.render() 方法将 React 应用(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-vitalsreportWebVitals();
//调用 reportWebVitals 函数。这个函数用于在开发模式下报告页面的性能。

4.1.1 部分详细解释

对于

const root = ReactDOM.createRoot(document.getElementById('root'));

 这一行代码是用来创建一个 React 根(root)并将它挂载到 DOM 上的

  •  document.getElementById('root')使用 JavaScript 的 getElementById 函数从 HTML 文档中获取一个元素,该元素的 ID 为 "root"
    • public/index.html 文件中,你可以找到这个元素,它通常是一个空的 div 元素,用作 React 应用的挂载点。
  • ReactDOM.createRoot在这个ID 为 "root" 的元素上创建一个React 并发根
  • 把这个 创建的React 并发根 存储在 root 常量中,以便后续使用

对于

root.render(<React.StrictMode><App /></React.StrictMode>
);
  •  我们知道 root 是通过 ReactDOM.createRoot(document.getElementById('root')) 创建的一个 React 并发根实例
  • 这个 root 实例有一个 render 方法,该方法用于渲染 React 元素(在这里是我们的 <App /> 组件,通常定义在App.js中)到其关联的 DOM 元素(在这里是 ID 为 "root" 的 div 元素)

4.2 src/App.js

import logo from './logo.svg';
//导入了一个 SVG 文件,并将其分配给名为 logo 的变量
//在后续的JavaScript代码中,可以使用 {logo} 来引用这个 SVG 图片import './App.css';
//导入了 CSS 样式文件 App.css。
//所有在 App.css 文件中定义的样式都可以在这个组件中使用。function App() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><p>Edit <code>src/App.js</code> and save to reload.</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header></div>);
}
//定义 React 函数组件,名为 App。
//函数组件是使用 JavaScript 函数定义的组件。export default App;
//导出 App 组件,使其可以在其他文件(例如 index.js)中通过 import 语句导入和使用

App中的return部分

  • <div className="App">: 这一行创建了一个 div 元素,其 className 属性为 App
  • <header className="App-header">:创建了一个 header 元素,其 className 属性为App-header
  • <img src={logo} className="App-logo" alt="logo" />
    • 插入了一个图片元素
    • src={logo} 指定了图片的源为之前导入的 logo SVG 文件
    • 应用了 App-logo 的 CSS 样式,并设置了 alt 属性为 "logo"
      • 在App.css中,App-logo的部分是
        • 所有的 .App-logo 元素(不论用户的动画偏好如何)都将有 height: 40vmin;pointer-events: none; 这些样式。

        • 如果用户的系统设置表示他们没有对减少动画有特殊偏好(prefers-reduced-motion: no-preference),那么 .App-logo 元素还将拥有一个无限循环的旋转动画。

  • <p><a>: 分别创建了段落和链接元素,并在其中插入了文本和其他 JSX 元素

4.3 public/index.html 

4.4 src/App.css

4.5 src/index.css

4.6 package.json

相关文章:

前端笔记:Create React App 初始化项目的几个关键文件解读

1 介绍 Create React App 是一个官方支持的方式&#xff0c;用于创建单页应用的 React 设置用于构建用户界面的 JAVASCRIPT 库主要用于构建 UI 2 项目结构 一个典型的 Create React App 项目结构如下&#xff1a; ├── package.json ├── public # 这…...

提高工作效率!本地部署Stackedit Markdown编辑器,并实现远程访问

文章目录 1. docker部署Stackedit2. 本地访问3. Linux 安装cpolar4. 配置Stackedit公网访问地址5. 公网远程访问Stackedit6. 固定Stackedit公网地址 StackEdit是一个受欢迎的Markdown编辑器&#xff0c;在GitHub上拥有20.7k Star&#xff01;&#xff0c;它支持将Markdown笔记保…...

visual studio解决bug封装dll库

1.速度最大化 O2 2.设置输出目录 配置属性/常规/输出目录 链接器/常规/输出dll文件 链接器/调试/输出程序数据库pdb文件 链接器/高级/导入库 3.输出X86 X64分别对应的dll、lib、pdb 然后修改更新说明 更新说明格式如下&#xff1a; 4.将库提交到FTP每日更新库文档下 和测试交接…...

合肥工业大学自然语言处理实验报告

工程报告 目录 1 研究背景 4 2 工程目标 7 2.1 工程一 7 2.2 工程二 7 2.3 工程三 7 2.4 工程四 7 3 实验环境与工具 7 4 模型方法 8 4.1 n-gram模型 8 4.2 模型的平滑 9 4.2.1 Add-one 9 4.2.2 Add-k 9 4.2.3 Backoff 10 4.2.4 Interpolation 10 4.2.5 Absolute discounting 1…...

layui laydate实现日期选择并禁用指定的时间

最终实现禁用2023-9-26这天的效果 官网地址 日期和时间组件文档 - layui.laydate 下面是实现的代码 <!DOCTYPE html> <html> <head><meta charset"utf-8"><title>layDate快速使用</title><link rel"stylesheet"…...

scala数组函数合集

目录 1. 添加类函数 2.生成类函数 3.删除类函数 4.查找类函数 5.统计类函数 6.修改类函数 7.判断类函数 8.获取集合元素 9.集合操作类函数 10.转换类函数 11.工具类函数 12.集合内与集合间计算函数 在 scala 中Array数组是一种可变的、可索引的数据集合 创建数组…...

软件测试「转行」答疑(未完更新中)

软件测试行业「转行」答疑&#xff08;未完更新中&#xff09; ⭐文章简介一、2023年「互联网」行业现状&#xff01;二、0基础转行「互联网」的5句大实话建议&#xff01;三、互联网有哪些「职业」&#xff0c;可以选择&#xff1f;四、这些职业之间的优缺点介绍。 ⭐文章简介…...

计算机网络---TCP/UDP

TCP/UDP 1、TCP三次握手 四次挥手? TCP是一种面向连接的、可靠的字节流服务。在建立TCP连接时,需要进行三次握手,而在关闭TCP连接时,需要进行四次挥手。具体来说,TCP三次握手的过程如下: 客户端向服务端发送SYN报文,表示请求建立连接。服务端收到SYN报文后,向客户端发…...

Docker私有仓库打开2375端口(linux)

前言 在我们开发测试过程中&#xff0c;需要频繁的更新docker镜像&#xff0c;然而默认情况下&#xff0c;docker的2375端口是关闭的&#xff0c;下面介绍如何打开端口。 1、打开步骤 1.1、修改配置 登录docker所在服务器&#xff0c;修改docker.service文件 vi /usr/lib/sys…...

底部Taber的抽取

1.会抽取一个布局样式 2.布局样式里面抽取一个底部样式 这个是layout的代码 <template><view class"layout-wrapper"><view class"layout-content"><slot></slot></view><!-- 底部 --><Tabbar :activeInde…...

Bootstrap中固定某一个元素不随滚动条滚动

可以利用类sticky-top实现固定某个元素在顶部的效果&#xff0c;示例代码如下&#xff1a; <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>固定某一个元素不随滚动条滚动</title><meta name"viewport&quo…...

时序数据库 IoTDB 发布端边云原生解决方案,有效优化工业互联网数据上传时效与资源消耗...

2023 年 9 月 8 日&#xff0c;由中国通信学会、福建省工业和信息化厅主办的 2023 中国国际工业互联网创新发展大会在厦门举办。大会主论坛中&#xff0c;时序数据库 IoTDB 发表其自研建立的端边云原生解决方案&#xff0c;该方案可实现端侧设备、边缘服务器、数据中心数据的协…...

Spring Boot中实现发送文本、带附件和HTML邮件

SpringBoot实现发送邮箱 引言 在现代应用程序中&#xff0c;电子邮件通常是不可或缺的一部分。在Spring Boot中&#xff0c;你可以轻松地实现发送不同类型的邮件&#xff0c;包括文本、带附件和HTML邮件。本博客将向你展示如何使用Spring Boot发送这些不同类型的电子邮件。 步…...

MySQL5.7版本与8.0版本在CentOS系统安装

目录 前置要求 1. MySQL5.7版本在CentOS系统安装 1.1 安装 1.1.1 配置yum仓库 1.1.2 使用yum安装MySQL 1.1.3 安装完成后&#xff0c;启动MySQL并配置开机自启动 1.1.4 检查MySQL的运行状态 1.2 配置 1.2.1 获取MySQL的初始密码 1.2.2 登陆MySQL数据库系统 …...

【gitlab】从其他仓库创建项目

需求描述 解决方法 以renren-fast脚手架为例 第一步 第二步 第三步 第四步 参考文章...

【ARM CoreLink 系列 6 -- DMC-400控制器简介】

文章目录 1.1 DMC-400 简介1.1.1 DFI&#xff08;DDR PHY Interface&#xff09;1.1.2 DFI 接口组1.1.3 DMC-400 兼容协议1.1.4 DMC-400 特性1.1.5 DMC-400 Interface 1.1 DMC-400 简介 DMC-400是一个由ARM开发、测试和授权的动态内存控制器&#xff0c;同时 DMC-400也是一个符…...

在 Azure 中开发云原生应用程序:工具和技巧

Azure 中的云原生开发工具 Azure 包含一系列用于云原生应用程序开发的内置工具和服务。这里介绍的服务和工具是很好的入门选择。 发展 Azure 包括两个用于开发和构建云原生应用程序的主要工具&#xff1a;Visual Studio (VS) 和Azure应用服务。 VS 是一个集成开发环境&#…...

【Redis】基础数据结构-字典

Redis 字典 基本语法 字典是Redis中的一种数据结构&#xff0c;底层使用哈希表实现&#xff0c;一个哈希表中可以存储多个键值对&#xff0c;它的语法如下&#xff0c;其中KEY为键&#xff0c;field和value为值&#xff08;也是一个键值对&#xff09;&#xff1a; HSET key…...

平板第三方电容笔怎么样?便宜的ipad触控笔推荐

苹果原装的电容笔与国产的平替电容笔最大的区别在于&#xff0c;平替电容笔只有一个斜面压力感应&#xff0c;而苹果电容笔既有斜面压力感应&#xff0c;又有重力压力感应。但是&#xff0c;如果你不经常使用它来进行绘画的话&#xff0c;你也不必买选择这款苹果电容笔&#xf…...

pytorch_神经网络构建3

文章目录 卷积神经网络实现卷积层,池化层池化层:数据标准化AlexNet卷积网络深层网络结构vgggoogleNet网络结构ResNet网络结构DensNet网络结构训练卷积神经网络会遇到的一些问题学习率衰减 卷积神经网络 前面讲述了逻辑回归分类,模拟函数回归问题,单层,深层网络,它们以点和向量…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...