--- title: "Is component testing the future of UI testing?" publication: "React Status" issue: 398 published_at: "2024-09-04" canonical_url: "https://react.statuscode.com/issues/398" --- Plus Framer Motion adds RSC support, Redwood 8 gets background jobs, and more React Email components. | #​398 — September 4, 2024 [Read on the Web](https://react.statuscode.com/issues/398) Together with [![StackBlitz\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_3744,h_768/e_make_transparent/co_white,e_outline:65/yffcoeewerendwcotxkg.png)](https://tutorialkit.dev/?utm_source=react&utm_medium=primary) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/vaglh4dclj9dzffiieta.jpg)](https://redwoodjs.com/upgrade/v8) [Redwood v8.0 Released](https://redwoodjs.com/upgrade/v8) — A long standing, opinionated React & GraphQL (and/or RSC) full-stack framework that covers all the bases for professional dev teams with best-in-class tool support. v8.0 introduces a background jobs system, Docker support, and easier SSR and RSC setup. If you're unfamiliar with Redwood, you can [learn more about its future here.](https://redwoodjs.com/blog/rsc-now-in-redwoodjs) Redwood Team [Bulletproof React: A Scalable Architecture for Production-Ready Apps](https://github.com/alan2207/bulletproof-react) — 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 Next.js versions,** using both app router and page router approaches. Alan Alickovic [![\](https://copm.s3.amazonaws.com/9ad43c9c.png)](https://tutorialkit.dev/?utm_source=react&utm_medium=primary) [Create Interactive Tutorials in the Browser](https://tutorialkit.dev/?utm_source=react&utm_medium=primary) — TutorialKit enables you to create interactive tutorials instantly without building or managing any backend infrastructure. StackBlitz sponsor [How to Use React Compiler](https://www.freecodecamp.org/news/react-compiler-complete-guide-react-19/) — The [compiler](https://react.dev/learn/react-compiler) feature in React 19 is generating a lot of buzz — this “complete guide”, as described by this author, covers much of what you'll need to get started. Tapas Adhikary **IN BRIEF:** - `shadcn` has a new CLI tool ([explained here on X](https://x.com/shadcn/status/1829646528149143992)) where you run `npx shadcn init` to add shadcn components and styling to an app. It supports all major React frameworks out of the box. - 🤖 Lee Robinson shows off [▶️ the latest enhancements to Vercel's v0](https://www.youtube.com/watch?v=zA-eCGFBXjM), an AI-based tool for creating apps and components from prompts you supply. - 🇺🇸 [React Miami 2025](https://www.reactmiami.com/) takes place next April in Florida and [the call for speakers](https://docs.google.com/forms/d/e/1FAIpQLSeAwHwwt-2OX8Ke6czZyNFbXXAmi2ZoTwP7oLtULAQ21tLuvw/viewform) is open till December. [Why Build-Time Components Are a Leap Forward for Content Sites](https://codehike.org/blog/build-time-components) — Zeno Rocha, of Resend, [says](https://x.com/zenorocha/status/1831301594539057347) that _“this is simply the best explanation of how to compile Markdown in React apps.”_ High praise indeed. Rodrigo Pombo [Component Testing in Storybook](https://storybook.js.org/blog/component-testing/) — Storybook’s lead manager says that _“after seeing the same patterns again and again, we are betting on Component Testing as the future of UI testing”_ and sets out to show us why he thinks they’re the perfect complement to end-to-end and unit tests. Michael Shilman 📄 [Creating a PS1-Inspired Jitter Shader with React-Three-Fiber](https://tympanus.net/codrops/2024/09/03/how-to-create-a-ps1-inspired-jitter-shader-with-react-three-fiber/) – A retro feel with a modern approach. Oguzhan Tufenk 📄 [Create Accessible Charts in React: A Guide to Inclusive Data Visualization](https://dev.to/tinyoctopus/how-to-create-accessible-charts-in-react-a-guide-to-inclusive-data-visualisation-1a4) – Using [HighCharts](https://www.highcharts.com/), specifically. Tiny Octopus 📄 [How to Handle Errors in Next.js for Node with the App Router](https://blog.appsignal.com/2024/08/28/how-to-handle-errors-in-nextjs-for-node-with-the-app-router.html) Antonello Zanini 📄 [How to Build Fast Surveys with Next.js and SurveyJS](https://www.sitepoint.com/nextjs-surveyjs-lightning-fast-surveys/) Gavin Henderson 🛠 Code, Tools & Libraries [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/kwzjhrs6fx9r0ffq3asq.jpg)](https://www.framer.com/motion/) [Framer Motion: Fluid Animations & Motion in React](https://www.framer.com/motion/) — A long-popular, open source motion library for React, made by Framer. **As of this week’s v11.4 release, there’s support for React Server Components,** including new entrypoints for `motion` and `m` components. Framer [Typist 7.0: Tiptap-Based Rich Text Editor Component](https://typist.doist.dev/?path=/docs/readme--docs) — Simple and opinionated. You can try several examples in the sidebar. Well suited for basic rich text situations like writing comments or messages and has a single-line mode. Doist 📰 Classifieds [Build a team-based task manager with Next.js](https://go.clerk.com/ENbc6Z6) using multi-tenancy and role-based access control. --- 🆕 [Reactile:](https://www.reactile.net/?utm_source=reactstatus) A new approach to React-based web apps. Create your own views. Let it handle your windows and widgets in a single browser tab. --- ⚛️ [Join 800+ devs at React Summit 2024!](https://reactsummit.us/?utm_source=Newsletter&utm_medium=reactstatus) Nov 19 & 22, West Planetarium, NY. 50+ speakers, networking, workshops & more. Use [React15](https://reactsummit.us/?utm_source=Newsletter&utm_medium=reactstatus) for 15% off! [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/jqxhg5xvgunhkjzcm5xo.jpg)](https://resend.com/blog/react-email-3) [React Email 3.0: New Components for Rendering Emails](https://resend.com/blog/react-email-3) — [React Email](https://react.email/) is a suite of unstyled components for creating emails using React and TypeScript. v3.0 is a _huge_ update, now with [54 components](https://react.email/components), support for React 19, and huge build time improvements. Resend [Introducing Belt: A New Tool for Starting React Native Apps](https://thoughtbot.com/blog/introducing-belt-your-new-favorite-tool-for-starting-react-native-apps) — A CLI tool for starting a new React Native app that takes various mundane decisions away from you and uses tooling and conventions established by a productive app development team. Thoughtbot [Goxygen: Quickly Generate a Go Backend for a JS Project](https://github.com/Shpota/goxygen) — A tool that sets up a new [Go](https://go.dev/)-based project with Angular, React, or Vue in the front-end, and Docker and Docker Compose files to make it all work. Sasha Shpota [Rockpack 4.4: An Alternative React App Builder](https://github.com/AlexSergey/rockpack) — Akin to _Create React App_ of yesteryear, the goal is to get project setup time as low as possible, but Rockpack holds different opinions around how far to take things and packs in a lot of ideas including server side rendering, linting (now with ESLint 9 support), and testing. Alex Sergey - [Tinybase 5.2](https://github.com/tinyplex/tinybase/releases/tag/v5.2.0) – Powerful reactive data store for local‑first apps. Now with Postgres support (which can even work in-browser!) - [Astro 4.15](https://astro.build/blog/astro-4150/) – The popular content site framework stabilizes Astro Actions, a solution for fully type-safe backend functions. - [React Native Gesture Handler 2.19](https://github.com/software-mansion/react-native-gesture-handler) – Exposes platform native touch APIs. - [Plasmo 0.89](https://github.com/PlasmoHQ/plasmo) – Like Next.js but for building browser extensions. - 📊 [Tremor 3.18](https://npm.tremor.so/) – React library for building dashboards fast. - [rc-tree 5.9](https://tree-react-component.vercel.app/) – A basic tree-view component. Curated by Peter Cooper and Terence C. Gannon. A **[Cooperpress](https://cooperpress.com/)** publication. [Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom