从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.hqwc.cn/news/589596.html

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

相关文章

字符分类函数

字符分类函数 C语言中有⼀系列的函数是专门做字符分类的,也就是⼀个字符是属于什么类型的字符的。这些函数的使用都需要包含⼀个头文件是 ctype.h 这些函数的使用方法非常类似,我们就讲解⼀个函数的事情,其他的非常类似: int i…

用Vue仿了一个类似抖音的App

大家好,我是 Java陈序员。 今天,给大家介绍一个基于 Vue3 实现的高仿抖音开源项目。 关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。 项目介绍 douyin —— 一个基于 Vue、Vite 实…

【软件工程】详细设计(二)

这里是详细设计文档的第二部分。前一部分点这里 4. 学生端模块详细设计 学生端模块主要由几个组件构成:学生登录界面,成绩查询界面等界面。因为学生端的功能相对来说比较单一,因此这里只给出两个最重要的功能。 图4.1 学生端模块流程图 4.…

女大三抱金砖?看完这篇起诉状就明白:猜疑乃婚姻之大敌

女大三抱金砖?看完这篇起诉状就明白:猜疑乃婚姻之大敌 阿勇与阿芳,一对年过四十的夫妻,且有一对已成年的儿女,如今走到了婚姻的尽头。原告阿勇指控双方感情早已破裂,受父母包办婚姻影响,两人经常…

应用方案D78040场扫描电路,偏转电流可达1.7Ap-p,可用于中小型显示器

D78040是一款场扫描电路,偏转电流可达1.7Ap-p,可用于中小型显示器。 二 特 点 1、有内置泵电源 2、垂直输出电路 3、热保护电路 4、偏转电流可达1.7Ap-p 三 基本参数 四 应用电路图 1、应用线路 2、PIN5脚输出波形如下:

makefile01

什么是makefile Makefile 文件描述了 Linux 系统下 C/C 工程的编译规则,它用来自动化编译 C/C 项目。一旦写编写好 Makefile 文件,只需要一个 make 命令,整个工程就开始自动编译,不再需要手动执行 GCC 命令。一个中大型 C/C 工程…

Unity类银河恶魔城学习记录12-2 p124 Character Stats UI源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释,可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili UI_Statslot.cs using System.Collections; using System.Collections.Gen…

云计算的安全需求

目录 一、概述 二、云安全服务基本能力要求 三、信息安全服务(云计算安全类)资质要求 3.1 概述 3.2 资质要求内容 3.2.1 组织与管理要求 3.2.2 技术能力要求 四、云安全主要合规要求 4.1 安全管理机构部门的建立 4.2 安全管理规范计划的编制 4…

回溯算法|78.子集

力扣题目链接 class Solution { private:vector<vector<int>> result;vector<int> path;void backtracking(vector<int>& nums, int startIndex) {result.push_back(path); // 收集子集&#xff0c;要放在终止添加的上面&#xff0c;否则会漏掉自…

linux 回收站机制(笔记)

Linux下回收站机制https://mp.weixin.qq.com/s/H5Y8VRcaOhFZFXzR8yQ7yg 功能 &#xff1a;设立回收站&#xff0c;并且可定时清空回收站。 一、建议将alias rm 改成别的。 比如alias rmm &#xff0c;同时修改rm -rf ~/.trash/* 改成 rmm -rf ~/.trash/* 不然影响rm 的正常使…

Axure案例分享—垂直手风琴(附下载地址)

今天分享的案例是Axure8(兼容9和10)制作的垂直手风琴 一、功能介绍 折叠或展开多个面板内容&#xff0c;默认为展开一项内容&#xff0c;点击任一收起的选项&#xff0c;展开面板&#xff0c;其他面板收起二、制作过程 原型是由矩形组件以及动态面板构成&#xff0c; 拖入一…

黑马点评项目笔记 I

短信登录 将逻辑过期时间写入redis里面 Slf4j RestController RequestMapping("/user") public class UserController {Resourceprivate IUserService userService;Resourceprivate IUserInfoService userInfoService;/*** 发送手机验证码*/PostMapping("code&…