首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

2023 React 生态系统,以及我的一些吐槽……

它的一些特点包括: 100%推断的 TypeScript 支持 类型安全的绝对和相对导航 嵌套路由和布局路由 集成的路由加载 API(数据、资源、暂停) 为 state-while-revalidate...createAsyncThunk API 之上的 由于 Redux Toolkit 是与 UI 无关的,RTK Query 的功能可以与任何 UI 层一起使用 API 端点是预先定义的,包括如何从参数生成查询参数和将响应转换为缓存的方式...编写,并旨在提供出色的 TypeScript 使用体验。...import React from "react"; import { Formik } from "formik"; const Basic = () => ( Anywhere...国际化(i18n) react-i18next react-i18next 是基于 i18next 的一款强大的国际化框架,可以用于 reactreact-native 应用,是目前非常主流的国际化解决方案

55130

聊一聊 2024 年 React 生态系统

此外,如果同时开发前端和后端(并且两者都使用TypeScript),那么 tRPC 是一个值得考虑的选项。tRPC 提供端到端的类型安全 API,可显著提高开发效率和用户体验。...作为替代方案,还有 FormikReact Final Form 可供选择。...建议: 如果需要 JavaScript 的类型,就使用 TypeScript。 代码结构 如果希望在 React 项目中采用统一且符合常识的代码风格,强烈推荐使用 ESLint。...它能够渲染组件并模拟HTML元素上的事件。然后,可以使用测试框架进行断言。 如果正在寻找用于 React 端到端(E2E)测试的测试工具,Playwright 和 Cypress 是最受欢迎的选择。...移动应用 如果想将 React 从 Web 移植到移动平台,React Native 仍然是最佳选择。Expo 作为最流行的框架,可以轻松创建 React Native 应用。

62510

【译】73个超棒且可提高生产力的 NPM 包

Web sockets 15.Socket.io[36] Socket.IO 支持实时,双向和基于事件的通信。它可以在每个平台,浏览器或其他设备上运行,并同时关注可靠性和速度。...表单和邮件 42.Formik[65] FormikReactReact Native 的一个流行开源表单库。它具有易于使用、声明性和适应性的特点。...Cheerio 安装了 Parse5 解析器,能够解析任何类型的 HTML 和 XML 文档。...它通过解析代码并使用自己的规则(考虑到最大行的长度)重新打印代码,以及在必要时包装代码,来强制执行一致的样式。 ? 模块打包和压缩器 51.Webpack[74] 一个著名的功能强大的模块打包器。...你可以传递选项对象从而决定其产生的颜色类型。 73.Pluralize[97] 该模块使用预先定义的规则列表,按顺序应用这些规则给指定单词单数或复数。

5.9K30

推荐十一个React Hook库

它提供的主要功能是: 请求/响应拦截器 支持React Native 卸载组件时中止/取消挂起的http请求 缓存 CodeSandbox示例和Youtube视频以及GitHub自述文件都对此进行了很好的记录...这是一个准确跟踪React sensor hook。媒体查询以及任何应用程序或网站的响应能力都非常重要。 它提供了支持TypeScript编写。...hook form React hook form是一个与Formik和Redux表单相似的表单校验hook库,但是更好!...它提供的主要功能: 非受控表单校验 以性能和开发体验为基础构建 迷你的体积而没有其他依赖 遵循 html 标准进行校验 与 React Native 兼容 支持浏览器原生校验 地址: https://github.com...提供跨多个选项卡的自动JSON序列化和同步,并以TypeScript编写,因此它提供了类型。 文档以高质量的方式编写,并且可以通过扩展示例来很好地理解。

4K30

有哪些值得学习的大型 React 开源项目?

它基于 create-react-app 构建,使用 TypeScript 编写,带有 Express 后端,使用 Material UI 作为 UI/组件库,使用 Formik 实现表单,使用 react-router...使用 TypeScript + React 编写,并使用 SCSS 编写样式。大多数组件都存在于 components 包中。...作为一个 React 项目很值得一试,因为它是持续开发很多年项目的一个很好的例子。使用 PropTypes 进行类型检查,使用 Redux 进行状态管理。...它使用 TypeScript + React Hooks 编写,使用 SCSS 进行样式处理。...代码库使用 Flow 进行类型检查,使用 Apollo (GraphQL) 进行数据获取,使用 Redux 进行状态管理,使用 Express 服务器进行服务器渲染,并编写了大量的自定义 React Hooks

4.5K20

30个小知识让你更清楚TypeScript

TypeScript 中的类型断言的工作方式类似于其他语言中的类型转换,但没有 C# 和 Java 等语言中可能的类型检查或数据重组。类型断言对运行时没有影响,仅由编译器使用。...类型断言本质上是类型转换的软版本,它建议编译器将变量视为某种类型,但如果它处于不同的形式,则不会强制它进入该模型。 9、如何在 TypeScript 中创建变量?...TypeScript有内置的支持preserve,reactreact-native。 preserve 保持 JSX 完整以用于后续转换。...react不经过 JSX 转换,而是react.createElement作为.js文件扩展名发出和输出。...react-native结合起来preserve,react因为它维护所有 JSX 和输出作为.js扩展。 21、如何编译 TypeScript 文件?

4.7K20

30个小知识让你更清楚TypeScript

TypeScript 中的类型断言的工作方式类似于其他语言中的类型转换,但没有 C# 和 Java 等语言中可能的类型检查或数据重组。类型断言对运行时没有影响,仅由编译器使用。...类型断言本质上是类型转换的软版本,它建议编译器将变量视为某种类型,但如果它处于不同的形式,则不会强制它进入该模型。 9、如何在 TypeScript 中创建变量?...TypeScript有内置的支持preserve,reactreact-native。 preserve 保持 JSX 完整以用于后续转换。...react不经过 JSX 转换,而是react.createElement作为.js文件扩展名发出和输出。...react-native结合起来preserve,react因为它维护所有 JSX 和输出作为.js扩展。 21、如何编译 TypeScript 文件?

3.6K20

30道TypeScript 面试问题解析

TypeScript 中的类型断言的工作方式类似于其他语言中的类型转换,但没有 C# 和 Java 等语言中可能的类型检查或数据重组。类型断言对运行时没有影响,仅由编译器使用。...类型断言本质上是类型转换的软版本,它建议编译器将变量视为某种类型,但如果它处于不同的形式,则不会强制它进入该模型。 9、如何在 TypeScript 中创建变量?...TypeScript有内置的支持preserve,reactreact-native。 preserve 保持 JSX 完整以用于后续转换。...react不经过 JSX 转换,而是react.createElement作为.js文件扩展名发出和输出。...react-native结合起来preserve,react因为它维护所有 JSX 和输出作为.js扩展。 21、如何编译 TypeScript 文件?

4.3K20

Top JavaScript Frameworks & Topics to Learn in 2017

如果你还在学习ES6,你可以了解到它是如何使用 Babel REPL 进行转换。 这是列表很长,但不要气馁,你可以完成它!...TypeScript*: avaScript的静态类型。完全可选,除非你学习Angular 2。 如果你不使用 Angular 2,你应该在选择TypeScript之前仔细评估。...我喜欢很多,我赞赏 TypeScript 团队的出色工作,但是你需要知道的权衡。所需阅读:“关于静态类型的令人震惊的秘密”和“你可能不需要TypeScript”。...Flow*: JavaScript的静态类型检查器。请参阅“TypeScript与Flow”,以获得令人印象深刻的客观比较。...事件处理阶段 - 在渲染 DOM 之后,React 侦听和事件,将事件委托给其 DOM 树根(为了更好的性能)的单个事件侦听器。 你可以监听这些事件并更新响应中的数据。

2.2K00

Rocket Chat,一个纯前端技术构建的开源产品

具体下来说,使用到的一些前端技术主要包括 •语言:JavaScript / TypeScript•后端框架:NodeJS•移动端开发框架:React Native•跨平台桌面开发框架:Electron•...而TypeScript则是基于JavaScript之上,增加了静态类型检查的一门语言,由于JavaScript过于灵活,当项目越来越大时,基于JavaScript的代码越发难以控制与维护。...早些年,Node.js影响力非常大,主要是它的事件循环机制相对过往Java同步阻塞,非常高效,很多公司或程序员对这个都非常赞赏。不过近些年,Node.js在国内流行度在下降。...2.React Native 移动端在跨平台解决方案上,最流行的两个可能就是React Native与Flutter了。...在跨平台解决方案上,React Native是先行者,它也是前端技术,React NativeReact同出一门,都是Facebook的杰作。

3.7K40

前端react面试题(必备)2

React 17之前,如果使用了JSX,其实就是在使用React, babel 会把组件转换为 CreateElement 形式。...其实 React 本身并不强制使用 JSX。在没有 JSX 的时候,React 实现一个组件依赖于使用 React.createElement 函数。...(2)如果已经创建了 Create React App 项目,需要将 typescript 引入到已有项目中通过命令将 typescript 引入项目:npm install --save typescript...这样做的主要原因是受控组件支持即时字段验证,允许有条件地禁用/启用按钮,强制输入格式。概述一下 React中的事件处理逻辑。...为了解决跨浏览器兼容性问题, React会将浏览器原生事件( Browser Native Event)封装为合成事件( Synthetic Event)并传入设置的事件处理程序中。

2.3K20
领券