#411 — December 18, 2024
🎄 This week we’re taking a look back at how things went in the React world in 2024, as well as revisiting the most clicked items of the year, in case you missed them at the time.
We’re taking a Christmas break for two weeks and will be back on January 8, 2025, so we hope you have a Merry Christmas and a Happy New Year!
__
Peter Cooper and the Cooperpress team
Together with
React Status
🗓️ Top React Developments & Items of 2024
React had a good 2024, though it felt quieter than some years in terms of big developments and updates. Every technology has these moments, especially when it’s dominant in its space, but nonetheless, a variety of things did happen:
-
2024 was framed by the React team’s React Labs February update where they confirmed that React Compiler was under active development and that React 19 was very much on the way.
-
Robin Wieruch started the year by reflecting on React trends in 2024 and, with hindsight, pretty much hit the mark.
Introducing Authentication Support for React Router — Clerk announces beta support for React Router, including pre-built UI components, server utilities, and low level utilities for any of your custom flows. You can use React Router both as a framework or library with Clerk.
Clerk sponsor
-
React Conf 2024 took place in the outskirts of Las Vegas in May. Here’s a recap of the event.
-
React Native’s New Architecture went live in React Native 0.76.
-
Remix and React Router underwent a merger of sorts and React Router v7 landed in November.
-
Next.js 15 was released with React 19 and React Compiler support (and even more so in Next.js 15.1).
-
We got some new React performance related tools in the shape of React Geiger, React Scan, and Million Lint.
-
🕹️ A full-scale React powered game, Athena Crisis, available on Steam, went open source.
-
Material UI v6 arrived just in time to celebrate its 10th birthday.
-
The final release of React v19 rounded out the year, landing just over a week ago now.
🥇 Top Articles of the Year
Now for a quick look at the top six links we included in the newsletter (skipping things already mentioned above), based on reader engagement:
1. How to Start a React Project in 2024 — It seems appropriate we started out 2024 with a look at the pros and cons of a few approaches to kicking off a React app. I bet we’ll be getting a 2025 edition soon too!
Robin Wieruch
2. React 19 Cheat Sheet — From Kent C Dodds of Epic React fame came this part cheat sheet and part reminder of some of the things you can do in React 19.
Kent C. Dodds
3. Why Use Redux Today? — The maintainer of the popular Redux state management library gave a talk at React Summit 2024 where he gave a thorough introduction to the history of Redux, how it grew, and the benefits it continues to provide. There are detailed slides if you’d prefer not to watch the video.
Mark Erikson
4. Enhancing The New York Times’ Web Performance with React 18 — Late in 2023, the team at The New York Times set out to take full advantage of React 18 on its flagship news site. This was an interesting case study looking at the challenges faced in upgrading, and the significant benefits they managed to take advantage of.
Ilya Gurevich (NYT)
5. Component Composition is Great, BTW — A well-regarded author writes about using component composition to avoid conditional rendering for mutually exclusive states (and why we should all be doing the same).
Dominik Dorfmeister (AKA TkDodo)
6. Bulletproof React: A Scalable Architecture for Production Apps — A popular opinionated guide to how you can structure a large scale React app. It’s had a few major updates over the years, but notably now includes a Next.js version, with both app router and page router approaches.
Alan Alickovic
⚙️ Top Repos of the Year
1. Next.js SaaS Starter: A Next.js Template for Webapps — A starter template for building a SaaS-style webapp using Next.js with support for authentication, Stripe integration, and a dashboard for logged-in users. It uses Postgres and Drizzle for the database and UI elements based on shadcn/ui and Tailwind.
Lee Robinson (Vercel)
2. Functional UI Kit: A Unified Figma and React UI Component Kit — Despite many attempts, it doesn’t feel like anyone has really perfected the Figma - React connection yet, but this was a good attempt to bridge the design/code gap, funded by Figma’s Community Creators Fund. No updates in several months, however..
Alex Yakir et al.
3. MistCSS: Build Components with Just CSS — Forget about CSS-in-JS, what about JS-from-CSS? This approach provided a way to compile CSS-only React components into a TypeScript equivalent, but as of the recent v1.0 release it went a step further and doesn’t generate or require any JavaScript at all.. A neat idea.
Typicode
4. assistant-ui: React Components for AI Chat — It doesn’t just give you the interface components, but has integrations for Vercel AI, Langchain, and talking to other common LLM APIs (e.g. OpenAI’s), enabling you to build your own in-house AI chat system quickly. Examples.
Simon Farshid
5. Puck: A Self-Hosted Drag-and-Drop Editor for React — Sitting somewhere between an old-school WYSIWYG-powered CMS and a headless one, Puck enables content teams to author content using real React components. Want to see a demo? Of course.
Measured
🎄 We’re now off for two weeks for our Christmas break. Merry Christmas if you celebrate too. We return on Wednesday, January 8, 2025.
Curated by Peter Cooper and Terence C. Gannon.
A Cooperpress publication.
#411 — 2024 年 12 月 18 日
🎄 本周我们将回顾 2024 年 React 世界的发展情况，并回顾当年点击次数最多的项目，以防您当时错过了它们。
**我们将圣诞节休假两周，并将于 2025 年 1 月 8 日回来，**所以我们希望您圣诞快乐，新年快乐！
__
彼得·库珀和 Cooperpress 团队
连同
[](https://react. statuscode.com/link/163674/5d0bbb4a61)
反应状态
🗓️ 2024 年 React 顶级开发和项目
React 的 2024 年表现不错，尽管在重大开发和更新方面感觉比前几年安静一些。每项技术都有这些时刻，尤其是当它在其领域占据主导地位时，但尽管如此，还是发生了各种各样的事情：
-
2024 年是由 React 团队的 React Labs 2 月更新 确定的，他们确认 [React Compiler](https://react.statuscode. com/link/163676/5d0bbb4a61）正在积极开发中，React 19 即将推出。
-
Robin Wieruch 在新年伊始就反思了 2024 年的 React 趋势，事后看来，他几乎击中了要害。
[](https://react.statuscode.com/link/163674 /5d0bbb4a61)
React Router 身份验证支持简介 — Clerk 宣布对 React Router 提供测试版支持，包括预构建的 UI 组件、服务器实用程序，以及适用于您的任何自定义流程的低级实用程序。您可以将 React Router 用作 Clerk 的框架或库。
文员赞助人
-
React Conf 2024 于 5 月在拉斯维加斯郊区举行。 以下是该事件的回顾。
-
React Native 的新架构 在 React Native 0.76 中上线。
-
Remix 和 React Router 进行合并 某种和 [React Router v7](https://react.statuscode.com/link/ 163682/5d0bbb4a61) 于 11 月登陆。
-
Next.js 15 已发布，支持 React 19 和 React Compiler（[Next.js 15.1](https:// react.statuscode.com/link/163684/5d0bbb4a61))。
-
我们获得了一些新的 React 性能相关工具，例如 React Geiger、[React Scan](https://react.statuscode.com/ link/163686/5d0bbb4a61），以及百万棉绒。
-
🕹️ 一款全面的 React 支持游戏，雅典娜危机，可在 [Steam](https://react.statuscode.com/link/ 163689/5d0bbb4a61），开源。
-
Material UI v6 及时发布，庆祝其 10 岁生日。
-
React v19 的最终版本 为今年画上了圆满的句号，于一周多前发布。
🥇 年度热门文章
现在，根据读者参与度，快速浏览一下我们在时事通讯中包含的前六个链接（跳过上面已经提到的内容）：
- 如何在 2024 年启动 React 项目 — 我们从 2024 年开始看看优点似乎是合适的以及几种启动 React 应用程序的方法的缺点。我打赌我们很快也会推出 2025 年版本！
罗宾·维鲁奇
- React 19 备忘单 — 来自 Epic React 的 Kent C Dodds .com/link/163694/5d0bbb4a61）这部分备忘单和部分提醒您可以做的一些事情因此而出名在 React 19 中。
肯特·C·多兹
- 为什么今天使用 Redux？ — 流行的 Redux 的维护者.com/link/163696/5d0bbb4a61）状态管理库在 React Summit 2024 上发表了演讲全面介绍 Redux 的历史、它的发展以及它继续提供的好处。如果您不想观看视频，有详细的幻灯片。
马克·埃里克森
- 利用 React 18 增强 《纽约时报》’ 的 Web 性能 — 2023 年末，* 团队《纽约时报》* 开始在其旗舰新闻网站上充分利用 React 18。这是一个有趣的案例研究，着眼于升级中面临的挑战以及他们设法利用的显着优势。
伊利亚·古列维奇 (纽约时报)
- 组件组合很棒，顺便说一句 — 一位知名作者撰写了有关使用组件组合来避免互斥条件渲染的文章州（以及为什么我们都应该这样做）。
多米尼克·多夫梅斯特（又名 TkDodo）
- Bulletproof React：生产应用程序的可扩展架构 - 一个关于如何构建大型 React 应用程序的流行指南。多年来它进行了一些重大更新，但值得注意的是现在包括 Next.js 版本，同时具有应用路由器和页面路由器方法。
艾伦·阿利科维奇
⚙️ 年度最佳回购协议
1. Next.js SaaS Starter：适用于 Web 应用程序的 Next.js 模板 — 用于构建 SaaS 样式 Web 应用程序的入门模板使用支持身份验证、Stripe 集成和登录用户仪表板的 Next.js。它使用 Postgres 和 Drizzle 作为基于 shadcn/ui 和 Tailwind 的数据库和 UI 元素。
李·罗宾逊（维塞尔）
- 功能性 UI 套件：统一的 Figma 和 React UI 组件套件 — 尽管进行了多次尝试，但它并没有感觉还没有人真正完善 Figma - React 连接，但这是弥合设计/代码差距的一次很好的尝试，由 Figma 的 [社区] 资助创作者基金。](https://react.statuscode.com/link/163703/5d0bbb4a61) 然而，几个月没有更新..
亚历克斯·亚基尔等人。
- MistCSS：仅使用 CSS 构建组件 — 忘记 CSS-in-JS，那 JS-*from 呢？ *-CSS？这种方法提供了一种将纯 CSS React 组件编译为 TypeScript 等效组件的方法，但从最近的 v1.0 版本开始，它更进一步，根本不生成或不需要任何 JavaScript。这是一个绝妙的想法。
典型代码
4. assistant-ui：用于 AI 聊天的 React 组件 — 它不仅为您提供界面组件，还提供集成适用于 Vercel AI、Langchain，并与其他常见的 LLM API（例如 OpenAI）进行交互，使您能够快速构建自己的内部 AI 聊天系统。 示例
西蒙·法希德
- Puck：React 的自托管拖放编辑器 — 介于老式 WYSIWYG 之间Puck 是一款有动力的 CMS 和无头 CMS，它使内容团队能够使用真正的 React 组件来创作内容。想看演示吗？ 当然。
测量的
🎄 我们现在有两周的圣诞假期。圣诞快乐，如果你也庆祝的话。我们将于 2025 年 1 月 8 日星期三返回。
由彼得·库珀和特伦斯·C·甘农策划。
Cooperpress 出版物。
发布者