vlambda博客
学习文章列表

编辑 | edison-hm

         whatwewant 

         QC-L

本周看点：Next.js 发布了 10.2 版本、五大 React 框架全方位测评、Vite 2.0 的速成教程等等。除此之外，还附有很多最佳实践，具体内容小伙伴们看文章吧~

电脑阅读，请点击阅读原文或直接访问 https://docschina.org/weekly/react

🔥 本周热门

Mantine：全新推出的 React 组件库 — Mantine 组件库的特点：使用了 MIT 协议、基于 Typescript 开发、拥有大约 60 个组件或者 hooks、支持深色主题、着重于可用性以及无障碍访问、拥有大量的文档和示例，并且他们也支持使用在 Preact 中。

长按识别二维码查看原文   

https://mantine.dev/

Mantine Team

▶ 五大 React 框架的测评 — 该视频仅仅用了 26 分钟，就为开发者如何挑选 5 大热门 React 框架：CRA、Gatsby、Next.js、Blitz 和 Redwood 提供了充分的建议。

长按识别二维码查看原文   

https://youtu.be/dfMhRYOtglg

Leigh Halliday

Next.js 发布了 10.2 版本 — Vercel 的 Next.js 团队最新发布了 10.2 版本，其改进已经超出了我们对一个小版本的期望：构建速度提升了 60%，更快的刷新和启动，优化了无障碍访问以及提供更灵活的 redirect 和 rewrite。巧合的是，同时，Gatsby 也发布了 3.4 版本。

长按识别二维码查看原文   

https://nextjs.org/blog/next-10-2

Vercel

10 个用 React Native 搭建的应用 — 作为 React Native 背后的厂商，Facebook 和 Instagram 的移动端应用重度使用了 React Native 是理所应当的，不过榜单中的另外 8 个应用可能会让你有些意外。

长按识别二维码查看原文   

https://t.co/Jkko0Sc0VO?amp=1

David Jöch

📘 教程与趣事

如何使用 TypeScript 定义函数 — JS 函数过于灵活的写法在结合 TS 定义时可能会让新手不知所措，为此作者整理了一些规范的语法供参考。

长按识别二维码查看原文   

https://kentcdodds.com/blog/typescript-function-syntaxes

Kent C. Dodds

▶  Vite 2.0 的速成教程 — 视频作者对 Vite 的喜爱程度甚至让他放话“永远不会再使用 Create React App”。

长按识别二维码查看原文   

https://www.youtube.com/watch?v=LQQ3CR2JTX8

Jesse Hall

使用 Yarn Workspace、TypeScript、esbuild、React 和 Express 创建 Web 应用 — 本篇是由三部分组成的系列文章中的第一篇，接下来的一篇会介绍如何使用 GitHub Actions 将应用发布到 Docker。

长按识别二维码查看原文   

https://halftheopposite.dev/post/app-yarn-typescript-esbuild-part-1

Aymeric Chauvin

借助 AWS Amplify 将上传图像功能添加到 React Native 应用 — AWS 希望借助 Amplify 进军移动端的应用开发，教程的作者介绍了如何将其应用于常见的需求。

长按识别二维码查看原文   

https://dev.to/aws/adding-image-upload-to-a-react-native-app-with-aws-amplify-4j7m

Derek Bingham

使用 React 开发一个打地鼠游戏 — 对 React 新手来说，一个入门的好方法是学习一个简单并带有实际案例的教程。

长按识别二维码查看原文   

https://t.co/ua5FS8JCmf?amp=1

John Au-Yeung beginner

React 17 中合成事件将支持 Keyboard event 的 code 属性 — React 的最新发布中包括了这一小而重要的改动。

长按识别二维码查看原文   

https://blog.saeloun.com/2021/04/23/react-keyboard-event-code

Aditi Tipnis

🛠  代码与工具

react-scroll-sync：同步单页面多个可滚动元素的滚动位置 — 查看示例了解更多。

长按识别二维码查看原文   

https://github.com/okonet/react-scroll-sync

Andrey Okonetchnikov

React Hooks 的 Cheat Sheet — 你可以出任意价格来得到这份 cheat sheet（作者建议：0 元）。

长按识别二维码查看原文   

https://gumroad.com/l/react-hooks-cheatsheet

Sébastien Castiel

ClickableBox：自动为 HTML 元素增加 “onClick” 方法 — 该组件返回的元素除了增加 onClick 方法外，还会增加一系列支持无障碍访问所需的属性（如 tabIndex、role）和监听事件（如 onKeyDown）。

长按识别二维码查看原文   

https://github.com/danoc/clickable-box

Daniel O’Connor

State Designer：着重于优化状态设计体验的状态管理库 — 是的，又出了一个新的状态管理库，不过有所不同的是，该库的目的是希望帮助你厘清应该如何设计你的状态。附上示例 和 github 仓库。

长按识别二维码查看原文   

https://www.state-designer.com/

Steve Ruiz

Framer Motion 支持 Hooks 了 — 如果之前说 Framer Motion 的缺点是不支持 Hook，那么现在已经填补了这个空缺。

长按识别二维码查看原文   

https://github.com/matthiaaas/framer-motion-hooks

Matthias Halfmann

Chat UI Kit React：构建属于你的聊天 UI 组件 — 该库可以帮助你轻松实现用 React 组件来搭建聊天界面。

chatscope

⚡️ 好库推荐：

你可能错过的有趣的项目：

• react-native-wheel-scrollview-picker — 在移动端使用的滚轮选择器
• react-google-autocomplete — 使用 Google Maps 的地点预测功能来预填充位置区域
• react-bulma-components — 支持 Bulma 框架的 React 组件库
• gridjs-react — 高级的 React 表格组件
• box-ui-elements — 为 Box 生态下的开发者提供的组件库

🙋‍♂️ 关注我们

我们将为你带来最前沿的前端资讯。