React+TS 从零开始教程(1)

源码链接:https://pan.quark.cn/s/c6fbc31dcb02

创建项目

直接通过以下命令,我们来创建一个react+ts的项目。

npx create-react-app myapp --template typescript

image.png

这样就创建好了,然后我们导入vscode. npxnpm里面的一个库,可以让你自动使用项目里面的包,而不用手动去安装。

image.png

node_modules自动已经下载好了. 还自动帮你提交了1次.

image.png

项目结构

src目录是参与打包的,也是我们真正写代码的地方。

image.png

public不参与打包,我们很少会去修改其中的内容。

image.png

我们在src中编写的任何文件,最终都会被打包成一个buddle.js,给index.html服务,public里面的图片,字体,资源也一样. package.json : 项目的入口文件 (包含项目依赖,运行脚本等) tsconfig.json: 配置TS (我们暂时不管) 运行项目:npm run start

image.png

这个图片是在App.tsx中引入的

image.png

我们看到,在react中,引入图片也像是引入组件一样,然后在需要的地方用{}括起来就行了;

安装prettier

先别问prettier是什么,跟着做就行了。

npm install --save-dev --save-exact prettier

在package.json中会多出这个配置

image.png

再新建一个配置文件

echo {}> .prettierrc.json

image.png

里面是一个空的{} 再来建一个.prettierignore,类似于.gitignore,是指我们不需要格式化的文件。 里面就写一个build,代表构建的目录不需要格式化。

image.png

lint-staged代表那些后缀名的文件需要被格式化,由于我们是ts的项目,所以扩展名加两个:ts,tsx

  "lint-staged": {"*.{js,css,md,ts,tsx}": "prettier --write"}

create-react-app自带eslint

"eslintConfig": {"extends": ["react-app","react-app/jest"]},

现在我们说下prettier是干嘛用的吧,他就是帮我们自动格式化的,统一格式化代码,这样就不需要我们一个个文件去格式化了。

image.png

我们故意把格式搞乱,然后去提交。

image.png

在控制台输入

npx prettier --write .

手动格式化成功。

image.png

json-server

这个是方便我们mock数据的。

 npm i json-server -g

注意,如果你的node版本很低,14左右的样子,用下面这个(MD搞死了~)

npm install -g json-server@0.17.3

创建一个db.json

1718891108899.png

{"users": []
}

然后启动

json-server db.json --watch

image.png

监听在3000端口,打开postman,访问一下。

image.png

这个代表查询users的列表数据,返回空,符合预期。 然后把方法改成post,添加一个数据。

image.png

post代表提交数据,返回了一个新的user,并且,我们的db.json也改了。

image.png

users代表资源,如果现在要改变id为1的数据,将age加1岁,就这样

image.png

image.png

以上的json-server是全局安装的,现在要继承到项目里面。

npm i --save json-server@0.17.3

然后,在项目里面加一个文件夹 json_server_mock 并且将刚才的db.json移动进去,这个目录用__开头,代表跟项目本身没啥关系,只是辅助。

image.png

最后,来到package.json,添加一个脚本

"json-server": "json-server __json_server_mock__/db.json --watch"

以后,我们就可以直接通过npm run json-server来启动json-server了。

image.png

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

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

相关文章

ARM-V9 RME(Realm Management Extension)系统架构之系统启动

本节描述了初始化RME系统的要求。 目录 一、复位需求 二、RME禁用 一、复位需求 RME系统重置(即复位)是指重置整个系统的全局功能状态的任何系统事件。 RME系统重置包括处理单元(PEs)、处理单元集群(PE-clusters)、系统核心逻辑和辅助逻辑、所有系统…

构造函数、实例、原型对象三者之间的关系

在 JavaScript 中,构造函数、实例和原型对象之间有着密切的关系。下面是对它们之间关系的详细解析和代码示例: 构造函数:构造函数是一个特殊的函数,用于创建对象的模板。它定义了对象的属性和方法。构造函数通常以大写字母开头&a…

2-11 基于matlab的BP-Adaboost的强分类器分类预测

基于matlab的BP-Adaboost的强分类器分类预测,Adaboost是一种迭代分类算法,其在同一训练集采用不同方法训练不同分类器(弱分类器),并根据弱分类器的误差分配不同权重,然后将这些弱分类器组合成一个更强的最终…

云专线组网方案的特性和实施要素

云专线组网方案是指企业通过专用的网络连接,将其内部网络与云服务商的数据中心直接相连,从而实现高速、安全、稳定的云资源访问。云专线通常提供比公共互联网更优的网络性能,包括更低的延迟、更高的带宽和更强的安全性。以下是云专线组网方案…

物联网设备安装相关知识整理

拓扑图 对于ADAM-4150先接设备的整体的供电。 ADAM-4150就涉及到几个电子元器件的连接,一个是485-232的转换器,一个是将RS-232转换为USB的转接口,因为现在的计算机很多都去掉了RS-232接口而使用USB接口。 4150右侧有个拨码,分别两…

UniApp 开发微信小程序教程(一):准备工作和环境搭建,项目结构和配置

文章目录 一、准备工作和环境搭建1. 安装 HBuilderX步骤: 2. 注册微信开发者账号步骤: 3. 创建 UniApp 项目步骤: 二、项目结构和配置1. UniApp 项目结构2. 配置微信小程序修改 manifest.json修改 pages.json 3. 添加首页文件index.vue 示例&…

排序之快速排序

快速排序之所以叫快速排序,肯定要配得上它的名字。我们就来看看它是如何这么快的。 快速排序的原理 快速排序是霍尔创建的,是通过以第一个或者最后一个数值作为比较值key,形成一个它的左边比它都小,右边比它都大的情况&#xff0…

redHat9 安装 iptables 过程记录

1. redHat9安装 iptables: 方法1:对于使用 yum 的旧版 Red Hat 9: yum install iptables-services 方法2:对于使用 dnf 的新版 Red Hat 9 或 CentOS: dnf install iptables ps: 可能会报错,诸如 connect f…

家用电器信息管理系统

摘 要 随着互联网的快速发展,传统家电行业受到冲击,逐渐向智能家居市场转型。因此,智能家居无疑是一个有着巨大市场需求和新兴发展空间的新兴产业,也是人们追求安全、便捷、舒适的生活方式的必然趋势。互联网推动了我国传统家居产…

从复用性角度阐述中台建设

目录 复用性中台定义深思中台建设产品线形态何时演变中台能力落地中台 业务中台架构总结 技术学习永不止步,最近也是看了很多关于架构设计相关的专栏,慢慢总结出来一部分知识,代入自己的思考与理解,以及结合并反思自己之前公司的架…

transformers Tokenizer

☆ 问题描述 Tokenizer的学习笔记(Tokenizer is all you need) Tokenizer用于数据预处理 - 分词 - 构建词典 - 数据转换 - 数据填充与截断 现在Tokenizer可以做到上面的所有事情。 ★ 解决方案 Tokenizer的基本使用 # 导入Tokenizer from transforme…

java经典面试题--进程和线程的关系/区别

进程和线程的定义以及作用 进程:进程是操作系统分配资源的基本单位,是程序的一次执行过程,它包括了程序执行的上下文环境,包括程序代码、数据、系统资源(内存、文件、设备等)以及执行状态等信息,其作用是提供一个独立的执行环境,…

【18.0】JavaScript---事件案例

【18.0】JavaScript—事件案例 【一】开关灯事件 【介绍】设置一个按钮,按下按钮触发事件,来回切换圆形图片的颜色 【分析】 图片设置:设置成圆形的图片背景颜色:设置红绿两个颜色,来回切换按钮设置:点击…

鸿蒙开发通信与连接:【@ohos.nfc.tag (标准NFC-Tag)】

标准NFC-Tag 本模块主要用于操作及管理NFC Tag。 说明: 本模块首批接口从API version 8开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。 导入模块 import tag from ohos.nfc.tag;tag.getNfcATag getNfcATag(tagInfo: TagInfo): Nf…

Codeforces Global Round 26 E. Shuffle(树形dp)

题目 思路来源 乱搞ac 题解 注意到提出一个点之后, 后面第二次提出的点、第三次提出的点, 如果后续成为叶子,一定不相邻,所以等价于求原树的最大独立集 但是第一次提出的叶子可以和第二次提出的叶子相邻 这个看最后一个样例…

Java按照GBK拼音顺序对汉字排序

最近遇到一个需求,需要对一个列表数据的特定字段,比如姓名,初看应该不难,但是有什么比较快速便捷的方法,因为是Java的项目,所以想到比较火的工具框架Hutool,在Hutool官网 找到一个比较器类Pinyi…

python离线安装第三方库、及其依赖库(单个安装,非批量移植)

文章目录 1.外网下载第三方库、依赖库2.内网安装第三方库3.补充附录内网中离线安装python第三方库,这时候只能去外网手动下载第三方库,再传回内网进行安装。 问题是python第三方库往往有其前置依赖包,你很难清楚某个第三方库依赖的是哪些依赖包,更难受的是依赖包可能还有其…

CyclicBarrier改善CountDownLatch循环重入

CyclicBarrier 跟CountDOwnLatch非常类似,也是计时结束执行。 区别就是可以重用,也就是基数可以回到初始值。用完了不需要重新创建对象。 谁调用await就阻塞谁,这个能阻塞多个,countdownlatch只能阻塞一个。 变为0之后 再次调用…

如何集成 Spring Security 和 JWT,

关键问题: 如何集成 Spring Security 和 JWT,并实现用户认证和授权? SpringSecurity核心是一组过滤器链,JWT是生成token的机制 代码操作: 关于jwt: 1.yml配置中加入jwt配置信息 2.JWT token的JwtUtils.java--生成…

五十一、openlayers官网示例Layer Min/Max Resolution解析——设置图层最大分辨率,超过最大值换另一个图层显示

使用minResolution、maxResolution分辨率来设置图层显示最大分辨率。 <template><div class"box"><h1>Layer Min/Max Resolution</h1><div id"map" class"map"></div></div> </template><…