React脚手架的搭建与使用

news/2024/5/17 14:47:47

React脚手架是开发现代Web应用的必备,其充分利用Webpack、Babel、ESlint等工具辅助项目的开发,当然这些工具也无需手动配置即可使用,脚手架的意义更多的是关注的是业务而不是工具的配置;项目的整体技术架构为:react + webpack + es6 + eslint。使用脚手架开发项目的特点:模块化、组件化、工程化。

1、React脚手架的创建

创建React脚手架有很多,React官方推荐我们使用Create React App,当然还有以下常见脚手架

Next.js:如果你是在用 Node.js 构建服务端渲染的网站

Gatsby:如果你是在构建面向内容的静态网站

nwb:用于React应用程序、库和其他web npm模块的工具包

razzle:创建没有配置的服务器呈现的通用JavaScript应用程序

Neutrino:创建和构建零初始配置的现代JavaScript应用程序

Umijs:蚂蚁金服脚手架

Icejs:阿里巴巴脚手架

有些大厂会使用他们自身的脚手架,搭建他们公司的项目会更快,在这祝愿大家早日入驻大厂学习更多的React脚手架的知识吧,这里我就以官方推荐的脚手架讲解

2、npx安装创建(官方推荐)

npx:是一种在npm中安装工具,在 npm version >= 5.2.0 开始,自动安装了npx。目的是提升包内提供的命令行工具的使用体验。

npx create-react-app 是固定命令,create-react-app是React脚手架的名称。npx 命令会帮助我们临时安装create-react-app包,然后初始化项目完成之后会自自动删掉

新建终端执行如下命令进行安装:

npx create-react-app 项目名称

如果安装过程失败

npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/@types%2fnode (over 30000ms)

通过命令查询镜像源:

npm get registry

chuige@jiadeMBP article-pc-master % npm get registry

https://registry.npmjs.org/

配置新的镜像

npm config set registry https://registry.npmmirror.com

将创建好的react项目文件拖到vs中新建终端执行 npm start 即可。

总结:

1)安装react脚手架我个人还是推荐使用官方的npx进行安装,即按即用。

2)React的创建者Facebook也创建了一个类似于npm的包管理器 yarn ,yarn具有快速、可靠和安全的特点,我这里完全是用npm了,喜欢yarn的也可以去使用,直接cmd打开终端运行 npm install yarn -g 进行全局安装,以后使用yarn直接用yarn替换npm运行命令即可。

3、脚手架文件介绍

public文件夹下有如下文件,用于存放静态资源类似图片、logo之类的东西。

在public中最重要的文件就是index.html,其相关文件说明如下(原本无关紧要的注释已经删掉了):

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><!-- %PUBLIC_URL%代表public文件夹的路径 --><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><!-- 开启理想端口,用于做移动端页面的适配 --><meta name="viewport" content="width=device-width, initial-scale=1" /><!-- 用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器,兼容性较差,可能有的手机并没有效果) --><meta name="theme-color" content="#000000" /><metaname="description"content="Web site created using create-react-app"/><!-- 用于指定网页添加到手机主屏幕后的图标 --><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /><!-- 应用加壳时的配置文件 --><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><title>React App</title></head><body><!-- 若浏览器不支持js,则展示标签中的内容 --><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body>
</html>


http://www.mrgr.cn/p/15766513

相关文章

JS 中 reduce()方法及使用详解

reduce()方法可以搞定的东西特别多,就是循环遍历能做的,reduce都可以做,比如数组求和、数组求积、统计数组中元素出现的次数、数组去重等等。 reduce() 方法对数组中的每个元素执行一个由您提供的reduce函数(依次执行),将其结果汇总为单个返回值。 1、语法介绍// arr.reduc…

探索Java世界中的七大排序算法(上)

文章目录 排序的概念直接插入排序希尔排序( 缩小增量排序)选择排序堆排序冒泡排序 在计算机科学中&#xff0c;排序算法是一类重要的算法&#xff0c;它们用于将一组元素按照一定的顺序进行排列。在Java编程中&#xff0c;我们经常需要对数组或集合进行排序操作。本文将介绍Jav…

高并发(AQS)

AQS 抽象的队列同步器框架,主要通过程序来构建锁和同步器AQS 抽象的队列同步器框架,主要通过程序来构建锁和同步器 AQS 的全称为 AbstractQueuedSynchronizer ,翻译过来的意思就是抽象队列同步器,它和Java的Synchronized作用和一样,用来同步加锁; 特性对比ReentrantLock …

JAVA基础-流程控制、字符串

一、java基础 1、java主类结构 package com.study.again001; 包名public class helloword { 类名 static String s1 = "1"; 静态成员变量 public static void main(String[] args) { main方法 String s2 = "2"; 局部变量 …

C到二进制概述

此帖是记录视频内容,防止后续自己遗忘 一、预处理 1、库文件 预处理等于一个文本粘贴过程,编译后把库文件展开,展开本质也为粘贴内容include 本质是在其中特定路径搜索(usr/include...),而#include "xxx"是在当前路径下进行搜索 。其中#include" "高于…

Qt6连接MySQL

Qt6连接MySQL Qt6编译MySQL的过程太变态了&#xff0c;MinGW和MSVC都很费劲。 主要参考qt6.5.0MySQL驱动手动编译以及数据库连接详细教程以及注意事项附资源链接&#xff0c;这篇文章堪称保姆级教程&#xff0c;写的十分详细。 笔者这里踩了个坑&#xff0c;在按照上文中的过…

AliyunCTF 2024 - BadApple

文章目录 前言环境搭建漏洞分析漏洞利用参考 前言 本文首发于看雪论坛 https://bbs.kanxue.com/thread-281291.htm 依稀记得那晚被阿里CTF支配的恐惧&#xff0c;今年的阿里CTF笔者就做了一道签到PWN题&#xff0c;当时也是下定决心要学习 jsc pwn 然后复现这道 BadApple 题目…

UI——数据表和UI绑定

目的创建数据表 创建UI控件 玩家角色蓝图UI按键逻辑 UI与数据表绑定1.创建数据表2.创建UI控件3.玩家角色蓝图UI按键逻辑4.UI与数据表绑定本文来自博客园,作者:荒坂株式会社,博客内容均属学习笔记,只做交流之用

MBR20200FCT-ASEMI肖特基二极管MBR20200FCT

MBR20200FCT-ASEMI肖特基二极管MBR20200FCT编辑:ll MBR20200FCT-ASEMI肖特基二极管MBR20200FCT 型号:MBR20200FCT 品牌:ASEMI 封装:TO-220 最大平均正向电流(IF):20A 最大循环峰值反向电压(VRRM):200V 最大正向电压(VF):0.90V 工作温度:-65C~175C 反向恢复时间:…

ELK-Kibana 部署

目录 一、在 node1 节点上操作 1.1.安装 Kibana 1.2.设置 Kibana 的主配置文件 1.3.启动 Kibana 服务 1.4.验证 Kibana 1.5.将 Apache 服务器的日志&#xff08;访问的、错误的&#xff09;添加到 ES 并通过 Kibana 显示 1.6. 浏览器访问 二、部署FilebeatELK&…

App测试中,强制等待和隐式等待谁更强?

简介 添加等待是为了确保自动化脚本在执行过程中与应用程序之间的同步和稳定性。 应用程序的响应时间是不确定的,可能存在网络延迟、加载时间、动画效果等因素。如果在执行自动化脚本时没有适当的等待机制,脚本可能会在应用程序还未完成相应操作或加载完成之前继续执行下一步…

Spring AOP的实现方式与原理

目录 认识IOC与AOP AOP的实现方式 Aspect注解实现AOP 自定义注解实现AOP Spring AOP原理 代理模式 静态代理和动态代理 JDK动态代理 CGLIB动态代理 Spring AOP实现的哪种代理 认识IOC与AOP IOC又称为控制反转,也就是控制权发生了反转.在传统的程序中,我们是需要自己…

设计模式——迭代器模式15

迭代器模式提供一种方法访问一个容器对象中各个元素&#xff0c;而又不需暴露该对象的内部细节。 设计模式&#xff0c;一定要敲代码理解 抽象迭代器 /*** 迭代抽象* */ public interface Iterator<A> {A next();boolean hasNext(); }迭代器实现 /*** author ggbond*…

数据加密技术在数据安全中的作用

随着信息技术的飞速发展,数据已成为现代社会最宝贵的资产之一。然而,数据的快速增长也带来了安全风险,包括数据泄露、篡改和滥用等。数据加密技术作为保护数据安全的重要手段,其重要性日益凸显。PrimiHub一款由密码学专家团队打造的开源隐私计算平台,专注于分享数据安全、…

生态短讯 | Tapdata 与 TDengine 完成产品兼容性互认证,打造物联网实时数据生态

近日,深圳钛铂数据有限公司自主研发的钛铂实时数据平台与 TDengine完成相互兼容性测试,兼容性良好,系统功能正常,运行稳定。近月,深圳钛铂数据有限公司(以下简称钛铂数据)自主研发的实时数据平台(Tapdata Live Data Platform)与北京涛思数据科技有限公司(以下简称涛思…

YOLTV8 — 大尺度图像目标检测框架(欢迎star)

YOLTV8 — 大尺度图像目标检测框架【ABCnutter/YOLTV8: &#x1f680;】 针对大尺度图像&#xff08;如遥感影像、大尺度工业检测图像等&#xff09;&#xff0c;由于设备的限制&#xff0c;无法利用图像直接进行模型训练。将图像裁剪至小尺度进行训练&#xff0c;再将训练结果…

Qt 6.5.5 链接和QML与C++交互的若干问题

需求描述 Qt Quick开发桌面组件,使用讯飞API(提供头文件、静态库、动态库),希望部署到Windows平台,在Qt Creator开发。 QML与C++交互 主要参考:QML与CPP,https://blog.csdn.net/gongjianbo1992/article/details/87965925 另有参考:信号与槽,https://blog.csdn.net/ife…

VK3602K SOP8抗干扰2键/2路/2按键/2通道触摸感应芯片,应用于加湿器触摸IC等大小家电产品

产品品牌:永嘉微电/VINKA 产品型号:VK3602K 封装形式:SOP8 概述 VK3602K具有2个触摸按键,可用来检测外部触摸按键上人手的触摸动作。该芯片具有较高的集成度,仅需极少的外部组件便可实现触摸按键的检测。 提供了2路直接输出功能,可通过IO脚选择输出电平。芯片内部采用特殊…

【运维自动化-配置平台】如何创建业务及拓扑(集群-模块)

业务&#xff0c;是蓝鲸 CD 体系中比较重要的概念和维度&#xff0c;日常使用中主机、进程、业务拓扑的管理都需要依赖已经存在的业务&#xff0c;其他蓝鲸体系产品也基本上都是围绕业务的维度来提供对应的服务和相关的鉴权。1、创建业务/业务集 请确保有创建业务的权限&#…

BGE M3-Embedding 模型介绍

BGE M3-Embedding是BAAI开源的embedding模型,支持多语言,多粒度,多功能检索,本文介绍模型的相关信息BGE M3-Embedding来自BAAI和中国科学技术大学,是BAAI开源的模型。相关论文在https://arxiv.org/abs/2402.03216,论文提出了一种新的embedding模型,称为M3-Embedding,它…