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

这篇具有很好参考价值的文章主要介绍了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

react学习(一)之初始化一个react项目,前端,react,创建react项目,crareact学习(一)之初始化一个react项目,前端,react,创建react项目,cra

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

react学习(一)之初始化一个react项目,前端,react,创建react项目,cra

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

react学习(一)之初始化一个react项目,前端,react,创建react项目,cra

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

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

npm install web-vitals

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

react学习(一)之初始化一个react项目,前端,react,创建react项目,cra

好了,npm start 运行成功! 

react学习(一)之初始化一个react项目,前端,react,创建react项目,cra文章来源地址https://www.toymoban.com/news/detail-858300.html

到了这里,关于react学习(一)之初始化一个react项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【实战】 项目起航:项目初始化与配置 —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(一)

    学习内容来源:React + React Hook + TS 最佳实践-慕课网 相对原教程,我在学习开始时(2023.03)采用的是当前最新版本: 项 版本 react react-dom ^18.2.0 react-router react-router-dom ^6.11.2 antd ^4.24.8 @commitlint/cli @commitlint/config-conventional ^17.4.4 eslint-config-prettier ^8.6.0 husky ^8.0.3 lint-staged ^13.1.2 p

    2024年02月10日
    浏览(78)
  • 【实战】一、项目起航:项目初始化与配置 —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(一)

    学习内容来源:React + React Hook + TS 最佳实践-慕课网 相对原教程,我在学习开始时(2023.03)采用的是当前最新版本: 项 版本 react react-dom ^18.2.0 react-router react-router-dom ^6.11.2 antd ^4.24.8 @commitlint/cli @commitlint/config-conventional ^17.4.4 eslint-config-prettier ^8.6.0 husky ^8.0.3 lint-staged ^13.1.2 p

    2024年02月12日
    浏览(52)
  • gitee上创建新仓库如何clone到本地,并初始化项目

    目录 一、克隆 方法一 方法二 二、初始化项目 构建基本框架 自动生成代码  由于github速度较慢,这里我们使用gitee。我们在gitee上面创建一个仓库,然后我们可以通过ideal直接克隆下来,仓库设置如下 接着使用ideal将项目克隆下来,首先复制项目的地址 打开ideal,选择文件

    2024年02月05日
    浏览(61)
  • 初始化一个Gin框架的Go-Web项目

    使用到的第三方库 gin Gin 框架 viper 配置文件管理 cors 跨域资源请求配置 gorm ORM 库 zap 日志记录 Go 语言程序的入口点 main.go 文件 使用 flag 读取配置文件路径参数,默认当前目录下 使用 viper 读取 config.ini 配置文件初始化初始数据 初始化随机数种子 初始化数据库 声明启动程序

    2024年02月09日
    浏览(54)
  • 黑马程序员前端 Vue3 小兔鲜电商项目——(一)初始化项目

    Vue3是Vue.js最新的主要版本,它已经于2020年9月18日发布。它提供了许多新功能和性能改进,这些改进使得Vue更易于使用和更具可扩展性。 以下是Vue3的一些主要特性: 更快的渲染:Vue3使用重写的响应式系统,它使用Proxy对象来解决Vue2中的性能瓶颈问题。这使得Vue3的渲染速度比

    2024年02月15日
    浏览(82)
  • 黑马程序员前端 Vue3 小兔鲜电商项目——(二)初始化项目

    Vue3是Vue.js最新的主要版本,它已经于2020年9月18日发布。它提供了许多新功能和性能改进,这些改进使得Vue更易于使用和更具可扩展性。 以下是Vue3的一些主要特性: 更快的渲染:Vue3使用重写的响应式系统,它使用Proxy对象来解决Vue2中的性能瓶颈问题。这使得Vue3的渲染速度比

    2024年02月11日
    浏览(44)
  • 【前端Vue】社交信息头条项目完整笔记第1篇:一、项目初始化【附代码文档】

    社交媒体-信息头条项目完整开发笔记完整教程(附代码资料)主要内容讲述:一、项目初始化使用 Vue CLI 创建项目,加入 Git 版本管理,调整初始目录结构,导入图标素材。二、登录注册准备,实现基本登录功能,登录状态提示,表单验证。三、个人中心,四、首页—文章列表TabBar

    2024年03月09日
    浏览(73)
  • 日志审计系统Agent项目创建——初始化数据库和日志文件(Linux版本)

    完结,下一篇主要是读取日志文件,并读取最新日志文件

    2024年01月16日
    浏览(67)
  • React refers to UMD global, but the current file is a module vite初始化react项目

    初始化项目 在执行完上面的命令后,npm 首先会自动下载create-vite这个第三方包,然后执行这个包中的项目初始化逻辑。输入项目名称之后按下回车,此时需要选择构建的前端框架: 选中react后们还有个选项,我们选择typescript 切换到项目按照依赖后跑起来   React refers to UMD

    2024年02月09日
    浏览(50)
  • Java开源项目mall学习笔记(1)——项目初始化

            该笔记是记录学习开源项目mall过程的文档笔记,完全原创,转载请声明。同时也对开源项目的作者表示感谢! mall: 🔥 mall项目是一套基于 SpringBoot + Vue + uni-app 实现的电商系统,包括前台商城项目及后台管理系统,采用Docker容器化部署。前台商城系统包含首页门户

    2024年02月12日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包