React(二)react脚手架的搭建

article/2025/11/8 23:33:14

目录

一、搭建本地开发环境

二、创建 React 脚手架项目

三、VS Code 启动脚手架项目


        React脚手架我们所用的其中一个是Create React App,Create React App 是一个用于学习 React 的舒适环境,也是用 React 创建新的单页应用的最佳方式。它会配置你的开发环境,以便使你能够使用最新的 JavaScript 特性,提供良好的开发体验,并为生产环境优化你的应用程序。


一、搭建本地开发环境

        使用 React 脚手架搭建项目之前先要确定自己的电脑是否有支持的本地开发环境;据官网建议系统中Node和npm版本要求如下:

​所以我们在cmd下执行命令查看Node和npm版本是否符合要求:

npm默认的源地址在国外,如果网速不太好,可以将其配置到国内源;命令如下:

# 配置国内源
npm config set registry https://registry.npm.taobao.org# 配置源地址
npm config set registry http://www.npmjs.org# 查看当前环境源地址
npm config get registry

环境准备完成后就可以生成项目包了;


二、创建 React 脚手架项目

(1)在创建好的文件夹内打开命令提示行工具,输入命令 npx create-react-app 项目名 创建一个新的项目;

(2)等待一段时间过后会出现成功提示;

(3)按照提示先进入项目名称文件夹 cd reactpro ,然后输入启动命令 npm start ,可以看到,启用的是http://localhost:3000/

(4)启动之后会自动在浏览器展示该项目的首页。

三、VS Code 启动脚手架项目

        能够正常展示首页就说明我们项目包创建成功,接下来就可以在编程软件中打开了,推荐 Visual Studio Code。React脚手架项目结构如下:

启动脚手架项目: 

(1)点击 package.json 文件 --> 右键 --> 在集成终端打开;

(2)在终端控制台中输入 npm start --> 回车;

(3)显示以下提示,项目启动成功。 


补充 npm 命令:

npm uninstall 包名称  //卸载npm list | findStr 包名称  //查看包是否安装

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

相关文章

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.表计算是针对多行数据进行计算的方式,创建表计算…

tableau 如何选择tableau计算类型?基本计算 / LOD计算 / 表计算

一、计算在数据源和分析中的位置 基本计算和LOD表达式是数据源查询的计算,返回的是一个结果集。统称为custom calculation,生成的结果是custom filed 自定义字段,字段在哪里?字段在数据源层面。 ① 基本计算和LOD计算是在数据源层…

tableau:表计算

先创建一个‘利润2’的计算字段来copy一下‘利润’: 然后按照下图操作: 然后我们对‘利润2’添加表计算(比如说我们这里选择‘汇总’): 然后就变成了下面这样: 可以看到红色圈圈那里多了一个小三角形&a…

Tableau 表计算函数

关注微信公共号:小程在线 关注CSDN博客:程志伟的博客 使用表计算函数可自定义表计算。 表计算应用于整个表中值的计算, 通常依赖于表结构本身。 1.FIRST() 返回从当前行到分区中第一行的行数。 例如, 计算每季度销售额。在Date…

Tableau(9):计算字段、表计算、自定义表计算

文章目录 一、计算字段二、表计算三、自定义表计算参考资料 一、计算字段 步骤1:导入全球超市订单数据   步骤2:创建成本(销售额-利润)字段 步骤3:创建盈利标志(若利润大于0盈利,反之就是…

Tableau中的表计算

Tableau中的普通计算是把数据发送给数据源端进行计算,而表计算是在已经取得的查询结果基础上由Tableau做的进一步计算,即在结果表格里进行计算。Tableau中常见的表计算类型主要有:差异、百分比差异、合计百分比、排序、百分位、汇总及移动计算…

S3C2440的UART详解2440

转载出处:http://www.cnblogs.com/idle_man/archive/2010/12/19/1910548.html 1、UART原理简介 在介绍2440的UART控制器之前,我们首先来了解一下UART的原理。 UART:Universal Asynchronous Receiver/Transmitter(通用异步收发送器)&#xf…