#​337 — May 3, 2023

Read on the Web

Together with  Kontent.ai
React Status

Vercel Introduces First-Class Storage Options — Vercel is a popular platform for deploying React apps but has lacked obvious options for data storage (indeed, they have a lot of templates for common third party systems). Now, though, they’ve partnered with Upstash, Neon, and Cloudflare to offer new first-class key/value, Postgres, and file storage options.

Vercel Inc.

The Interactive Guide to Rendering in React — This interactive guide explores why, when and how React renders and illustrates it with a series of short and well thought out animations.

Tyler McGinnis

Modular Content Management for Tech Teams with Kontent.ai — Streamline your code and scale with ease using Kontent.ai's headless CMS. TypeScript SDK, CLI, rich text resolver & strongly typed model generator for flexible and scalable content management. Try it now.

Kontent.ai sponsor

Bulletproof React: A Scalable Architecture for Production-Ready Apps — A long standing resource that continues to get updates and deserves another look. It’s not a boilerplate app or framework itself but an opinionated guide to how you could structure a large scale React app if you’re lacking for inspiration.

Alan Alickovic

Build a Type-Safe Tailwind with Vanilla Extract — A look at how a team built a type-safe alternative to Tailwind using Vanilla Extract, a way to write type-safe CSS where the final static CSS files are generated at build time.

Chris Schmitz (Highlight)

So Exactly What Are React Server Components? — There’s always room for another explanation of React Server Components, particularly one which makes few assumptions about prior knowledge and provides easy-to-follow examples.

Nick Telsan (Viget)

Server Components vs. SSR in Next.js comes at the question from a different direction.

Crafting the Next.js Website — The official Next.js site is impressive, but what went into it? One of the designers shares some of the implementation details which aren’t particularly React-y but may prove inspiring to you.

Rauno Freiberg

Creating 'Bento' Grid Layouts in React — Refers to a grid-like style of layout commonly associated with Apple product pages or Windows 8.

Julien Thibeaut

React Authentication, Simplified — In this article, we lay out a new approach to authentication (plus access control & SSO) in React applications.

Userfront sponsor

Making Animated Tooltips with React and Framer Motion — Given there’s a fairly good chance tooltips could be the only ‘documentation’ that will actually get read, why not jazz them up a little?

Oleg Wock

Building a WebGL Carousel with React Three Fiber and GSAP — The end result is visually striking.
Fabio Ottaviani

Connecting React, MUI and TypeScript Together
Snehasish Konger

🛠 Code and Tools

Introducing React Native macOS 0.71 — With this version, the macOS flavor of React Native catches up with its iOS, Android and Windows cousins, and they want to keep it that way in future. v0.71 introduces an experimental preview of Fabric (React Native’s new rendering system) and more.

Saad Najmi

Mock Service Worker 1.2: REST/GraphQL API Mocking Library — Intercepts requests which you can then mock. Capture outgoing requests using an Express-like routing syntax, complete with parameters, wildcards, and regexes. GitHub repo.

Artem Zakharchenko

Dynaboard: A Low-Code Web App IDE Made for Developers

Dynaboard sponsor

next-sitemap: Sitemap Generator for Next.js Apps — Generates sitemaps and robots.txt for static, pre-rendered, dynamic, and server-side pages.

Vishnu Sankar

Jobs

Team Lead Web Development — Experienced with Node, React, and TS? Join us and lead a motivated team of devs and help grow and shape the future of our web app focused on helping millions explore the outdoors.
Komoot

Find React Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.
Hired