React Newsletter #301

The story of React, MDX 2, and How React Server Components Work


This week's issue is sponsored by Unlayer.

Unlayer is a simple JavaScript SDK that lets you add a white label drag-and-drop email editor to your SaaS app in 5 minutes. They've even got specific React components, so you can seamlessly integrate it with the rest of your app.

👉 Check it out (for free).


News

The Story of React

Developers really didn't like React when it first came out, because it was completely different than anything that had come before it. So how did React go from being despised by most developers, to being universally loved and (mostly) respected? To answer that, I spent way too long making this 10-minute video, but I think you'll really like it.

MDX 2

This v2 release includes improved syntax to make it easier to use markdown in JSX, new-and-improved JSX support for any runtime, new integrations for esbuild,Rollup and Node.js, and lots more.


Articles

How React server components work: an in-depth guide

Chungwu from the Plasmic Team wrote a great article that covers just about everything you'll need to know about React Server Components, a new feature coming to React 18.

Not Another Framework!

Ryan Florence (Remix co-founder) writes about how Remix is more than just another framework and why it's worth learning. "When you work in Remix, you're mostly working with standard web APIs... This knowledge will not just help you build great user experiences in Remix, but it will help you outside of Remix today and in the future."

The "best" way to manage icons in React.js

Icons are everywhere. In this article, Ben Adam evaluates the three most common ways to manage icons in React and the tradeoffs of each approach. Then, he shares why Inline SVGs using sprites give you the best performance to experience tradeoff.

From Rust to TypeScript: Lifetime Analysis for React Component Architecture

Alan Darmasaputra writes about how the concept of object lifetime has always existed in programming, but has historically been used with languages like Rust and C++. In this article, he shares how a similar analysis method is actually useful to architect React components and to more precisely determine which state goes where.

Figma Storybook plugin sneak peek

Dominic from the Storybook team shares a sneak peek of their new Figma plugin, Storybook Connect, which helps keep designers and developers in sync by connecting designs to stories.


Tutorials

New Relic and Formidable Team Up to Make Custom Visualizations Even Easier

In this article, the New Relic team writes about how they partnered up with Formidable Labs (the organization behind React OSS projects like Spectacle, urql, and more) to integrate charts from their super popular charting library, Victory, directly into the New Relic One observability platform. [sponsored]

Creating a Schema-Based Form System

Tania Rascia walks you through a simple example she made that represents a better approach to creating frontend forms that feels less repetitive and tedious.

How to Build a Full Stack Application With Supabase, React, and Tailwind CSS in Nextjs

Idris Olubisi demonstrates how to build a full stack app that connects a React frontend to Supabase -- an open-source, PostgreSQL-based serverless database.


Projects

Recoil 0.6

This new release from Recoil (a React state management library created by an internal team at Meta) introduces improved support for React 18 features like concurrent rendering and transitions, along with new APIs, fixes, and optimizations.

ui-box

A low level CSS-in-JS solution that focuses on being simple, fast and extensible. All CSS properties are set using simple React props, which allows you to easily create reusable components that can be enhanced with additional CSS properties.

React Zorm

A type-safe <form> for React using Zod, a popular schema validation tool for TypeScript.

made with ❤️ by ui.dev