#165 — November 20, 2019

Read on the Web

React Status
Your weekly React news digest, every Wednesday

Reactime 3.0: The Time Traveling State Debugger — It was only three months ago we first featured this Chrome dev tool for tracking and visualizing state changes in React application but there’s a major new version out. It lets you record & store snapshots of your app’s state and walk through them to debug, etc.

Chris Flannery

Build Your Own React — An interestingly presented walkthrough of creating your own React-a-like from scratch. You’ll need some time (and be gentle with the scrolling) but this is an interesting way to present such a walkthrough.

Rodrigo Pombo

Tried & True Productivity Tips from 25 React Experts — The KendoReact team curated the top productivity tips of 25 React experts, from smart ways to hit the ground running with React to advanced productivity hacks. Includes ideas from Emma Wedekind, Kent C. Dodds, vjeux and many more. Check them out.

Progress KendoReact sponsor

Meet doctor: A New React Native Command — The new doctor command helps out with getting started, troubleshooting and automatically fixing errors with your React Native development environment.

Lucas Bento

React Admin 3.0: An Admin Panel for B2B Applications — A framework for building browser-based ‘admin’ apps on the backend of your choice (REST, GraphQL, etc. all fine). It uses Material UI, Redux, React Router, and similar favorites. There’s a demo if you want to see it live. Used to be known as admin-on-rest.


Facebook and Microsoft Partnering on Remote Development — Facebook is working to make VS Code to be the ‘IDE of choice’ within the company, migrating over ideas from its Atom-based Nuclide project (which is now duly ‘retired’). This isn’t exactly React news, but since most of the React team are based at Facebook, it’ll have implications for them, and for you if you used Nuclide too.


💻 Jobs

Senior Software Engineer at Getty (Los Angeles, CA) — Build fantastic tools and interfaces at one of the world's most prestigious cultural heritage orgs using Linked-Open-Data, Python, Structured-CMS, Vue.js.

J. Paul Getty Trust

Find a Job Through Vettery — Make a profile, name your salary, and connect with hiring managers from top employers. Vettery is completely free for job seekers.


📘 Tutorials and Stories

Authenticating Your First React App (with Auth0) — I was at a hackathon last weekend where a team lamented how tricky they found it to hook into Auth0 (a popular ‘auth as a service’ platform). This tutorial would have come in handy, as it covers authenticating a React app using Auth0’s new SPA SDK, React Context, and hooks.

Chris Sevilleja

How to Use Gitpod in a create-react-app ProjectGitpod is a cloud-based GitHub-focused IDE that runs right in the browser.

Jerome Wu

Animating Between Units with React Spring — Explores the problem of animating between different unit types (e.g. px and vh) and offers a solution for overcoming it.

Konstantin Lebedev

Serverless Handbook for Frontend Engineers — Cool idea for a quick project? Need a backend and don’t know how? Serverless Handbook shares recipes you can use today.

Swizec Teller sponsor

Combining React Hooks with Azure App Insights — A look at how to create a custom React Hook to work with Microsoft’s App Insights, Azure’s observability system.

Aaron Powell

Six Patterns for Microfrontends — An overview of microfrontend patterns: advantages, drawbacks and implementation.

Florian Rappl

A Beginner’s Guide to Creating an Interactive List with React — An introductory article on building an interactive list using react-sortable-hoc, complete with sample code here.

Frank Zickert

How to Use Sass and Styled Components in a React App — Someone suggested this golden oldie and we decided to oblige as it’s good.

Tim Smith

🔧 Code and Tools

react-datasheet: Excel-Like Data Grid (Table) Component — A simple React component to create a spreadsheet. There’s a demo here.

Nadim Islam

styled-breakpoints: A Way to Create Breakpoints in Styled Components — That’s breakpoints in the visual ‘responsive design’ sense, not debugging sense 😄 Works with Emotion, Linaria, and Astroturf as well.

Maxim Alyoshin

Grommet: Responsive and Accessible Mobile-First Components for React — It’s been around for a few years, but it’s mature, reached v2 this year, and continues to add features, including a new list component and improved TypeScript support just this month.

Grommet Project

Test-Driven React: Optimize Your Workflow, Achieve Coding Zen

The Pragmatic Bookshelf sponsor

Reactive Search: React and React Native Components for Elasticsearch — Over 25 components including lists, ranges, search UIs, result displays, etc.


use Simple State: A Simple, Dependency-Free State Manager using Hooks

Josh Jahans