React Status 中文周刊 #36 - 使用 Deno 构建 React 应用指南

编辑 | whatwewant 

         edison-hm 

         QC-L

随着 React 社区的蓬勃发展，工具链路也愈发强大。我们已经可以通过 GUI 来控制 React 的组件属性。同时 Deno 社区也提供了使用 Deno 构建 React 的方法。

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

🔥 本周热门

Leva：面向 React 的 GUI 面板 — 一个面向 React 组件属性精心设计的 GUI 面板，想象一下，可以通过 GUI 修改 useStates ，是不是很激动？

长按识别二维码查看原文   

https://github.com/pmndrs/leva

David Bismut

使用 Deno 构建 React 应用指南 — 如果你想使用 Deno 构建 Next.js 或 create-react-app 的应用，那么此文值得一读。

长按识别二维码查看原文   

https://dev.to/thewritingdev/building-react-applications-using-deno-the-definite-guide-31e9

Akash Joshi

▶ 6 分钟向 React 开发者介绍 Vue — 该视频从 React 开发者的视角很好地介绍 Vue.js，即使你未来没有考虑转向 Vue.js，它也很值得一看。

长按识别二维码查看原文   

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

Coding with Justin

`react-pdf` v2.0 发布了 — 尽管 react-pdf v2.0 的 API 兼容 v1，但是它是彻底重构，提供了基于 Hooks 的 API，优化了性能，支持 SVG，支持更多 CSS 属性，包括 z-index 和 overflow。

长按识别二维码查看原文   

https://react-pdf.org/blog/announcing-react-pdf-v2

Diego Muracciole

Hyperapp – 轻量级的 “React 杀手”？ — 在 React 影响力快速扩张的过程中，一直不乏想要撼动 React 市场地位的类 React 框架，而 Hyperapp 也是其中一员。Hyperapp 在沉寂了一段时间后，发布了 v2 回归，声势浩大，做了很多 break changes，值得再次关注。

长按识别二维码查看原文   

https://blog.asayer.io/hyperapp-is-it-the-lightweight-react-killer

Arek Nawo

📘 教程与趣事

使用 html2canvas 将 React 组件导出成图片 — 对复杂的数据可视化（图形 + 表格）截图并不容易，而 html2canvas 通过读取 DOM 元素构建屏幕截图来解决这一问题。

长按识别二维码查看原文   

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

Matthew Croak

使用 Next.js 和 Theme UI 重构老旧的 Jekyll 站点 — 文章还包含了为何选择 Next.js 而不是 Gatsby 的思考。

长按识别二维码查看原文   

https://ghostinspector.com/blog/rebuilding-jekyll-website-next-js-theme-ui//

Brandon Weiss

结合 React Hooks 使用 Three.js — 7 步在你的 React 应用中使用 Three.js。

长按识别二维码查看原文   

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

Mikael Petersen

面向 React 初学者的技巧和诀窍 — 对于 React 初学者来说，这里有一些不错的技巧和诀窍。

长按识别二维码查看原文   

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

Denis Homolík beginner

▶ 在 React 开发中模拟 API — 本文通过 Mock Service Worker 模拟 API，解耦前端和后端开发。

长按识别二维码查看原文   

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

Leigh Halliday

使用 Thunk 中间件延迟 Redux 中的分发 Action

长按识别二维码查看原文   

https://www.amitmerchant.com/delay-dispatching-actions-in-redux-using-redux-thunk-middleware/

Amit Merchant

🛠  代码与工具

react-spinners-css：纯 CSS 实现的 Spinner — 我们在 2019 年的 155 期中首次介绍了这个库，现在是时候看看它的发展情况了。

长按识别二维码查看原文   

https://bit.dev/joshk/react-spinners-css

Josh Kuttler

use-debounce 6.0：React Debounce Hook — 查看 CodeSandbox 了解更多

长按识别二维码查看原文   

https://www.npmjs.com/package/use-debounce

Nikita Mostovoy

CCY Icons：330 多种精心组合的货币图标 — 简洁高效的 UI 关键是视觉一致性：这些货币图标呈现一致，并可以使用 CSS color 属性进行着色。

长按识别二维码查看原文   

https://github.com/finery-ui/ccy-icons

Dominic Tobias

react-billboardjs：可视化图表库 Billboard.js 的 React 版本 — 目前发布了第三个版本。

长按识别二维码查看原文   

https://github.com/planttheidea/react-billboardjs

Tony Quetano

Next Page Tester：Next.js 应用的 DOM 集成测试工具 — 该库会根据指定的 Next.js 路由，在 JSDOM 中渲染页面，并支持从 Next.js 路由系统和数据获取方法注入 Props。

长按识别二维码查看原文   

https://github.com/toomuchdesign/next-page-tester

Andrea Carraro

d3-axis-for-react：坐标轴刻度的自动参考标记 — 坐标轴的刻度对项目来说是很重要，但是单独处理却有些乏味，为什么不试试这个自动处理坐标轴刻度的库呢？查看示例了解更多。

长按识别二维码查看原文   

https://github.com/tmcw/d3-axis-for-react

Tom MacWright

⚡️ 好库推荐：

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

• react-native-bootsplash — 应用启动首屏
• React Tilt — 创建三维显示的错觉
• react-simple-icons — Simple Icons 的 React 版本
• React A11yDialog — 支持无障碍访问的对话窗口
• React Google Places Autocomplete — 轻松使用地理位置预测
• react-functional-select — 类似 react-select 高性能函数式下拉框

🙋‍♂️关注我们

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