React 18

创建 React 18 脚手架项目

  1. 全局安装 create-react-app

    • npm install -g create-react-app

    • yarn global add create-react-app
      .

  2. 确认是否已安装 create-react-app

    • npm list -g create-react-app

    • yarn global list | grep create-react-app
      .

  3. 如果安装失败
    有时,npm 或 yarn 的缓存可能会导致问题。你可以尝试清理缓存并重新安装 create-react-app

    • npm cache clean --force

      npm install -g create-react-app

    • yarn global remove create-react-app

      yarn global add create-react-app

    或者检查是否有多个版本的 Node.js

    • nvm list
    • nvm use xxx
      .
  4. 查看react版本

    • npm list react 或简写 npm ls react

      仅显示版本号:npm list react --depth=0

    • yarn list react 或简写 yarn ls react

      仅显示版本号:yarn list react --depth=0
      .

  5. 创建新的React项目

    使用 create-react-app 命令来创建一个新的React项目。

    例如,如果你想要创建一个名为 my-react-app 的项目,可以运行以下命令:

    create-react-app my-react-app

    在这里插入图片描述

  6. 运行项目

    • 进入目录:cd my-react-app

    • 运行项目:yarn start

    在这里插入图片描述


目录结构

在这里插入图片描述
各文件的描述:

my-react-app/  
├── node_modules/           # 项目依赖包,由npm或yarn管理  
├── public/  
│   ├── favicon.ico         # 网站页签图标  
│   ├── 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            # 入口文件,引入核心库App.js,程序的入口  
│   ├── logo.svg            # logo图  
│   ├── reportWebVitals.js  # 页面性能分析文件(需要web-vitals库的支持)  
│   ├── setupTests.js       # 配置和初始化测试环境
├── .gitignore              # Git仓库的忽略文件  
├── package-lock.json       # 锁定和管理项目的依赖版本,确保项目的稳定性和可维护性
├── package.json            # 定义项目所需的各种模块及项目的配置信息  
└── README.md               # 项目信息描述文件
  1. 程序入口文件 src/ index.js
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<React.StrictMode><App /></React.StrictMode>
    );
    
  2. 挂载到主页面 public/index.html
    <body><div id="root"></div>
    </body>
    
  3. 组件 App.js 被渲染到页面

对项目稍微改造下,删除一些目前不必要的文件,结构和代码如下:

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

动作识别综合指南

本文将概述当前动作识别&#xff08;action recognition&#xff09;的方法和途径。 为了展示动作识别任务的复杂性&#xff0c;我想举这个例子&#xff1a; 你能明白我在这里做什么吗&#xff1f;我想不能。至少你不会确定答案。我正在钻孔。 你能弄清楚我接下来要做什么吗&…

RabbitMQ实践——配置Prometheus和Grafana报表

大纲 启用rabbitmq_prometheus插件安装启动Prometheus创建用户下载并解压修改配置启动 安装启动grafana安装启动配置数据源 在《RabbitMQ实践——在Ubuntu上安装并启用管理后台》中我们已经安装成功RabbitMQ及其管理后台。在此基础上&#xff0c;我们将打通它和Prometheus、Gra…

【npm】console工具(含胶囊,表格,gif图片)

这是一款控制台花样输出工具 相对丰富的输出方式 文本输出属性值输出胶囊样式输出表格输出图片输出&#xff08;含动图&#xff09; 安装 npm install v_aot引用 import v_aot from "v_aot";字段说明 字段类型属性字符串值字符串类型default 、 primary 、 suc…

Zabbix 7.0 新增功能亮点(二)——history.push API方法

Zabbix7.0LTS一经发布便吸引了众多运维小伙伴的关注&#xff0c;乐维社区forum.lwops.cn也伴随着不少小伙伴的热议与探讨&#xff0c;话不多说&#xff0c;抓紧上车。 前面我们介绍了zabbix 7.0 新增功能亮点&#xff08;一&#xff09;——T参数&#xff0c;本篇将向大家介绍z…

Three.js的渲染器:WebGLRenderer、CSS3DRenderer、SVGRenderer

我们都晓得渲染器是负责将场景中的3D对象转换为2D图像&#xff0c;然后显示在屏幕上&#xff0c;three.js内置了多种渲染器&#xff0c;来应对不同的和需求&#xff0c;贝格前端工场老司机&#xff0c;简要和大家分享下。 一、渲染器的定义和作用 在Three.js中&#xff0c;渲…

2024热门骨传导耳机购买推荐!精选五款好用不贵!

对于很多喜欢运动健身的小伙伴&#xff0c;在现在市面上这么多种类耳机的选择上&#xff0c;对于我来说的话还是很推荐大家去选择骨传导运动耳机的&#xff0c;相较于普通的入耳式蓝牙耳机&#xff0c;骨传导耳机是通过振动来传输声音的&#xff0c;而入耳式耳机则是通过空气传…

多款可观测产品全面升级丨阿里云云原生 5 月产品月报

云原生月度动态 云原生是企业数字创新的最短路径。 《阿里云云原生每月动态》&#xff0c;从趋势热点、产品新功能、服务客户、开源与开发者动态等方面&#xff0c;为企业提供数字化的路径与指南。 趋势热点 &#x1f947; 阿里云云原生产品负责人李国强&#xff1a;推进可…

NestJS学习笔记

一、安装NestJS CLI工具 环境检查 //查看node版本 node -v//查看npm版本 npm -v 安装nest/cli 使用npm全局安装nestjs/cli npm i -g nestjs/cli 查看nest版本 nest -v 结果如图&#xff1a; 创建nest项目 //命令行创建nest项目 nest new 【项目名】 VScode扩展下载 1、…

deepin V23 RC2 正式发布!

deepin 是一款基于 Linux 的开源桌面操作系统&#xff0c;今天 deepin V23 RC2 正式发布&#xff0c;欢迎体验与反馈&#xff01;感谢每一位 deepiner 提供想法与建议&#xff0c;让我们一起为打造美观易用、安全可靠的开源操作系统而努力&#xff01; 【功能新增与优化】 新增…

VBA基础知识

运算符 &#xff1a; 不等于 : <> 文本连接符号 & 方法&#xff1a;Offset&#xff08;行&#xff0c;列&#xff09; &&#xff1a;这是字符串连接运算符&#xff0c;用于将两个字符串或表达式连接成一个字符串。 VBA&#xff1a;Debug.Print&#xff08…

WordPress、Typecho 站点如何让 CloudFlare 缓存加速

众所周知 WordPress、Typecho 都是著名动态博客站点(一个最简单的判断依据就是都要依赖结合数据库),这类站点在 CDN 缓存上都有一个致命的缓存弊端就是动静态请求的区分,理论上要让 CDN 绕过所有的动态请求,缓存所有的静态请求,否则就会造成前端登录和非登录状态的混乱,…

flask基础3-蓝图-cookie-钩函数-flask上下文-异常处理

目录 一&#xff1a;蓝图 1.蓝图介绍 2.使用步骤 3.蓝图中的静态资源和模板 二.cookie和session 1.cookie 2.flask中操作cookie 3.session 4.session操作步骤 三.请求钩子 四.flask上下文 1.介绍 2.请求上下文&#xff1a; 3.应用上下文 3.g对象 五&#xff1a;…

计算机视觉基础课程知识点总结

图像滤波 相关: 核与图像同向应用&#xff0c;不翻转。 卷积: 核在应用前翻转&#xff0c;广泛用于信号处理和深度学习&#xff08;现在常说的二维卷积就是相关&#xff09;。 内积: 向量化的点积操作&#xff0c;是相关和卷积的一部分。 模板匹配&#xff1a;通过在图像中…

docker一些常用命令以及镜像构建完后部署到K8s上

docker一些常用命令以及镜像构建完后部署到K8s上 1.创建文件夹2.删除文件3.复制现有文件内容到新建文件4.打开某个文件5.查看文件列表6.解压文件&#xff08;tar格式&#xff09;7.解压镜像8.查看镜像9.删除镜像10.查看容器11.删除容器12.停止运行容器13.构建镜像14.启动容器15…

【GreenHills】如何使用GHS对于不同的文件进行文档内容对比

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 利用GHS对于不同的文件进行对比。 2、 问题场景 在项目开发过程中&#xff0c;会对于工程进行版本管理&#xff0c;对于没有项目管理工具的客户&#xff0c;想要对于当前版本的源文件和上一版或其他版本的源文件进行…

超燃混剪热门视频素材去哪里找?超燃混剪热门素材网站分享

各位小伙伴&#xff0c;今天我们来聊聊怎么找到那些超燃的混剪视频素材。毕竟&#xff0c;谁不想制作出有趣的视频发布到朋友圈、抖音呢&#xff1f;那么问题来了&#xff0c;去哪儿找那些劲爆的素材呢&#xff1f;别急&#xff0c;今天我就给大家推荐几个超级好用的视频素材平…

Python内存管理与垃圾回收机制

目录 一、引言 二、Python内存管理概述 三、引用计数机制 四、垃圾回收机制 标记-清除&#xff08;Mark-and-Sweep&#xff09; 分代收集&#xff08;Generational Collection&#xff09; 五、内存泄漏与优化 六、总结 一、引言 Python作为一门高级编程语言&#xff…

Coze+Discord:打造你的免费AI助手(教您如何免费使用GPT-4o/Gemini等最新最强的大模型/Discord如何正确连接Coze)

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 文章内容 📒📝 准备Discord📝 准备Coze🔌 连接💡 测试效果⚓️ 相关链接 ⚓️📖 介绍 📖 你是否想免费使用GPT-4o/Gemini等最新最强的大模型,但又不想花费高昂的费用?本文将教你如何通过Coze搭建Bot,并将其转发…

VMware清理拖拽缓存

磁盘空间越用越小&#xff0c;如何快速解决磁盘空间的问题&#xff0c;甩掉烦恼 安装VM tools之后可以通过拖拽的方式把文件拉入虚拟机之中。但每一次拖拽&#xff0c;其实都是现在cache文件夹里面生成一个同样的文件&#xff0c;并使用cp拷贝的方式将其拷贝到拖拽放置的目录中…

http协议,tomcat的作用

HTTP 概念:Hyper Text Transfer Protocol&#xff0c;超文本传输协议&#xff0c;规定了浏览器和服务器之间数据传输的规则。 特点: 1.基于TCP协议:面向连接&#xff0c;安全 2. 基于请求-响应模型的:一次请求对应一次响应 3HTTP协议是无状态的协议:对于事务处理没有记忆能…