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

从0配置React

在本地安装和配置React项目,您可以使用create-react-app这个官方推荐的脚手架工具。以下是安装React的步骤,包括安装Node.js、使用create-react-app创建React应用,以及启动开发服务器。

  1. 下载安装node.js
  2. 运行以下命令,验证Node.js和npm的安装。
$ node -v
$ npm -v

在这里插入图片描述

  1. 使用create-react-app创建React应用
$ npx create-react-app my-react-app

出现以下报错:

PS C:\Users\haiyue.WB-R11> npx create-react-app my-react-app
npm ERR! code ENOENT
npm ERR! syscall lstat
npm ERR! path C:\Users\haiyue.WB-R11\AppData\Roaming\npm
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\haiyue.WB-R11\AppData\Roaming\npm'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoentnpm ERR! A complete log of this run can be found in: C:\Users\haiyue.WB-R11\AppData\Local\npm-cache\_logs\2024-03-31T08_41_13_493Z-debug-0.log

查看当前npm路径:

$ npm config get prefix

在这里插入图片描述

经检查,该路径C:\Users\haiyue.WB-R11\AppData\Roaming\npm并不存在。
接着,我确定npm的安装路径,它在nodejs文件夹里面:C:\Program Files\nodejs\node_modules\npm

执行以下命令,将npm的路径切换到该路径:

 $ npm config set prefix "C:\Program Files\nodejs\node_modules\npm"

成功设置:
在这里插入图片描述
接下来,继续执行开始的命令,创建我的app:
在这里插入图片描述
其中,npx是npm 5.2+附带的一个包运行器工具,可以运行在npm仓库中的包而不需要全局安装它们。

成功create:
在这里插入图片描述

  1. 启动开发服务器

进入应用目录,我这里是essay-scoring-app。

$ cd my-react-app
$ npm start

在这里插入图片描述

http://www.lryc.cn/news/331069.html

相关文章:

  • File和IO流
  • 2024系统架构师---解释器架构风格的概念与应用
  • makefile01
  • 计算机视觉之三维重建(6)---多视图几何(上)
  • 蓝桥杯:全球变暖(python,BFS,DFS)(栈溢出的处理办法)
  • Qt C++ | Qt 元对象系统、信号和槽及事件(第一集)
  • Python 抽象类
  • 达梦数据库自动备份(全库)+还原(全库) 控制台
  • android AndroidAutoSize 取消第三方库适配问题(两个步骤)
  • 【Java 多线程】从源码出发,剖析Threadlocal的数据结构
  • Sy6 编辑器vi的应用(+shell脚本3例子)
  • 把标注数据导入到知识图谱
  • 【前端基础】什么是类数组对象,类数组对象转换成数组的方法
  • Python快速入门系列-8(Python数据分析与可视化)
  • 双非硕转测试之Java学习笔记(一):集合
  • zabbix源码安装
  • 计算机视觉之三维重建(5)---双目立体视觉
  • 计算机网络-TCP/IP 网络模型
  • 算法训练营第29天|LeetCode 491.递增子序列 46.全排列 47.全排列Ⅱ
  • Ubuntu服务器搭建 - 环境篇
  • 深度学习基础模型之Mamba
  • Topaz Video AI for Mac v5.0.0激活版 视频画质增强软件
  • 解决WordPress文章的段落首行自动空两格的问题
  • RISC-V单板计算机模拟和FPGA板多核IP实现
  • Mojo编程语言案例及介绍
  • 【Python面试题收录】Python中有哪些方法交换两个变量的值?至少给出三种方法。
  • MySQL核心命令详解与实战,一文掌握MySQL使用
  • 基于Springboot + MySQL + Vue 大学新生宿舍管理系统 (含源码)
  • vulnhub pWnOS v2.0通关
  • leetcode热题100.数据流的中位数