星期一 05 凌晨 一月 20o 2025
RD#489 Five years of React Native at Shopify
Five years of React Native at Shopify
10 minutes by Mustafa Ali
Five years ago, Shopify announced that React Native is the future of mobile at Shopify. This article reflects on their successful transition to React Native, highlighting improved productivity through cross-platform development, talent flexibility between web and mobile teams, and achieving excellent performance metrics.
Easily Add Chat to Your React App with PubNub
sponsored by PubNub
Accelerate chat development while keeping full control of your UI with PubNub’s pre-built chat features. Simplify chat management and moderation using our no-code tools and deliver an engaging user experience with 99.999% uptime and <30 ms latency. Start building today with our React Chat SDK tutorial.
Split routes config in React Router
1 minute by Sergio Xalambrí
In this article Sergio explains how to organize and split React Router routes across multiple files for better maintainability in large applications. He demonstrates using the relative and prefix functions to define routes in separate files, allowing developers to structure routes by feature or section and then combine them in a main routes file.
Accessibility essentials every front-end developer should know
12 minutes by Martijn Hols
A few basic practices can make a significant impact! In this article, Martijn walks you through the key accessibility principles every front-end developer should apply when building components. It covers essential practices including semantic HTML usage, proper form structure, keyboard navigation, modal accessibility, image alt texts, and appropriate styling.
Reducing bloated code with component hooks
4 minutes by Tymek Zapała
Tymek explains how to improve complex React components by separating business logic from presentation using component hooks. He demonstrates this approach by evolving a simple ProductCard component into a more complex one with features like quantity validation and price formatting, then shows how extracting logic into a dedicated useProductCard hook results in cleaner, more maintainable code that’s easier to test and understand.
React’s experimental animations API
9 minutes by Matt Perry
React is getting its first animations API! In this article Matt discusses React’s first native animation API called , based on the browser’s View Transition API. This new component simplifies animation implementation compared to relying on third-party libraries. The API allows developers to animate between different views, handle shared element transitions, and customize animations through event handlers, though it comes with some limitations as it’s still experimental and can’t be interrupted once started.
[读在线](https://link.mail.beehiiv.com/ss/c/u001.3mTwTBe\_1W4fLvRj4unk8hErXB2vrDHg5DYaj51xP1VLHEQS7IqKZE0eTS7ffmON3D\_HEg3HH7 6e04QZQktrsQ8jg8ASrXD09KH4YvUhZV22z85GyCo2wPy9GTGtGPkYdUaY7MedsovRJIXAWGq7W6JIcdeTS575AuxrzTc3rB6KrRr7iDIFGbfcxfWpiksIdc6NI sx7YCi9PLmUrLw_vXq0ZsslJbRImA4AoAn4SJEGd4l2gQ1Qs8CXM6bUQOmSkD5_FWBVboLLs0cz3CzqYsBoFW64bgG98ec1pzP3_HQLRo-uu-PH7p54W_y8788m U3agfC2ETBG0wOdB0Ozv71pLGwI6gxcxW2VN4eVHzc3E2iFmyOZS94DdF27j7KiZeG0EtQ0Q9uBgajEgz3hVh065YcTaMik1uzZ_AJhmFtMIWmbV_xCv0Db5Pc3 pbIZ_qzrCx9AN4D04D0F9Ip6CKQG8jna-YdCvC6DbtyxoYqIsgfI7Vp_O85jSJskRq2_ahro61cyAh9wYLrgYZiT1JomYGZQ9XQRPXRRGJ36d1BgisuLEzw6E1 R7DNzio7Fg3IHvm5thcCo4uk5jUND-v8I2ghXQf7UMH4k-IKZs4MqzeSj8f36IdPuXZKcL2-RtOsbgl02J9qDrYiDdybqHz7gfPcjmC-EyOlCpgTTGkeoV77bmb qljSRCAYIEY_60A1qcPB7IPBm9uHQUe-9uZxfobtr-HMedCDasIjEoaTQTQrcl4j72HSpghk0ubhR8lb_smDUpd8YljeTKtYPqotz49CM85qBm2vQJMx1KfLV9s x6AQi_j40vdlku_9JCgc5FooXjh5ulinrh9cY-aeEQA/4db/qkSllVAyQLyXRT4Tv5D9aQ/h0/h001.qiPEopQGu8PoYxTcya40sVmcj_JlBSVocDIUcjI0jmg)
[React Native 五年Shopify](https://link.mail.beehiiv.com/ss/c/u001.umaHyWnMavjtWWn\_0mUAO8NxTYv91\_w\_an9Qr2WKky7XsCnQbOZn0dJAaCVdBQ1 Rp1A_Y2kx9gEdq0hZ8nLfQyv4lErrZgP6bJn39DT_w7SjhbKMTjtm3IcpEoP4_zwSbUtBrJbdV-pXLIsduHjCjOBwPyMXRQJcO8N0css8S-hISGSr bitn6CeevdLHP2GtBKNRFb1X2iA8-nmehExqCwXFIojX3DnzJAzbjhlpz7Ing7hjYcpHbEvIXNMUqw_V5_QKzjhrhC6zM6ThBf1Eb8WYLMnodCF4 PUgCFnjldwNPjY7iM-4aFHZEpKNlsWgZ/4db/qkSllVAyQLyXRT4Tv5D9aQ/h1/h001.hztIDBF7QFfUwRCxFhuy_vT9CDUaXQ-pboxOJTuMYEc)
10 分钟 穆斯塔法·阿里
五年前,Shopify 宣布 React Native 是 Shopify 移动的未来。本文回顾了他们向 React Native 的成功过渡,强调了通过跨平台开发提高了生产力、Web 和移动团队之间的人才灵活性以及实现了出色的性能指标。
[轻松将聊天添加到您的 React 应用程序中PubNub](https://link.mail.beehiiv.com/ss/c/u001.96pnkUdR2Et9YTtP31beqULGHRyYl8269iPZ7ePi3MI pQWyaVdgNnxVIdhu0x2QMrHsEZ7tKTahsrmSt9-tuuyB-NeBxo0DaV4C0s-O4inManax9dhbfgJjVe4v9eNXZCvdJM_ q25QWXD4zCtixq2kFTv3ruJhlnAMtJ3yv3flspJ-q_eRYXOUGY7qrkXre9ah7FkX_pC6I9w7rnyTbS285BNVhzLf4jr U-thhcZn6c/4db/qkSllVAyQLyXRT4Tv5D9aQ/h2/h001.DN_LkUwA9rlkrROdptrEkVFvFfIcWvCQvGB95YDVt0g)
由 PubNub 赞助
使用 PubNub 的预构建聊天功能加速聊天开发,同时保持对 UI 的完全控制。使用我们的无代码工具简化聊天管理和审核,并以 99.999% 的正常运行时间和 <30 毫秒的延迟提供引人入胜的用户体验。今天就开始使用我们的 React Chat SDK 教程进行构建。
[React 中的拆分路由配置路由器](https://link.mail.beehiiv.com/ss/c/u001.umaHyWnMavjtWWn\_0mUAO7sQgzyszJucC5x7a-ReVIvJ\_V9V5EKTIyTHzZBUCbCF ciCtTAa6k8Nd2NOg5XgYnjp59Qex_Z1GWEqamctR1RhYNniqzGHdYJEI2TtwxcjtjkjeCGAsIrqJiiVxbB92vsK0mOaCBnnAxzmpQguu-BkKbDIE PdAHfwXTpRHO_wXzPlZILwP9PGdncsFgrI0g2dpB6ABHiaXnbuUs-R279eDEJ1-jkmOuTj1aW8N7n6QpmQGtQ6IS1tP1mpxb2kjogNFZPNuR1Cor TW8xVYUOX8MHevW3wIZxr7frgE1-3F14/4db/qkSllVAyQLyXRT4Tv5D9aQ/h3/h001.SN2bcMqciY3Fniqru1oRRiDZEu3v2idvNeEt1G2o0Cw)
1 分钟 Sergio Xalambrí
在本文中,Sergio 解释了如何在多个文件中组织和拆分 React Router 路由,以便在大型应用程序中获得更好的可维护性。他演示了使用相对和前缀函数在单独的文件中定义路由,允许开发人员按功能或部分构建路由,然后将它们组合在主路由文件中。
[每个前端开发人员都应该具备的辅助功能要素知道](https://link.mail.beehiiv.com/ss/c/u001.9rj0kBGH2\_rh17KMcAxCTUf39IQD\_P7d2yMBAmDOYQIIL83X2TTlZaL5hVy\_CFKrBfL80yikW-D1 g_kvdFmERxOPwh6OyFDrKuiMLdC79ZCA_oj8wupoYvQXypgUq2dXudA50u_-rTbq3HV2Ne8PjYJ9sxFpOwhDgBZegUl2UeFmR3u3-pcz3pFWKqPCsG2YwMSYzZS WGbVcjaeyX70iEIeSz9tP19t9_OiLXWV2dkiyL_8I5xiSyHinz14GBMrBg4mRLpjC421ndFYO9UFD5FtNImx97dIdwWEwHkIgzqU8Co5eOL1EYAm-UKCTFDzvj XZWl9uattH363dSCNVOd1sCRrjdk9XiQt52cWO3RLs/4db/qkSllVAyQLyXRT4Tv5D9aQ/h4/h001.F1a6c2i7FQeJeJmwoRKVSXafxVz4Ib8ET5f416sNlV4)
12 分钟 作者:Martijn Hols
一些基本实践可以产生重大影响!在本文中,Martijn 将引导您了解每个前端开发人员在构建组件时应应用的关键可访问性原则。它涵盖了基本实践,包括语义 HTML 使用、正确的表单结构、键盘导航、模式可访问性、图像替代文本和适当的样式。
[用组件减少臃肿的代码挂钩](https://link.mail.beehiiv.com/ss/c/u001.96pnkUdR2Et9YTtP31beqSXyHaDG8Z1lv5jATtSAudHrpRGfyEOKWadlJZTXNf2u\_ JqoA7XsYjXDm1oRMpFGSdP37Nr3nr2ngvi4Oq4onsYAzMM-jISsQjSdVEkPmmjF9MIAPTf75vmU1XyinaHcBcJPkNTuVyFcRbnHm5oLDoh7_PNRF MOMRFV0CggAcBispxc-kzEpB3vBScighedYCXqh2X5bEw8e79kG8i3r_HMYPm0Y7HSjzEUMPGTadiNhS7H0AfZ8bnrF0waA7yNs6X00T7d4Z3JrCS NM0wMd94Icn5Kzha9bpq_OXI8ekDGqM/4db/qkSllVAyQLyXRT4Tv5D9aQ/h5/h001.gCGmPnRXp9R_EYRow—GqLrSWIVEKWQ2Q5spU7JQkFg)
4 分钟 Tymek Zapała
Tymek 解释了如何通过使用组件挂钩将业务逻辑与表示分离来改进复杂的 React 组件。他通过将简单的 ProductCard 组件发展为具有数量验证和价格格式化等功能的更复杂的组件来演示这种方法,然后展示如何将逻辑提取到专用的 useProductCard 挂钩中,从而生成更清晰、更易于维护、更易于测试和理解的代码。
[React的实验动画API](https://link.mail.beehiiv.com/ss/c/u001.9rj0kBGH2\_rh17KMcAxCTfmg1-JjtcFBHRSzUKPlGlLrqoM3163WwptwH16ArObBO- jy3EHAm16-LbNvVbWVKLss3ia3geR4us6PeW6nfH5axS9g1X4s1IWLCoyautOHcXZD1meJwidmlgm6Ao18t1NpDmvKw4oc8-2Zky0Nib22cPljQu nxvNuj75r5NjK-a0FI1BK4B9cEGt3b8jFRVho5IRwJqlag-3C1WOEXXNHTXJeRSSWlQZaoCPBP_BKqTZRBxVgJAPd1MvF6bRwVnEVXjkzK9UT1z TMhujrpmqfoko3v7uFNQ6AXMk2E33vi/4db/qkSllVAyQLyXRT4Tv5D9aQ/h6/h001.XXCS8krND7pBiWLxd9tqR7i2OqJCaZ-Z_ogKKeU0KR4)
9 分钟 马特·佩里
React 正在获得第一个动画 API!在本文中,Matt 讨论了 React 的第一个名为 的原生动画 API,它基于浏览器的 View Transition API。与依赖第三方库相比,这个新组件简化了动画实现。该 API 允许开发人员在不同视图之间设置动画、处理共享元素转换以及通过事件处理程序自定义动画,但它有一些限制,因为它仍处于实验阶段,一旦启动就无法中断。
[仅仅因为你可以并不意味着你应该:<meter>元素](https://link.mail.beehiiv.com/ss/c/u001.Pom5Ld\_MyoPRljVGUP3R7yHsherUglOQ18bOrThfaN6Wae23CibI6x7p\_2nQDuP6s2c8snnkSz xnqPkP5e9h_4RSuzx5fr1Q7o8xeiWIkZnwR_7_utGUQTlggnIHqesNYgJseWi41DiiUdMfpVQOT-eHVvSdI7Dxi6B7WFOgzOXvYNrWazL8RfjvoOT1Oe7iIwZdh TFOamulGQ0Js_0XuOHfyjHEr0MWMRM87C6wvwFcLQ9j67rYqWNnxxrDjBhEa2xTTuWXd5vfmhFXyJMeUrffVMaYPaPG5n5hvf1nIvq7bfZhiGsTU6mka-w96I1z QIsNZWqylGh7DwfCQ5R4ax5XST8v7Y5eGJI-U-578GM/4db/qkSllVAyQLyXRT4Tv5D9aQ/h7/h001.u3gBOm6AWozZJm6Rk4zJ-Z8jPMePjFGv8DjRHWm76i0)
[辅助功能工具](https://link.mail.beehiiv.com/ss/c/u001.JtHN9HflllQ513MF6IlgF9QvXOdh3M1WtnyEbmvUCbZxZKSFOAzs8qEeGwcfnDzl 5ZUFSRultD0JJ7mFHTbxN1TQucxbhjvmWMl0f2OBPlOUA9HcKYjX29W56qxvfXpC7pnil7RHnp-bWVuMghavsbUeR41swAwmYDGnYHhXP2m-KZbn pWqVBzHQ8ja7vxKXS5MajioZV2v3F71S8hNBdWAqJOXx6U7aAHxTdrB_BhVR0ZykBjkuVIC9GzwOt3zSGRaHITFfM5EIetEl8yKWvN2dqYmYs3x2 SbqwCJ-Biuj05sMw270x9knURBuDGBnH/4db/qkSllVAyQLyXRT4Tv5D9aQ/h8/h001.9dck5QjlBWqrge5gUht71bae_jAjvRxJWlIyexzRSTQ)
[新增内容对话框](https://link.mail.beehiiv.com/ss/c/u001.KaMW3WmNMB7SepvbqFCmfZsRhMA7J2bHRSPYd1mGZcI5Sp99goU8W UD3gdU4w5SwRYQ8lokdXr3nfS4qrKb6lxN-RfQK0z4cIu4XlXSiH5oDWIlWjEV2ttSYInuPeKZ-LfeGKVac6b6oMU3-OGlxd3Am8Hx SJYUDSICl2oIV2QD3VHOIwdts3Z3qlEAehKdo2LIibQvJBoAhOAgNf6a9zmfGF9ATiscLp32fsILuHwKIzLqQkP-ayZ9d2unkA2Ue AcJqHlH_bBb22rK_jy_LQw/4db/qkSllVAyQLyXRT4Tv5D9aQ/h9/h001.FzsN2pzCRo1GEFFrVXfrKynxA3EvQJmq_7FjMn0365c)
【什么是回调函数?](https://link.mail.beehiiv.com/ss/c/u001.TY9TQ8C6l-P2ea\_eXiYAmIeuHxEeU1CzyezNVPyHV2EWgTSTGNGm7KeQ CdhwIxp9MlACL4y-XjOQGLNnsCFrdbGHXpUviv6QXxTLMXd79gPWkl3UbX9LGItMCbFvgHZ84Xh4MRas4d3PaAEtecpzxwGU7SLWK5ldqxps gZ0bW5j1qxQ4pomEmtFm-RCcdCz52_0U88M2DZf4Q73oaG90-3uMX_uOtcNupaWz0lePqA2uMuLZclYp0qM9LU7jNZdAWDUY_KIuOduOPztA qHVTSD68no1cFeg8wLbH-VndICE/4db/qkSllVAyQLyXRT4Tv5D9aQ/h10/h001.veL56wUdtUpeA_xLts_T6diEgd2tye0PogPMZxFDiCY)
[ECMAScript特性:正则表达式模式修饰符](https://link.mail.beehiiv.com/ss/c/u001.c2RDt9UGnMAT9r6mLVzaNv46xNQNEoYfC19XDYXTjjJLJ6xqimZHlU7b JFIVf4Qg12FJ95CRO2DX3s2oOq1fpUfmuODZlSe0eowuqsD43xt2kP4Da1fZViiT87tGxLtyrni-ucEjGjrklwOtW16k_E6ZcAjt2qnH1J5c DDkntxnJh0o4EGvTY6dGNQAD-4NmWWdDCG-TSwsZmpgRfHj0Ep6Dzqrtm-i3P91xdQO-ilu1aLWz149ppOrto2y9WosvK7ZEsgdmqEHxuhjb d—5xrerTkLl8sJpAEoh2B3gqKo/4db/qkSllVAyQLyXRT4Tv5D9aQ/h11/h001.ouFrnCBO42hPhLfMdtVW_aEN1up3X1q6cVY6a-XSg2Y)
[iframe 和 JavaScript 世界碰撞](https://link.mail.beehiiv.com/ss/c/u001.TY9TQ8C6l-P2ea\_eXiYAmEjuj9hZZ4BnyxkjkRRrpkFmpltPJ\_xOYlzgrjxF4vY 90joVlWDWf8MZ28xf_Ojs-13La12-rl1FPOTjESkVck98ajNZD6oKlo7kuGjYLVMb-HMHHdDp1XTFoMNbdRmz1qbnQaDuwq8OzvqC2WiGxJ_PACF- Z0Vi7saqT1asMckNOQNmURbalCx-yvccZtSJ9z_k8S_P_dx3MmQDN21uKNlMBXvIqHSdg4KHULzT4AU9hHRhS2tI2siwdn2aNbL5PeHr7NiiLXNQ 1EFAv0P59zXsuV91occnIDmP53dNNEdq/4db/qkSllVAyQLyXRT4Tv5D9aQ/h12/h001.fWe-bu1fpNzQnRVjRp3GG7Qrh5MEQ6k9wvfgZgKheqQ)
发布者