#188 — May 13, 2020

Read on the Web

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 StylePixiJS 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