React脚手架的搭建与使用

ops/2024/9/25 13:10:42/

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.ppmy.cn/ops/5155.html

相关文章

ARM_day8:基于iic总线的通信

一、IIC总线的基本概念&#xff1a; iic总线是一种带应答的同步的、串行、半双工的通信方式&#xff0c;支持一个主机对应多个从机。它有一根SCL&#xff08;时钟线&#xff09;和一根SDA&#xff08;数据线&#xff09;组成&#xff0c;由于只有一根数据线&#xff0c;所以它是…

【C++】vector的模拟实现

在这篇博客中&#xff0c;作者将会带领是简单的实现STL库中的vector。 一.vector的基本结构 vector是一个顺序存储的容器&#xff0c;也可以说是一个数组&#xff0c;那么对于它的结构&#xff0c;我们可以用三个迭代器来组成&#xff0c;如下图&#xff1a; 在vector当中&…

轻松上手MYSQL:MYSQL初识(下)

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《MYSQL入门》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 &#x1f680; 转载自热榜文章&#x1f525;&#xff1a;轻松上手MYSQL&#xff1a;MYSQL初识&a…

设计模式在芯片验证中的应用——策略

1. 策略模式 策略模式是一种行为设计模式&#xff0c; 它能让你定义一系列算法&#xff0c; 并将每种算法分别放入独立的类中&#xff0c; 以使算法的对象能够相互替换。 在RTL设计中可能包含了复杂的多个访问仲裁逻辑&#xff0c;使用了多种算法来确定访问内存优先级顺序&am…

Python爬虫:urllib库的基本使用

文章目录 一、urllib简介二、请求的发送和响应&#xff08;一&#xff09;发送请求&#xff08;二&#xff09;获取相应内容&#xff08;三&#xff09;下载所需文件 三、URL请求对象的定制四、常见请求方式&#xff08;一&#xff09;get请求方式&#xff08;二&#xff09;po…

打开电脑底部导航栏的任务

from pywinauto import Application app Application("uia").connect(path"explorer") app["任务栏"].print_control_identifiers() task app["任务栏"].child_window(title"酷狗音乐", auto_id"D:\soft\kugou\KGMus…

immutable variables, constants的区别(rust)

let immutable_variable 1590865; //不可变变量 const constant_variable 0096; //常量常量、不可变变量一样&#xff0c;都无法更改变量的值&#xff0c;但是常量和不可变变量之间存在以下区别&#xff1a; 不可变变量默认不可变&#xff0c;编译器会进行检查。常量不仅在默…

面向对象——类与对象

文章目录 类与对象构造函数、析构函数get/set方法函数&#xff1a;类内声明、类外定义static 类与对象 #include<iostream> #include<string> using namespace std; /* 类与对象 */ class Person{public:string name;// 固有属性&#xff0c;成员变量 int age;pu…