Plus Jack Herrington shares a trick from the React Native world. |
#397 — August 28, 2024
Together with
React Status
Material UI v6: The Popular React UI Design/Component System — At almost exactly ten years old, the MUI design system has its latest major release. The enhancements are more evolutionary than revolutionary though, with a focus on improved theming, color scheme management, container query support, and React 19 support. There are also some revamped templates to help you get started.
García, Bittu, Andai, et al.
💡 If you’re on MUI v5, there’s a handy guide for upgrading to v6 which the team suggests “shouldn’t be too bad” to do.
Implementing a React-a-Like from Scratch — While it’s unlikely you’ll actually want to do this, at least thinking about it can prove instructive as to what’s going on in React’s engine room.
Robby Pruzan
Front-End System Design — Learn to create scalable, efficient user interfaces in this extensive video course by Evgennii Ray. Explore the box model, browser rendering, DOM manipulation, state management, performance and much more.
Frontend Masters sponsor
The Interface Segregation Principle in React — Alex looks at one of the famed SOLID object orientation principles and how it can apply to React.
Alex Kondov
▶ 21 Talks from Chain React 2024 — Chain React was a React Native conference that took place last month in Portland, Oregon. Catch up with what went on in this playlist, including building React Native apps for TVs, how to optimize React Native performance, or Jack Herrington showing off how to build a local-first semantic search system inside a React Native app.
Chain React 2024
How to Build a Bluetooth Low Energy-Powered Expo App — Bluetooth Low Energy is aimed at use cases like healthcare, fitness, beacons, security and home entertainment. Here’s one way to get started.
Daniel Friyia (Expo Blog)
▶ Simplified React Web-to-Native Migration with ‘use dom’ — Web-to-native migration can seemingly never be made simple enough, which is where Expo’s new, experimental [use dom](https://react.statuscode.com/link/159064/5d0bbb4a61) directive comes in.
James Shopland (Jolly Coding)
📄 Type-Safe Routing with React Router – However, TanStack Router may be a better fit if you want to do this. Sahaj Jain
📺 A Secret React Native Hack for React Web Devs Jack Herrington
📰 Classifieds
[Live Workshop] Solve frontend issues with backend solutions: tracing problems through your Next.js stack. 🔍
🚀Join React Advanced London on Oct 25 & 28! 60+ advanced React and Web Dev talks, workshops & networking. Use code React15 for 15% off!
🛠 Code, Tools & Libraries
Code Hike 1.0: Turn Markdown into Rich Interactive Experiences — Aimed at use cases like code walkthroughs and interactive docs, Code Hike bridges the gap between Markdown and React when creating technical content that takes full advantage of the modern web.
Rodrigo Pombo
React Cosmos v6.2: A Sandbox for Developing and Testing UI Components — Built upon a project first showcased at ReactEurope 2015, Cosmos is a long standing and ‘slowly matured’ tool for prototyping React components in an isolated manner.
Ovidiu Cherecheș et al.
Snaptail: One File React Apps — If you’re still feeling a little overwhelmed by React, here’s how to build an app by manipulating just one file.
Sandro Rybarik
uikit 0.5: Build 3D UIs in React-Three-Fiber Apps — Ideal for games, XR (VR/AR), and web-based spatial-style apps. GitHub repo.
Bela Bohlender
🕒 Time Picker: A shadcn/ui-Based Date/Time Picker Component
OpenStatus
-
React Stripe 2.8 – React components for Stripe.js and Stripe Elements.
-
react-native-MMKV 3.0 – Fast key/value storage for React Native apps.
-
json-viewer 3.5 – Display JSON data in a readable, user-friendly way (above).
-
VisionCamera 4.5.2 – Advanced camera control for React Native.
-
React Suite 5.70 – A suite of React components. (Examples.)
Curated by Peter Cooper and Terence C. Gannon.
A Cooperpress publication.
另外 Jack Herrington 分享了 React Native 世界的一个技巧。 |
#397 — 2024 年 8 月 28 日
连同
[](https:// react.statuscode.com/link/159031/5d0bbb4a61)
反应状态
[](https://react.statuscode.com/link/159049/5d0bbb4a61 ）
Material UI v6：流行的 React UI 设计/组件系统 — MUI 设计系统已经有近十年的历史了最新的主要版本。不过，这些增强功能更多的是进化性而非革命性，重点是改进的主题、配色方案管理、容器查询支持和 React 19 支持。还有一些改进的模板 可以帮助您入门。
加西亚、比特图、安代等人。
💡 如果您使用的是 MUI v5，团队 建议 有 升级到 v6 的便捷指南 .com/link/159052/5d0bbb4a61) “应该不会太糟糕”。
从头开始实现 React-a-Like — 虽然您“实际上”不太可能想要这样做，至少思考一下它可以对 React 引擎室中发生的事情有所启发。
罗比·普鲁赞
前端系统设计 — 在 Evgennii Ray 的这个内容广泛的视频课程中学习如何创建可扩展、高效的用户界面。探索盒模型、浏览器渲染、DOM 操作、状态管理、性能等等。
前端大师赞助商
React 中的接口隔离原则 — Alex 着眼于著名的 [SOLID](https://react.statuscode. com/link/159055/5d0bbb4a61）面向对象原则及其如何应用于 React。
亚历克斯·康多夫
▶ 来自 Chain React 2024 的 21 场演讲 — [Chain React](https://react.statuscode.com /link/159057/5d0bbb4a61）是上个月在俄勒冈州波特兰举行的 React Native 会议。了解此播放列表中发生的事情，包括为电视构建 React Native 应用程序、如何[优化 React Native 性能](https:// react.statuscode.com/link/159059/5d0bbb4a61），或 Jack Herrington 在 React 中展示如何构建本地优先语义搜索系统本机应用程序。
链式反应 2024
如何构建低功耗蓝牙供电的 Expo 应用程序 — [低功耗蓝牙](https://react.statuscode. com/link/159062/5d0bbb4a61）针对医疗保健、健身、信标、安全和家庭娱乐等用例。这是一种入门方法。
丹尼尔·弗里亚（世博博客）
▶ 使用 ‘use dom’ 简化 React Web 到本机迁移 — Web 到本机迁移看似永远不可能变得足够简单，这就是 Expo 新的实验性“use dom”指令的用武之地。
詹姆斯·肖普兰（Jolly Coding）
📄 React Router 的类型安全路由 – 但是，TanStack Router ）如果您想这样做，可能更适合。萨哈吉·耆那教
📺 React Web 开发人员的秘密 React Native Hack Jack Herrington
📰 分类广告
[Live Workshop] 使用后端解决方案解决前端问题：通过 Next.js 堆栈跟踪问题。 🔍
🚀加入 React Advanced London 将于 10 月 25 日至 28 日举行！ 60 多个高级 React 和 Web 开发讲座、研讨会和社交网络。使用代码 React15 可享受 15% 的折扣！
🛠 代码、工具和库
[](https://react.statuscode.com/link/159068/5d0bbb4a61 ）
Code Hike 1.0：将 Markdown 变成丰富的交互体验 — 针对代码演练和交互式文档等用例，[Code Hike] (https://react.statuscode.com/link/159069/5d0bbb4a61) 在创建充分利用现代网络的技术内容时，弥合了 Markdown 和 React 之间的差距。
罗德里戈·庞博
React Cosmos v6.2：用于开发和测试 UI 组件的沙箱 — 基于在 ReactEurope 2015 上首次展示的项目 Cosmos 构建是一个历史悠久且“慢慢成熟”的工具，用于以独立的方式对 React 组件进行原型设计。
奥维迪乌·切雷切什 (Ovidiu Cherecheş) 等人。
Snaptail：一个文件 React 应用程序 — 如果您仍然对 React 感到有点不知所措，以下是如何构建应用程序操作仅一个文件。
桑德罗·雷巴里克
uikit 0.5：在 React-Three-Fiber 应用程序中构建 3D UI — 非常适合游戏、XR (VR/AR) ，以及基于网络的空间风格应用程序。 GitHub 存储库。
贝拉·博伦德
🕒 时间选择器：基于 shadcn/ui 的日期/时间选择器组件
打开状态
-
React Stripe 2.8 – Stripe.js 和 Stripe Elements 的 React 组件。
-
react-native-MMKV 3.0 – React Native 应用的快速键/值存储。
[](https://react.statuscode.com/link/159075/5d0bbb4a61 ）
-
json-viewer 3.5 – 以可读、用户友好的方式显示 JSON 数据*（上文）*。
-
VisionCamera 4.5.2 – React Native 的高级相机控制。
-
React Suite 5.70 – 一套 React 组件。 （示例。）
由彼得·库珀和特伦斯·C·甘农策划。
Cooperpress 出版物。
发布者