❤️ React的安装和使用(实战篇)

React的安装和使用

一、React的安装和使用

reactJs警告提示:
This version of tar is no longer supported, and will not receive security updates. Please upgrade asap

翻译:tar@2.2.2:此版本的tar不再受支持,将不会收到安全更新。请尽快升级。

简而言之:tar@2.2.2过期
运行:npm install -g tar
tar的版本更新到最新

检查React版本是否安装:

create-react-app -V

在这里插入图片描述

显示我的版本已经安装成功,猜测可能是安装成功再次安装给的提示!

二、创建项目并运行

1、 创建 react 项目2、进入到项目里 
cd my-app3、安装 less 及 loader
yarn add -D less less-loader4、将 webpack 配置暴露出来
yarn eject5、打开 /config/webpack.config.js
全局搜索 style files regexes 找到如下代码位置// style files regexes
const cssRegex = /\.css$/
const cssModuleRegex = /\.module\.css$/
const sassRegex = /\.(scss|sass)$/
const sassModuleRegex = /\.module\.(scss|sass)$/6、在这个代码的下边添加两行 less 的配置
// style files regexes
const cssRegex = /\.css$/
const cssModuleRegex = /\.module\.css$/
const sassRegex = /\.(scss|sass)$/
const sassModuleRegex = /\.module\.(scss|sass)$/const lessRegex = /\.less$/ // 新添加的
const lessModuleRegex = /\.module\.less$/ // 新添加的7、全局搜索 test: sassModuleRegex,找到如下代码位置:// Adds support for CSS Modules, but using SASS// using the extension .module.scss or .module.sass{test: sassModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {mode: 'local',getLocalIdent: getCSSModuleLocalIdent,},},'sass-loader'),},// "file" loader makes sure those assets get served by WebpackDevServer.// When you `import` an asset, you get its (virtual) filename.// In production, they would get copied to the `build` folder.// This loader doesn't use a "test" so it will catch all modules// that fall through the other loaders.{// Exclude `js` files to keep "css" loader working as it injects// its runtime that would otherwise be processed through "file" loader.// Also exclude `html` and `json` extensions so they get processed// by webpacks internal loaders.exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],type: 'asset/resource',},9、添加 less 的 loader 就完成了// Adds support for CSS Modules, but using SASS// using the extension .module.scss or .module.sass{test: sassModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {mode: 'local',getLocalIdent: getCSSModuleLocalIdent,},},'sass-loader'),},// ------------- 从这里往下都是添加的行{test: lessRegex,exclude: lessModuleRegex,use: getStyleLoaders({importLoaders: 2,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,},'less-loader'),// Don't consider CSS imports dead code even if the// containing package claims to have no side effects.// Remove this when webpack adds a warning or an error for this.// See https://github.com/webpack/webpack/issues/6571sideEffects: true,},{test: lessModuleRegex,use: getStyleLoaders({importLoaders: 2,sourceMap: isEnvProduction && shouldUseSourceMap,modules: {getLocalIdent: getCSSModuleLocalIdent,},},'less-loader'),},// ------------- 从这里往上都是添加的行// "file" loader makes sure those assets get served by WebpackDevServer.// When you `import` an asset, you get its (virtual) filename.// In production, they would get copied to the `build` folder.// This loader doesn't use a "test" so it will catch all modules// that fall through the other loaders.{// Exclude `js` files to keep "css" loader working as it injects// its runtime that would otherwise be processed through "file" loader.// Also exclude `html` and `json` extensions so they get processed// by webpacks internal loaders.exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],type: 'asset/resource',},10、配置结束
直接在项目里引入一个 less 文件,就可以正常的使用了

三、写出一个hello,word组件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/182066.html

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

相关文章

新大陆NVH200-AP(U)扫码枪在上位机软件开发中的应用

前言: 由于本次使用的是USB接口的扫码枪 1、先安装Nset软件,使用扫码枪扫描“启动设置条码”,然后扫描“USB CDC串口”条码 2、打开NSet软件,点击“刷新按钮” 就能找到扫码枪设备 3、设置条码后缀 点击“高级设置”,然后点击“数据编辑”,在“后缀”那里设置结束符…

1-3 docker 安装 prometheus

一、环境 1、环境准备 安装Docker 镜像加速 安装 docker 检查版本 安装Docker-compose 二、Docker-compose 安装 Prometheus 1、【方式一】手动创建 docker-compose 和 配置文件 创建prometheus监控的文件夹 创建alertmanager的配置文件 - config.yml 新建grafana的…

windows mysql安装

1、首先去官网下载mysql安装包,官网地址:MySQL :: Download MySQL Community Server 2:把安装包放到你安装mysql的地方,然后进行解压缩,注意,解压后的mysql没有配置文件,我们需要创建配置文件 配…

红黑树——原理刨析

众所周知,红黑树是从AVLTree树中衍变而来的,所以在学红黑树之前还是要好好的理解一下AVLTree树的原理,为理解红黑树减轻理解负担,好了进入正题。 红黑树原理: 由名可知,红黑树——肯定是与颜色有关的一个树…

操作系统——文件在外存中的分配方式(王道视频p61 P62)

1.总体概述: 连续分配 —— 链接分配 —— 索引分配 (1)对于顺序分配,这种方式 基本不会使用了, 因为 它存在一个 核心的问题就是 没法更新;不过,还是要注意它的 “文件目录”——其中存放了…

强化学习中策略的迭代

一、策略迭代 一旦使用vπ改善了策略π,产生了更好的策略π0,我们就可以计算vπ0并再次对其进行改进,产生更好的π00。因此,我们可以获得一系列单调改善的策略和值函数: 其中E−→表示策略评估,I−→表示策…

企业通配符SSL证书的特点

企业通配符SSL证书是一种数字证书,其可以用于保护多个企业网站,对网站传输信息进行加密服务。这种证书通常适用于拥有多个子域名或二级域名的企事业单位。今天就随SSL盾小编了解企业通配符SSL证书的相关信息。 1. 保护所有域名和子域名:企业通…

linux 启动引导找不到内核修复

问题现象 选中内核按e 看到引导内核信息 挂载ISO映像进入救援模式,查看boot目录 与 引导文件内容不一致 再次重启引导系统,按e 修改内核引导项与boot目录一致, crtl - x 继续执行 登录系统 mount /dev/sdm1 /mnt 挂载vfat 引导目录 纠…

CorelDRAW2024好不好用?怎么下载

cdr是CorelDRAW的简称,一款专注排版和矢量图形编辑的平面设计软件。这款软件的设计界面精微细致、简洁易懂。功能尤其强大,图标设计,印刷排版,服装设计等都可以胜任。还有多种模板使得设计相当的轻松,今天简单介绍一下…

C语言查看各数据类型所占大小

编译器&#xff1a;VC2010 #include<stdio.h> int main() {printf("%d\n",sizeof(char));printf("%d\n",sizeof(short));printf("%d\n",sizeof(int));printf("%d\n",sizeof(long));printf("%d\n",sizeof(long long))…

【Python语言】集合的使用方法总结

目录 1、集合基本知识&#xff1a; 2、定义 2.1 定义集合变量 2.2 定义空集合 3、集合的常用操作 3.1 定义集合 3.2 添加新元素 3.3 移除元素 3.4 从集合中随机取出元素 3.5 清空集合 3.6 取两个集合的差集 3.7 消除两个集合的差集 3.8 两个集合合并 3.9 统计集合…

软件外包开发质量控制方法

在软件外包开发项目中&#xff0c;质量控制是确保交付的软件符合预期质量标准的关键步骤。以下是一些常用的软件外包开发质量控制方法&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 需求明确&#x…

【第28例】IPD体系进阶 | 需求管理:需求实现过程

目录 简介 内容详解 CSDN学院相关推荐 作者简介 简介 继续 IPD 体系中的需求管理相关的专题。 先来看看整个需求管理涉及的过程内容: 需求管理流程主要包含五个阶段: 需求收集; 需求分析; 需求分发/分配;

构建数字孪生的四大挑战

如果不能解决由数字孪生带来的开发难题&#xff0c;那么企业就无法享受这种技术便利。 数字孪生已经成为企业当前面对的一大机遇&#xff0c;其核心在于利用虚拟副本中的分析数据对未来业务事件开展预测。这不仅能够大大降低决策难度&#xff0c;同时也有助于提升决策效果。 然…

“利用义乌购API揭秘跨境贸易商机:一键获取海量优质商品列表!“

义乌购API可以根据关键词取商品列表。通过调用义乌购API的item_search接口&#xff0c;传入关键词参数&#xff0c;可以获取到符合该关键词的商品列表。 以下是使用义乌购API根据关键词取商品列表的步骤&#xff1a; 注册义乌购开发者账号并获取授权码和密钥。在代码中导入义…

redis教程 二 redis客户端Jedis使用

文章目录 Redis的Java客户端-JedisJedis快速入门创建工程&#xff1a;引入依赖&#xff1a;建立连接测试&#xff1a;释放资源Jedis连接池创建Jedis的连接池改造原始代码 Redis的Java客户端-SpringDataRedis快速入门导入pom坐标配置文件测试代码 数据序列化器StringRedisTempla…

【CIO人物展】黄淮学院副CIO周鹏:构建数智化平台赋能学校高质量发展

周鹏 本文由黄淮学院副CIO周鹏投递并参与《2023中国数智化转型升级优秀CIO》榜单/奖项评选。丨推荐企业—锐捷网络 大数据产业创新服务媒体 ——聚焦数据 改变商业 黄淮学院是2004年经教育部批准成立的一所省属全日制普通本科高校。学校位于素有“豫州之腹地、天下之最中”之美…

【Python】批量下载素材酷视频资源

【需求】 做视频精彩需要用到梗图视频等,但是素材酷上面的视频没有搜索功能,每次用起来还要去下载也很麻烦,下载只能一个一个下载也很麻烦,下要搞一个能够批量下载的功能,然后把下载的资源全部放进万兴喵影编辑器的云空间,这样就可以做到随做随查随用了。 【效果】 目…

springboot 连接西门子plc,读取对应的值,并修改到数据库

springboot 连接西门子plc&#xff0c;读取对应的值&#xff0c;并修改到数据库 需求&#xff1a;服务器连接plc&#xff0c;读取数据&#xff0c;之后写入到数据库&#xff0c;但是要求速度很快&#xff0c;而且plc中命令对应的值是不断变化的&#xff0c;这个变化&#xff0c…

深度学习框架TensorFlow.NET环境搭建1(C#)

测试环境 visual studio 2017 window10 64位 测试步骤如下&#xff1a; 1 新建.net framework控制台项目&#xff0c;工程名称为TensorFlowNetDemo&#xff0c;.net framework的版本选4.7.2&#xff0c;如下图&#xff1a; 2 分别安装TensorFlow.NET包(先装)和SciSharp.…