react学习(一)之初始化一个react项目

React 是一个用于构建用户界面(UI)的 JavaScript 库,用户界面由按钮、文本和图像等小单元内容构建而成。React 帮助你把它们组合成可重用、可嵌套的 组件。从 web 端网站到移动端应用,屏幕上的所有内容都可以被分解成组件,即,可由react构建。

  • A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

    • 用来构建UI的 JavaScript库
    • React 不是一个 MVC 框架,仅仅是视图(V)层的库

 初始化react项目

要求:Node>=10.14.2 且 npm>=5.6

// 1.直接npx安装
//(npx是npm5.2+附带的package运行工具,和npm差不多版本,功能不太一样,不知道的话可以去搜一下)

npx create-react-app  "项目名称"

// 2.先安装 create-react-app,在创建react项目

npm install -g create-react-app

npx create-react-app  "项目名称"


cd my-app
npm start

官网有很多搭载了其他js的创建,根据自己需要去创建即可。我用的cra创建,npm的时候报错了一堆不知道为啥。。。可能create-react-app有啥问题吧,先不管,如下图:

运行起来,报错了,如下图:

web-vitals没找着,那就install一下

//web-vitals,即“网页指标”是 Google 的一项计划,
//旨在针对网页质量信号提供统一指南,这些信号对于提供出色的网页用户体验至关重要。
//它的目标是简化各种可用的性能测量工具,并帮助网站所有者专注于最重要的指标,即核心网页指标。

npm install web-vitals

node版本要么是14,要么大于16.14,我是16.13,所以被提示了。。。如下图: 

好了,npm start 运行成功! 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

JMeter性能测试系列一初识JMeter

1.JMeter介绍 Apache组织的Stefano Mazzocchi是JMeter项目的创始人。编写JMeter最初的目的是为了测试server的性能(后期被Tomcat替代)。随后,JMeter在Apache组织内部开始被其他项目所使用,并最终推广出来,成为独立的软件项目并不断更新&…

【vue3】插件@tsparticles/vue3、tsparticles实现粒子特效

文章目录 一、安装依赖二、全局引入三、使用 一、安装依赖 npm i tsparticles/vue3 npm i tsparticles二、全局引入 // main.js import Particles from tsparticles/vue3 import { loadFull } from tsparticlesconst app createApp(App) app.use(Particles, {init: async (e…

YOLO算法改进Backbone系列之MogaNet:

卷积神经网络(ConvNets)一直是计算机视觉的首选方法。受灵长类视觉系统的启发,卷积层可以对具有区域密集连接和平移等方差约束的观测图像的邻域相关性进行编码。通过交错分层,ConvNets获得了被动增加的感受野,并善于识…

java接口自动化测试

🔥 交流讨论:欢迎加入我们一起学习! 🔥 资源分享:耗时200小时精选的「软件测试」资料包 🔥 教程推荐:火遍全网的《软件测试》教程 📢欢迎点赞 👍 收藏 ⭐留言 &#x1…

组合模式【结构型模式C++】

1.概述 组合模式又叫部分整体模式属于结构型模式,是用于把一组相似的对象当作一个单一的对象。组合模式依据树形结构来组合对象,用来表示部分以及整体层次。 2.结构 组件(Component):定义了组合中所有对象的通用接口&#xff0c…

面试题

jdk自带的线程池 newFixedThreadPool 固定大小线程池 同时可运行的线程数量是固定的。当提交新任务时,如果线程池中已有线程正在执行任务且数量达到上限,则新任务将被放入队列中等待,直到有线程空闲出来。适用于处理长期存在且可以并行执行的…

TFTLCD原理硬件介绍

介绍 TFT LCD(薄膜晶体管液晶显示器)是一种广泛使用的显示技术,它结合了薄膜晶体管(TFT)和液晶显示(LCD)技术。TFT LCD的主要特点是使用TFT矩阵来控制施加到每个像素的电压,从而实现…

财务管理困扰外贸公司?软件解决方案大揭秘!

本文将探讨外贸公司在财务管理中遇到的难题,提出可能性的解决方案,并概述理想的外贸财务管理软件应具备哪些必备功能。 一、外贸公司财务管理难题 1、交易币种多样化 如何准确记录不同货币的财务活动,是外贸公司必须面对的问题。外贸公司的…

【昇腾产品应用】英码科技EA500I基于昇腾Mind SDK实现实时人体关键点检测

在教育、体育、安防、交通、医疗等领域中,实时人体关键点检测应用发挥着至关重要的作用,比如在体育训练时,实时人体关键点检测可以精确、实时地捕捉运动员的动作,从而进行动作分析和优化;在安防应用场景中,…

web前端框架设计第五课-计算属性与监听属性

web前端框架设计第五课-计算属性与监听属性 一.预习笔记 1.计算属性 computed split():拆分 reverse():倒序 join():拼接 计算属性与方法,两者效果一致,但是computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 met…

openGauss学习笔记-268 openGauss性能调优-TPCC性能调优测试指导-网络配置-网卡多中断队列设置

文章目录 openGauss学习笔记-268 openGauss性能调优-TPCC性能调优测试指导-网络配置-网卡多中断队列设置268.1 中断调优268.2 网卡固件确认与更新 openGauss学习笔记-268 openGauss性能调优-TPCC性能调优测试指导-网络配置-网卡多中断队列设置 本章节主要介绍openGauss数据库内…

多项式相关题()

D - S老师的虚树 值得一提的是如何求这个 a i a_i ai​,可以考虑按dfs序考虑同一种边,运用树状数组即可统计(注意不要加重了,不需要打区间覆盖,这样可以不用打线段树) F(i, 1, n) {ll sz d[i].size() - 1…

PLC_博图系列☞P_TRIG:扫描 RLO 的信号上升沿

PLC_博图系列☞P_TRIG:扫描 RLO 的信号上升沿 文章目录 PLC_博图系列☞P_TRIG:扫描 RLO 的信号上升沿背景介绍P_TRIG: 扫描 RLO 的信号上升沿说明参数示例 关键字: PLC、 西门子、 博图、 Siemens 、 P_TRIG 背景介绍 这是一…

Python 数据库简化操作:dataset 库介绍

文章目录 Python 数据库简化操作:dataset 库介绍第一部分:背景介绍第二部分:库是什么?第三部分:如何安装这个库?第四部分:库函数使用方法第五部分:场景应用第六部分:常见…

AB5 点击消除

AB5 点击消除 可以用栈来解决。 当栈为空的时候,直接将字符入栈当栈非空的时候 当前字符与栈顶字符相同 出栈 当前字符与栈顶字符不同 入栈 重复上述2步即可。 栈在输出的时候不能从栈底开始输出,需要先把栈顶元素弹出并保存下来,在进行输…

力扣HOT100 - 104. 二叉树的最大深度

解题思路: class Solution {public int maxDepth(TreeNode root) {if (root null) return 0;return Math.max(maxDepth(root.left), maxDepth(root.right)) 1;} }

ragflow 大模型RAG知识库使用案例

参考: https://github.com/infiniflow/ragflow/blob/main/README_zh.md 支持丰富的文件类型,包括 Word 文档、PPT、excel 表格、txt 文件、图片、PDF、影印件、复印件、结构化数据, 网页等。 运行步骤: 1、确保 vm.max_map_count 不小于 262144 【更多】: 如需确认 vm.…

ZISUOJ 数据结构--队列及其应用

说明: 基本都是bfs的常见模板题型,思路都很直接,不过后面有两道题很搞心态,它们给的坐标x、y是反的,导致刚开始一直错。题目还是要看仔细,不能先入为主。 题目列表: 问题 A: 围圈报数(完善程序…

电磁兼容(EMC):静电放电(ESD)抗扰度试验深度解读(五)

静电放电过程是一个很复杂的过程,下面比对人体持金属对产品放电和静电发生器对产品进行接触放电过程的详细分解说明。 1. 人持金属对产品放电过程 人对产品所产生的静电放电,会发生下面一系列的事件: 1)当手持金属片接近产品的…

嵌入式Linux开发实操(十九):Nand Flash驱动的实现

前言: nand flash从硬件连接上看,如下图,有专用接口,数据线有8或16根。 Nand Flash按每个存储单元Cell内存储比特个数不同可分为 SLC(Single-Level Cell存储1个比特)、MLC(Multi-Level Cell存储2个比特) 、 TLC(Triple-Level Cell存储3个比特)、QLC(Quad-Level C…