如何安装React的第一个脚手架

article/2025/11/8 19:04:33

前言

学习React和Vue其实很多都是想通的,Vue中学到过一般我们都是通过脚手架来完成项目的开发,那么React也同样是有脚手架进行开发的,这样可以为我们省去很多的时间提高的我们的开发效率。那么接下来就是如何完成第一个脚手架的开发。

操作

首先我们需要准备并安装的是npm、yarn这两个东西,具体怎么安装可以自行百度非常之简单,那么我们首先需要做的是全局安装一个create-react-app 的脚手架库,那么这个就是我们在本地安装的库文件了,输入CMD打开命令行终端

npm install -g create-react-app

接着我们需要做的是等待安装即可,安装完之后我们切到我们需要构建项目的文件中,输入

create-react-app react_staging

其中,react_staging 这个是工程的名字,这个自己随意取。
然后,等待安装安装好之后,切到工程的目录中

cd react_staging
npm start

启动项目!当你看到下面的图片就说明你的第一个脚手架已经安装好了。
在这里插入图片描述

补充

1、如何安装yarn

控制行输入 npm install -g yarn 如果说你用的是win11 的Power Shell这个终端编辑器的话那么你在安装的yarn的时候可能会遇到的问题

那么你需要对Power Shell进行更改一下设置
1、通过管理员的身份运行Power Shell 然后输入set-ExecutionPolicy RemoteSigned ,接着你要输入 A 全部默认是
2、设置完之后你要执行 yarn config get registry
3、验证一下是否加载好了 输入get-ExecutionPolicy 控制航显示执行策略是RemoteSigned 那么就说明已经成功了。

2、create-react-app xxxx的时候特别的慢

这个问题主要是因为你可能没有切换下载源的地址,你可能是下载国外的文件因此会非常的慢,所以这个时候我们可以将npm的源切换回国内淘宝镜像就非常的快!具体的操作如下:
1、更换源,输入

npm config set registry https://registry.npm.taobao.org

2、验证是否更换成功,输入

npm config get registry

如果说你看到控制台输出的是https://registry.npm.taobao.org 那么就说明你已经将源切回到国内了,那么接下来下载react的脚手架速度就直接起飞了~

最后

好了,到这里安装第一个脚手架就算完成了。
说在最后:接下来的一段时间就是主要学习react博客更新也会更多的是react开发中碰到的一些问题的整理,毕竟公司项目用的是react。加油我们一起冲~~


http://chatgpt.dhexx.cn/article/nEv5cTSU.shtml

相关文章

搭建react脚手架初识react

一、环境准备&项目搭建 (1)安装最新node.js 中文官网:https://nodejs.org/zh-cn/ 下载msi,直接安装即可(安装过程中记得勾选 Add to path) 查看node版本 node -v 查看npm(nodejs下的包管…

十二、React脚手架

1. 使用create-react-app创建react应用 1.1. react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置(语法检查、jsx编译、devServer…) 下载好了所有相关的依赖 可以直接运行一个简单效果 react提供了一个用于创建…

React-脚手架

系列文章目录 react,react-基本使用,react-脚手架, jsx的使用,条件渲染 文章目录 系列文章目录一、React是什么?二、React-特点三.React-基本使用四. React-脚手架使用react脚手架初始化项目初次安装报错:…

【React 框架】React 应用:基于 React 脚手架

学习视频:尚硅谷React教程(2022加更,B站超火react教程)_哔哩哔哩_bilibili 一、创建 react 应用 1、react 脚手架概述 (1)xxx 脚手架:用来帮助程序员快速创建一个基于 xxx 库的模板项目。 ① …

react脚手架

1.脚手架简介 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置(语法检查、jsx编译、devServer…)下载好了所有相关的依赖可以直接运行一个简单效果react提供了一个用于创建react项目的脚手架库: create-react-app项目的…

React(二)react脚手架的搭建

目录 一、搭建本地开发环境 二、创建 React 脚手架项目 三、VS Code 启动脚手架项目 React脚手架我们所用的其中一个是Create React App,Create React App 是一个用于学习 React 的舒适环境,也是用 React 创建新的单页应用的最佳方式。它会配置你的开…

React--》超详细教程——React脚手架的搭建与使用

目录 React脚手架的创建 全局安装创建 npx安装创建(官方推荐) 指定React版本安装 脚手架文件介绍 React脚手架是开发现代Web应用的必备,其充分利用Webpack、Babel、ESlint等工具辅助项目的开发,当然这些工具也无需手动配置即可使用,脚手…

金额计算!

一、简介 金额计算是一个计算机开发中经常会用到的一个小方法,在我不懂之前,我一度以为需要自己写很多的代码,自己去编写各种数据的相加、相乘,复杂的不得了,可等我接触后才知道,原来这么简单,今…

Excel房贷计算表(商贷)1/2

Excel房贷计算表(商贷) 1. 计算月供。2. 计算房屋总价和最低首付。3. 计算实际首付。3.1 等额本息和等额本金的特点3.2 等额本息和等额本金月供计算3.3 计算实际首付 4.计算公共费用4.1契税4.2 物业维修基金4.3 其他费用4.4 公共费用计算 5.预算6.总表 1…

数据表格中金额计算

在layui中,有一个数据表格的功能,对于此,我们可以自定义表头,也可以自定义分页。以下是一张数据表格设置图以及效果图,这个分页有需要就可开启。 在上图中,我有需求,我需要获取数据表格中的所有…

#八、古老的查表计算器--图表

图表,一般称作江恩图表。这是由于江恩在股市的使用,使其受到关注。实际其产生年代应在古希腊或古罗马时期(笔者根据数学史的逻辑推理,无考古证据),只是这些图表是当年最高的数学水平的产物之一,…

统计计算

这本书讲不完 统计计算和统计仿真。 85道题做一下。 最后的考试可能都来源于这些习题里面。 在学习通里面点名,算平时成绩。 这个课程是面向计算机的 计算机表示数肯定是有误差的。 第一次课看到15分钟 10月25日,一分钟时间签到作为平时成绩&#xff…

表格金额的计算

因为数据库中的金额字段不适合表格中显示出来的金额值 ,所以表格中的金额是需要计算的 ,通过单价价格和数量计算出中的金额 ,下面是表格的图片 因为是在测试所以其中的数据有点儿不太认真 ,下面的是表格生成的js代码 ,具体实现的可…

Power BI 学习四:计算列、计算表、度量值

计算表 借助计算表,可以将新表添加到模型中。 但是,你会创建定义表值的数据分析表达式 (DAX) 公式,而非从数据源中查询值,并将值加载到新表的列中。 在 Power BI Desktop 中,计算表是通过使用报表视图或数据视图中的“…

如何计算算计?

再复杂的问题都不在“复”,而在“杂” ​ 计算以知为主,算计则是用良知(德)或恶知(坏)。 机器智能是外在驱动的非实时离线计算学习,人类智能是内在驱动的实时在线算计学习。 “算计”是从0到1&a…

3.1 PowerBI系列之DAX函数专题-计算列和度量值及计算表的多种生成方式

1.度量值(a)和计算列(b)的区别: (1)(a)不被存储,(b)存储在内存中 (2)(a)在使用时才计算&#xff0…

如何计算哈希表查找失败时的平均查找长度

题目描述: 1.请回答采用线性探测再散列和链地址法处理冲突构建的哈希表中,查找失败时的平均查找长度如何计算? 例:已知一组关键字(19,14,23,1,68,20,84,27,55,11,10,79) 哈希函数为: H(key)key MOD 13,哈希表长为m15,设每个记录的查找概率相等&#xff…

tableau-行计算、视图计算、表计算

Tableau的表计算分为几类,重点是前面三类。 索引排序函数:index()、size()、first()、last() ——这四个不需要参数; rank()及延伸函数,如rank_dense(),rank_modified()等;移动计算函数:running_x ,比如 r…

从零开始Tableau | 10.表计算-基础

表计算是tableau中的一个重要知识点,也是应用的难点之一,但用好表计算,能较好解决日常分析中的许多计算问题。本节记录要点: 基础概念快速表计算创建表计算 基础概念 1.表计算是针对多行数据进行计算的方式,创建表计算…