Next.js 9.4, accessible animations, and rethinking SPAs

#188 — May 13, 2020

React Status

Your weekly React news digest, every Wednesday

Accessible Animations in React — An extensive look at using the prefers-reduced-motion media query (including using it with matchMedia in JavaScript) to disable animations for users who have that preference set.

josh w comeau

Next.js 9.4 Released: The React Powered Site Building Framework — Just two months after 9.3 (which was already an exciting release) comes the even more significant 9.4 which includes Fast Refresh, a new "instantaneous" hot reloading experience, plus incremental static generation where static pages can be generated or re-rendered in the background as traffic comes in.

Vercel

One Codebase. Any Platform. Just React — Build awesome apps across mobile, desktop, and web, with the React you know and love. Choose from over 100 mobile-ready components with built-in animations, gestures, and theming capabilities to fit your brand.

Ionic React sponsor

How Facebook Has Rebuilt Their Tech Stack for Facebook.com — Facebook completely rebuilt its tech stack to achieve its performance and growth goals. Here's how they've done it with React, Relay, SVG, code-splitting, and more.

Ashley Watkins (Facebook)

Kea 2.0: Production Ready State Management for React — Kea is a long standing project that was rewritten to modern React standards earlier this year and essentially offers a better abstraction between React and Redux. Here's how it works.

Marius Andra and Contributors

Dan Abramov: "Client-side-only is not sustainable." — There's a lot of context to get around here, but I know many of you will find this useful. This thread was inspired by Second-Guessing the Modern Web by Tom MacWright, a critique of modern React single page app architecture.

Dan Abramov on Twitter

💻 Jobs

Find a Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

ℹ️ Interested in running a job listing in React Status? There's more info here.

📘 Tutorials and Stories

How to Style with CSS in React — A look at the different approaches to writing CSS in React projects – including CSS-in-JS, module-based CSS, and utility-first CSS.

Robin Wieruch

▶ Discussing RedwoodJS with Tom Preston-Warner — A couple of months ago we featured RedwoodJS, a React, GraphQL, and Prisma-based framework aiming to 'bring full-stack to the JAMstack'. In this hour long podcast, Tom really gets into the details of what makes it tick.

The Shop Talk Show podcast

How to Build a Blog with Next 9.3, Netlify, and Markdown — Learn how to build a Next.js-powered Markdown blog and deploy it to the Netlify platform.

Cassidy Williams

A Better Way to Use GraphQL Fragments in React

Alec Brunelle

Intro to KendoReact UI Component Library: 6-Minute Get Started Video — Built by developers for developers, KendoReact is a commercial UI component library that speeds things up. Get started.

Progress KendoReact sponsor

How We Reduced Our React Native App Size with a Few Simple Fixes — The tale of getting an APK down from 27MB to under 14MB by optimizing their bundle, optimizing images, shrinking fonts, and more.

Hugo Grochau

My React Components Render Twice! Why? — "Many developers who use modern React wonder why their components render twice during development but this is actually happening for a good reason."

Marios Fakiolas

Comparing Ember Octane and React — This is about as detailed a comparison as you could hope for. Octane really kicks things up a notch for Ember against React, too.

Chris Garrett

🔧 Code and Tools

Interactive React Paycard: A Smooth Credit Card Form — We featured this React take on vue-interactive-paycard several months ago but it has since been refactored to use hooks and functional components.

jasminmif

scalajs-react 1.7: React, but on Scala.js — A project designed to take React into the world of Scala.js, a Scala to JavaScript transpiler (and front-end dev ecosystem of its own).

David Barri

React Pixi 2.0: Write Pixi Apps Using React's Declarative Style — PixiJS is a fast 2D Web graphics engine that abstracts WebGL and HTML5 Canvas.

Patrick Brouwer

Read Now: The Complete Guide to Distributed Tracing

Lightstep sponsor

react-hotkeys-hook: Hook for using Keyboard Shortcuts in Components

Johannes Klauss

react-circular-input: Component for Composing a Circular Range Input — Quite elegant. There's a nice demo right on the homepage.

Pete Correia

React Smooth Range Input: Attractive Input Range Selectors — A neat looking effect for selecting a number from a range.

Blue Bill