从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.rhkb.cn/news/292592.html

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

相关文章

系列学习前端之第 7 章:一文掌握 AJAX

1、AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML(中文名:阿贾克斯),就是异步的 JS 和 XML。AJAX 不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。AJAX 可以在浏览器中向服务器发送异步请求…

Wasm初上手

总之也是为了扩宽技术面吧。。。我也不知道为什么就想试试了,就酱。 参考阅读:极客时间《WebAssembly入门课》 安装wasm的编译器Emscripten。Emscripten 是一个“源到源”语言编译器工具集,这个工具集可以将 C/C 代码编译成对应 JavaScript 代…

AI学习-Pandas数据处理分析

文章目录 1. Pandas概述2. Series用法2.1 Series的创建2.2 Series的取值2.3 Series的相关方法 3. DataFrame用法3.1 DataFrame创建3.2 DataFrame取值3.3 DataFrame相关方法 1. Pandas概述 ​ Pandas 是一个开源的数据分析处理库,它应用在数据科学、统计分析、机器学…

手机短信验证码自动转发到服务器

今天写一个自动化处理程序,需要验证码登录,怎么样把手机收到的短信自动转发到服务器接口呢? 利用ios手机快捷指令的功能 打开快捷指令点击中间自动化点击右上角号选择信息信息包含选取,输入验证码选择立即执行点击下一步按下图配…

程序汪接的4万智慧餐饮项目

本文章来自程序汪背后的私活小团队,开发智慧餐厅的小程序 由于程序汪太忙于是把这个项目让一个靠谱粉丝开发了,当然开发质量和进度我会跟踪,具体分析如下 B站【我是程序汪】 老程序员接了一个4万的智慧餐饮项目,开发周期60天 小程…

Docker中常见的命令行

1 docker的全部命令 docker attach #连接到正在运行中的容器 docker build #使用 Dockerfile 创建镜像 docker builder #管理builds docker builder prune #清除build缓存 docker checkpoint #管理checkpoints docker checkpoint create #从正在运行的容器创建检…

LATTICE进阶篇DDR2--(2)详解IPUG35---基于官方例程

前言 本章主要讲述根据《DDR & DDR2 SDRAM Controller IP Cores User’s Guide 》数据手册,配合ddr2的demo仿真,学习DDR2的IP核时序控制。 器件:Lattice ECP3 环境:Win10 Diamond3.13 ModelSim SE-64 10.5 一、下载DDR2…

【链表专题】(2. 两数相加 23. 合并 K 个升序链表 25. K 个一组翻转链表)

文章目录 2. 两数相加23. 合并 K 个升序链表25. K 个一组翻转链表 2. 两数相加 题目链接: leetcode2. 两数相加 class Solution {public ListNode addTwoNumbers(ListNode l1, ListNode l2) {ListNode cur1 l1,cur2 l2;ListNode newHead new ListNode(0);ListNode prev ne…

STM32的简介

内存 一般MCU包含的存储空间有FLASH和RAM,(RAM和flash又有片上和片外的区别,片上表示mcu自带的,已经封装在MCU内部的,片外表示外挂的,当项目中需要做一些复杂的应用,会存在资源不足的情况,这时…

MIT最新研究成果 机器人能够从错误中纠偏 无需编程介入和重复演示

目前科学家们正在努力让机器人变得更加智能,教会他们完成诸如擦拭桌面,端盘子等复杂技能。以往机器人要在非结构化环境执行这样的任务,需要依靠固定编程进行,缺乏场景通用性,而现在机器人的学习过程主要在于模仿&#…

LeetCode 双指针专题

11.盛最多水的容器 给定一个长度为 n 的整数数组 height 。有 n 条垂线,第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线,使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明:你不…

数据结构——lesson13排序之计数排序

💞💞 前言 hello hello~ ,这里是大耳朵土土垚~💖💖 ,欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹 💥个人主页&#x…

基于单片机锂电池电量检测数码管显示系统设计

**单片机设计介绍,基于单片机锂电池电量检测数码管显示系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机锂电池电量检测数码管显示系统设计的主要目标是实时、准确地检测锂电池的电量,并…

【python】常用函数汇总(持续更新……)

文章目录 【numpy.exp()】返回e的幂次方,e是一个常数为2.71828【np.dot()】矩阵相乘【np.linalg.inv()】矩阵求逆 【numpy.exp()】返回e的幂次方,e是一个常数为2.71828 举例:numpy.exp() 【np.dot()】矩阵相乘 【要点】 1、前者的列数后者…

浅谈Spring体系的理解

浅谈Spring知识体系 Spring Framework架构图Spring家族技术生态全景图XMind汇总 本文不涉及细节,主要回答两个问题: Spring家族技术生态全景图有哪些Spring Framework架构下每个模块有哪些东西,以及部分模块之间的关联关系 Spring Framework架…

iOS - Runtime - Class的结构

文章目录 iOS - Runtime - Class的结构前言1. Class的结构1.1 Class的结构1.1.1 objc_class1.1.2 class_rw_t1.1.3 class_ro_t 1.2 class_rw_t和class_ro_t的区别1.3 class_rw_t和class_ro_t的关系1.3.1 分析关系1.3.2 原因 1.4 method_t1.4.1 Type Encoding1.4.2 types说明1.4…

AJAX-项目优化(目录、基地址、token、请求拦截器)

目录管理 基地址存储 在utils/request.js配置axios请求基地址 作用&#xff1a;提取公共前缀地址&#xff0c;配置后axios请求时都会baseURLurl 填写API的公共前缀后&#xff0c;将js文件导入到html文件中 <script src"../../utils/request.js"></script&…

深度学习算法概念介绍

前言 深度学习算法是一类基于人工神经网络的机器学习方法&#xff0c;其核心思想是通过多层次的非线性变换&#xff0c;从数据中学习表示层次特征&#xff0c;从而实现对复杂模式的建模和学习。深度学习算法在图像识别、语音识别、自然语言处理等领域取得了巨大的成功&#xf…

STM32的IAP技术,BootLoader

来源 三种下载方式&#xff1a; 1、ICP&#xff1a;ST-Link, 2、ISP: FlyMcu, 3、IAP IAP简介 IAP技术的核心在于BootLoader程序的设计&#xff0c;这段程序预先烧录在单片机中&#xff0c;正常的APP程序可以使用BootLoader程序中的IAP功能写入&#xff0c;也可以两部分代码一…

docker使用教程

寒假用了docker 2个月没用 结果还重新安装docker 忘了怎么用 为了免得以后忘写下下面内容 # If you dont have a docker installed, youll need to install docker curl -s https://get.docker.com/ | sh # Use pip to install docker-compose pip install docker-compose…