React Newsletter #376

Demystifying Server Components, Beyond browsers, and a new React UI library


Today's issue is sponsored by Callstack

Their Super apps training program will help you learn how module federation allows separate teams to work together without blocking each other. Sign up for the 1-hour super app development training, and get the first two lessons for free.


Articles

Demystifying React Server Components with NextJS 13 App Router

A web app and series of in-depth articles that demonstrates the concepts and code behind Next 13's implementation of server components.

How we built a GPT code agent that generates full-stack web apps in React & Node.js, explained simply

Martin Sosic wrote about how he and his team at Wasp created a GPT web app generator, which lets you describe the web app you want to create, then spits out a full-stack codebase, written in React, Node.js, Prisma, and Wasp - available to download and run locally.

Mobile app monitoring in minutes with observability-driven dashboards

In this technical article, the New Relic team shows how you can transform your monitoring strategy with the Mobile Crash Analytics and Mobile Network Performance dashboards -- so you'll never have to wonder why your app crashed ever again. [sponsored]

Beyond Browsers: The Longterm Future of JavaScript Standards

Mary Branscombe writes about how JavaScript's scope (and to a lesser extent, React's) is expanding beyond the browser, and discusses where the opportunities to add new features are coming from.


Projects

Prismane

A new React UI library with over 100 components that's "built with ease of use in mind." Some of its key features include a custom styling system, dynamic theming out of the box, and built-in support for dark and light themes.

react-query-nextjs package for the app directory

In his tweet thread about this experimental new package, React Query maintainer TkDodo, explains how this package allows you to "wrap your app in the <ReactQueryStreamedHydration> component to enjoy direct useQuery fetches on the server with suspense, which streams to the client." Here's an example from their docs.

Prettier 3.0

The biggest change in this new release is the migration to ES Modules for all Prettier source code (but you can still use it as CommonJS when using Prettier as a library). They also added improved plugin support and a few other small, relatively painless breaking changes.

typescript-react-style-guide

A concise set of conventions and best practices used to create consistent, maintainable code. Created by Marko Kosir.

virtua

A zero-config, fast, and small virtual list and grid component for React.


Videos

Testing Library: everybody uses it, but nobody understands it

In this 27-minute talk at ReactNext 2023, Matan Borenkraout (a testing-library maintainer and SWE at Microsoft) gives an in-depth look into the testing-library ecosystem, including its structure and foundations. He shows how it can be used in every framework, and how you can use it in both Node and browser environments to write more maintainable tests.

made with ❤️ by ui.dev