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

news2024/9/23 1:39:23

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 运行成功! 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Kimi Chat四大更新详细解读!模型能力提升,支持语音输入输出!

大家好,我是木易,一个持续关注AI领域的互联网技术产品经理,国内Top2本科,美国Top10 CS研究生,MBA。我坚信AI是普通人变强的“外挂”,所以创建了“AI信息Gap”这个公众号,专注于分享AI全维度知识…

.net6项目模板搭建教程

1.集成log4net 安装如下扩展依赖即可,已经包含了log4net依赖: Microsoft.Extensions.Logging.Log4Net.AspNetCore 添加日志配置文件: 日志配置文件属性设置为始终复制: 注入服务: #region 注入log4net日志服务build…

【学习笔记之vue】vue项目放在springboot项目里后,刷新页面会显示whitelabel error page

vue项目放在springboot项目里后,刷新页面会显示whitelabel error page。 解决方案: 当你在Spring Boot项目中嵌入Vue项目,并且刷新页面时遇到了“Whitelabel Error Page”,这通常意味着Spring Boot后端没有正确地处理前端路由的请求。Vue.j…

X-Spider媒体下载工具

软件介绍 X-Spider 是一个功能丰富的推特媒体下载器,它不仅可以帮助用户从推特上下载图片和视频,还提供了一些高级的过滤功能。例如,用户可以通过指定日期范围来筛选需要下载的媒体文件,并且可以跳过已下载的重复文件&#xff0c…

ARTS Week 24

Algorithm 本周的算法题为 21. 合并两个有序链表 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1: img 输入:list1 [1,2,4], list2 [1,3,4]输出:[1,1,2,3,4,4] 实现代码如下&…

Centos7_miniconda_devtools安装_R语言入门之R包的安装

因为有同时反馈安装R包很慢或卡住。同事提供了一个安装R包的命令给我测试,在安装过程中复现报错信息,把下载慢或卡信的链接中的域名在防火墙中调整出口。 devtools::install_github("GreenleafLab/ArchR", ref"master", repos Bio…

助力突发异常事件预警保障公共安全,基于YOLOv7【tiny/l/x】模型开发构建公共生活场景下危险人员持刀行凶异常突发事件检测预警识别系统

基于AI目标检测模型的暴力持刀行凶预警系统是当下保障人民生命安全的新途径,近年来,公众场合下的暴力袭击事件频发,不仅给受害者及其家庭带来了深重的伤害,也对社会的稳定和安全造成了极大的威胁。在这种背景下,如何有…

为什么iPhone支持整页中文OCR应用很少?有什么好的解决方法?

iPhone上面没有支持中文整页OCR识别的app,这是一个值得探讨的问题。OCR,即光学字符识别,是一种将纸质文档或图片中的文字转化为可编辑文本的技术。随着科技的发展,OCR技术已经广泛应用于各个领域,包括文档处理、图像识…

AutoCAD 2025(CAD设计软件) V2025.0.0 珊瑚海精简优化版

网盘下载 AutoCAD2025珊瑚海精简版是一款计算机辅助设计软件的AutoCAD精简版,提供了丰富的设计工具和功能,使用户能够轻松创建复杂的图纸、模型和布局。该软件还具备强大的三维建模和渲染功能,用户可以用来创建和编辑三维模型,应用…

鸿蒙原生应用元服务-访问控制(权限)开发场景与权限声明

一、场景介绍 应用的APL(Ability Privilege Level)等级分为normal、system_basic和system_core三个等级,默认情况下,应用的APL等级都为normal等级。权限类型分为system_grant和user_grant两种类型。 二、配置文件权限声明 应用需要…

利用regress绘制拟合图,利用Slope的趋势分析(5)

code如下: % SCD,积雪日数 % SCS,积雪初日 % SCM,积雪终日% SCS SCD SCM clc; clear; % 读取 Excel 表 excel_file E:\work\2024年\April20\积雪作图\tif文件\excel表\SCS.xlsx; % Excel 文件路径 data readtable(excel_file);datavalue data{:,2:end}; year (…

就业班 第三阶段(负载均衡) 2401--4.18 day2 nginx2 LVS-DR模式

3、LVS/DR 模式 实验说明: 1.网络使用NAT模式 2.DR模式要求Director DIP 和 所有RealServer RIP必须在同一个网段及广播域 3.所有节点网关均指定真实网关 主机名ip系统用途client172.16.147.1mac客户端lvs-server172.16.147.154centos7.5分发器real-server1172.16.…

一句话或一张图讲清楚系列之——ISERDESE2的原理

主要参考: https://blog.csdn.net/weixin_50810761/article/details/137383681 xilinx原语详解及仿真——ISERDESE2 作者:电路_fpga https://blog.csdn.net/weixin_45372778/article/details/122036112 Xilinx ISERDESE2应用笔记及仿真实操 作者&#x…

华为机考入门python3--(17)牛客17- 坐标移动

分类:字符串 知识点: 正则匹配 re.match(pattern, move) 格式字符串,可以在字符串中直接引用变量 f"{x},{y}" 题目来自【牛客】 import re def is_valid_coordinate(move): # 使用正则表达式验证移动是否合法 # ^: …

JavaEE初阶——多线程(七)——定时器

T04BF 👋专栏: 算法|JAVA|MySQL|C语言 🫵 小比特 大梦想 此篇文章与大家分享多线程的第七篇文章——关于定时器 如果有不足的或者错误的请您指出! 目录 4.定时器4.1标准库提供的定时器4.2自己实现一个定时器4.2.1任务类4.2.2Timer类4.2.3 有一个线程来负…

计算机网络3——数据链路层5高速以太网

文章目录 一、100BASE-T 以太网二、吉比特以太网三、10吉比特以太网(10GbE)和更快的以太网四、使用以太网进行宽带接入 随着电子技术的发展,以太网的速率也不断提升。从传统的10Mbits以太网一直发展到现在常用的速率为1Gbits的吉比特以太网,甚至更快的以…

深度剖析图像处理—边缘检测

什么是边缘检测 边缘检测(Edge Detection)就是提取图像中的边缘点(Edge Point)。边缘点是与周围像素相比灰度值有阶跃变化或屋顶状变化的像素。边缘常存在于目标与背景之间、目标与目标之间、目标与其影子之间。 ​ 在图像处理和图像分析中,经常要用到边缘(Edge)、边…

【数学归纳法 反证法】菲蜀定理

裴蜀定理(或贝祖定理,Bzout’s identity)得名于法国数学家艾蒂安裴蜀,说明了对任何整数a、b和它们的最大公约 数d,关于未知数x和y的线性不定方程(称为裴蜀等式):若a,b是整数,且&…

绿联 安装transmission

绿联 安装transmission及中文UI 1、镜像 linuxserver/transmission:latest 2、安装 2.1、创建容器 按需配置权重。 2.2、基础设置 2.3、网络 桥接即可。 注:如果使用IPV6,请选择"host"模式。 注:如果使用IPV6,请选…