React with TypeScript 系列(三) --实战篇

最新推荐文章于 2024-08-01 17:27:50 发布
最新推荐文章于 2024-08-01 17:27:50 发布
阅读量9.4k 收藏 3
点赞数 1
分类专栏： React TypeScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kinfey/article/details/50500350
版权
本文介绍如何使用React和TypeScript构建页面，包括<head/><catalogList/><foot/>组件的划分，并详细讲解了在Visual Studio Code中配置开发环境的过程，如设置tsx文件编译、生成task.json和tsconfig.json文件，以及创建静态页面的Head组件。
摘要由CSDN通过智能技术生成
编者语： 说了两篇理论，是时候实操一下了。找个实例说说。
       假设我们要用ReactJS实现一下列表
          由于React 是组件化的元素，所以这个时候你需要分解一下这个页面    
          如图所示 ，我会分解成
          头 head - 这是一个滚动的广告，是页面的头部
           

           尾foot - 这是一个底部，负责Tab

           
           最后就是我们所说的列表catalogList了
                    

           按照这个划分我们的页面是由<head/><catalogList/><foot/>按顺序构成，若果再细分CatalogList 你可以针对每个行在划分成CatalogItem组件。而CatalogItem里的再划分是没有必要了。
           我们开始搭建我们的平台
            1. 开发工具和环境搭建
            Visual Studio Code 是我的个人选择，当然你可以用Atom,也可以用SublimeText。如果要编译tsx文件你必须对VisualStudio Code 进行配置（这里有个前提是你需要把我的第一篇文章看了，因为你需要安装好react.d.tsd文件）, 我在asp.net 5 模版下构建例子，添加了一个简单的Index.tsx文件。
         

最低0.47元/天 解锁文章
kinfey
关注
专栏目录
typescript实战总结之实现一个互联网黑白墙
趣谈前端
08-10 1026
前言笔者上一篇文章TS核心知识点总结及项目实战案例分析主要写了typescript的用法和核心知识点总结, 这篇文章将通过一个实际的前端案例来教大家如何在项目中使用typescrip...
TypeScript开发实战
王大阳的博客
07-10 629
npm init -y cnpm i typescript -g TypeScript配置文件 tsc --init 编译文件 tsc ./src/index.ts webpack配置 cnpm i ts-loader typescript -D cnpm i html-webpack-plugin -D # 每次构建成功，清空dist目录 cnpm i clean-webpack-plugin -D # 两个配置文件合并 cnpm i webpack-merge -D 生成htm
在一个新的TypeScript + React项目中，如何配置TS配置文件（tsconfig.json）以支持ES6模块系统和路径别名？
极客前端探索者的博客
07-01 420
在React项目中，通过设置路径别名，我们可以简化import语句，提高代码的可读性和维护性。在TypeScript中启用它，可以让我们的代码组织得井井有条，易于理解和复用。今天，我们就来探讨如何在这份规划书中设定两项关键指令：启用ES6模块系统和设置路径别名，让你的React项目更加高效且易于维护。在这里，“module”设置为“esnext”，意味着我们启用了最新的ES模块系统。想象你正在构建一座精美的大厦，而TypeScript（TS）就是你的建筑设计蓝图，它确保你的建筑既美观又稳固。
TypeScript实战-01-TypeScript简介
BraveWangDev
09-05 832
JS的发展及广泛应用 JS存在的问题 TS的出现及优势 为什么要使用TS TS简单示例和编译
TypeScript 项目实战学习【开源学习】
qq_22841387的博客
02-20 2243
> 本项目地址 > > [Leo/ts学习 (gitee.com)](https://gitee.com/Leo_la/ts-crawler) ## 项目背景 今天我想尝试从项目中学习`ts`，目的主要是获取电影名称和评论。 > 其实开始我是想尝试获取网易云音乐的热评的，但是它的整体都是在一个iframe中的， 可是`superagent`貌似获取不到`iframe`，于是就暂时放弃了 ```ts https://movie.douban.com/top250 ``` ![在这里插入图片描述](h
TypeScript学习(实战react)
shadowfall的博客
05-18 209
TypeScript学习(实战react) 声明合并 interface A { x: number; foo (bar: number) number; // 4 } interface A { y: number; // 实现函数重载 // 重载顺序原则: 同接口中按顺序排列 后面的接口A 排在前面的接口A之前 foo (bar: string): string; // 2 foo (bar: number[]): number[]; // 3
（React+TypeScript实战篇）一.项目构建
er_ba的专栏
06-29 3748
一.项目创建（搭建带有typescript的） 1.安装命令 >npx create-react-app ts-with-react--typescript 2.npx是什么（优点，npm5.2版本以上有）？ 1）避免安装全局模块 2）调用项目安装的内部模块 3.启动项目 >cnpm start 二.体验组件 1.在项目src目录下创建components目录然后新建Hello.tsx 2.在src目录下的App.tsx下引入使用 3.效果展示 ..
React-hooks+TypeScript最佳实战
xiaofeng123aazz的博客
10-17 452
自定义 Hook 更像是一种约定，而不是一种功能。如果函数的名字以 use 开头，并且调用了其他的 Hook，则就称其为一个自定义 Hook有时候我们会想要在组件之间重用一些状态逻辑，之前要么用 render props ，要么用高阶组件，要么使用 redux自定义 Hook 可以让你在不增加组件的情况下达到同样的目的Hook 是一种复用状态逻辑的方式，它不复用 state 本身事实上 Hook 的每次调用都有一个完全独立的 state} , [ ]);
TypeScript从入门到项目实战（进阶篇）
林恒的博客
09-21 1155
内置对象的使用 JavaScript中有许多内置对象，可以直接在JavaScript程序中使用，同样的，TypeScript也延续了这些内置对象 全局的对象( global objects )或称标准内置对象，不要和"全局对象(global object)"混淆。这里说的全局的对象是说在全局作用域里的对象。 ECMAScript内置对象 ECMAScript标准提供的内置对象有：Ob...
TypeScript进阶实战
happy任的博客
05-12 552
typescript泛型 typescript泛型是较难理解的点，此文为记录泛型的各种应用场景 1、联合类型 & 类型保护 // 联合类型 & 类型保护 interface Bird { fly:boolean; sing: () => {} } interface Dog { fly: boolean; bark: () => {} } // 联合类型只会提示相同属性 function trainAnimal (animal: Bird | Dog)
梁宵《TypeScript开发实战》（基础篇）
yfm120750310的博客
04-27 975
梁宵《TypeScript开发实战》（基础篇）重塑“类型思维”类型基础强类型动态类型与静态类型 重塑“类型思维” 尽管es标准在几年内发展迅速，但是在类型检查方面依然是无所建树，这就会导致我们在定义函数的时候难以对函数的参数类型进行界定。众所周知js是一门动态弱类型语言，对变量的类型非常宽容，但是对于开发者而言，如果长期在没有约束的情况下开发，就会造成类型思维的缺失养成不良的编程习惯。 ts就是致力于为js提供静态类型检查，现今angular和vue团队开始全面使用ts重构代码，在es标准推出静态类型检查之
typescript实战指南 pdf,typescript入门与实战
神器榜
09-14 1641
《使用docker高效部署你的前端应用》《关于前端学习路线的一些建议》《各种场景唤起App的骚操作》《Web视频播放前前后后那些事》《你必须要注意的依赖安全漏洞》《从12.67s到1.06s的网站性能优化实战》《网易云音乐前端性能监控实践》《一个阿里前端工程师的成长之路》《非常全面的前端协作规范》《一名合格前端工程师的自检清单》《从0到1再到100：搭建、编写、构建一个前端项目》希望对你有用，望采纳~。TypeScript是JavaScript的超集，对变量类型（如整数、浮点、字符串）进行了明确的规定。
TypeScript + 大型项目实战
weixin_34138377的博客
07-22 2028
写在前面 TypeScript 已经出来很久了，很多大公司很多大项目也都在使用它进行开发。上个月，我这边也正式跟进一个对集团的大型运维类项目。 项目要做的事情大致分为以下几个大模块 一站式管理平台 规模化运维能力 预案平台 巡检平台 全链路压测等 每一个模块要做的事情也很多，由于牵扯到公司业务，具体要做的一些事情这里我就不一一列举了，反正项目整体规模还是很大的。 一、关于选型 在做了一些技术调...
2022年TypeScript 最细项目实践：四步走高效改造现有的 JavaScript 项目实战
m0_57042151的博客
08-05 405
接下来是我们在这个项目中组内约定的类型定义公约。约定这样的类型定义公约目的有两个：第一明确迁移进度，第二更好地做类型约束。我们约定了一些必须要遵守的公约：第一条，定义 type 尽量不使用 any。...
使用 TypeScript 提升 JavaScript 开发效率的实战指南
最新发布
boydoy1987的专栏
08-01 459
TypeScript 是由微软开发的开源编程语言，是 JavaScript 的一个超集。它添加了静态类型检查和其他现代语言特性。TypeScript 代码最终会被编译成 JavaScript 代码，从而在浏览器或 Node.js 环境中运行。主要特点静态类型检查：在编译时发现潜在的错误。类型系统：支持基本类型、接口、泛型等。面向对象编程：提供类和接口等现代编程特性。与 JavaScript 兼容：现有的 JavaScript 代码可以无缝地集成进 TypeScript 项目中。
TypeScript实战使用技巧分享
Joey_Tribiani的博客
03-27 1350
主要目的是分享我使用TS的方式或者习惯，以及怎么在项目中更好的使用它，而不是对TS这门语言的学习。并非说需要大家都去这样写，每个人有自己的编码风格。因为按照我的经历，我当时学习TS是没有太多理解上的问题的，更多的疑惑是怎么在项目中使用它，使用后到底带来哪些好处。这次技术分享仅仅从我个人的观点出发，分享一下我使用TS的习惯或者经验，希望多少能对大家有些帮助
在React中使用Typescript
z321616764的博客
09-17 459
使用命令创建项目 生成一个全新的 ts + react 的模版 可直接使用指令：npm create react-app my-app --template typescript，该模板包含了全套正常运行React所需要的的包和配置，无需再额外手动安装typescript(本章就使用这个命令) 创建项目 npm create react-app my-app --template typescript 如要使用其他第三方库，如路由需要安装路由 (两个都要装) npm i react-router-dom
超细致的TypeScript入门与实战
weixin_43805705的博客
08-22 1507
本文向大家介绍TypeScript基础知识及用法，帮助大家快速了解，在前端项目中使用这门技术。TypeScript的类型推断跟 VS Code 的良好搭配让代码效率有了极大提升。静态类型检测，会提示一些潜在的问题，使得开发者代码更严谨，低级错误早发现早解决。同时TypeScript类型定义使得代码的可读性增强，统一规范，可有效降低项目维护成本。
在react+typescript使用react-barrage
05-12
React-barrage是一个React组件库，提供了在页面上展示弹幕的功能。在使用react-barrage之前，你需要先在项目中安装它： ``` npm install react-barrage --save ``` 然后在你的组件中使用它： ```tsx import React, { useCallback, useEffect, useState } from 'react'; import { Barrage, BarrageItem } from 'react-barrage'; interface Message { text: string; time: number; } const BarrageComponent: React.FC = () => { const [messages, setMessages] = useState<Message[]>([]); useEffect(() => { // 模拟异步获取弹幕数据 const timer = setInterval(() => { const now = Date.now(); setMessages(prevMessages => [ ...prevMessages, { text: `弹幕${now}`, time: now } ]); }, 1000); return () => clearInterval(timer); }, []); const renderItem = useCallback(({ text }) => { return <div>{text}</div>; }, []); return ( <Barrage> {messages.map(message => ( <BarrageItem key={message.time} text={message.text} render={renderItem} /> ))} </Barrage> ); }; export default BarrageComponent; ``` 这里的Barrage组件是弹幕的容器，而BarrageItem则是每一条弹幕。你需要将需要展示的弹幕数据传递给BarrageItem，并通过render函数来渲染每一条弹幕的内容。在上面的例子中，我们使用了useState来存储弹幕数据，并使用useEffect模拟异步获取数据的过程。当组件挂载后，我们每隔一秒钟就会向弹幕数据中添加一条新的弹幕数据，并将其展示在页面上。 需要注意的是，由于react-barrage是基于canvas实现的，因此在使用时需要注意一些性能问题。如果弹幕太多或太长，可能会导致页面卡顿或者崩溃。因此，在使用时需要根据实际情况来控制弹幕的数量和长度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值