#121 — January 16, 2019

Read on the Web

react status

Lucid: A React-GraphQL Debugging Tool — A Chrome-based developer tool designed to help you debug React and GraphQL-powered apps.


Awesome React: Almost 1000 Curated React Projects and Resources — A frequently updated and in-depth collection of articles, and resources relating to the React ecosystem that’s now almost 1000 items strong. (If anyone fancies adding this newsletter, though… 😄)

Nick Raienko

The Complete ⚛️ React Learning Path — Take your React to the next level to find out what it is fully capable of with this comprehensive learning path.

Frontend Masters sponsor

React 16.8.0-alpha.0 Available — If you want the latest possible build with hooks enabled, here you go. Further good news too: “We’re back from vacations and are focused on getting Hooks into a stable release as our biggest priority.”

🐦 Dan Abramov on Twitter

Styled Components, 'The Styling Library You Don’t Want to Be Without'“There are a ton of ways to style components in React. This is probably my favourite way of doing it and it differs somewhat conceptually from other ways of styling.”

Christoffer Noring

Support for Hooks Has Landed in a Build of the React DevTools — You need to be using the alpha version of 16.8.

🐦 Brian Vaughn on Twitter

💻 React Jobs

UI Engineer, Design Systems (San Francisco) — As a UI Platform Engineer at Uber, you'll be building Base UI, Uber's design language for all web applications at Uber and beyond.


Find A Job Through Vettery — Vettery specializes in developer roles and is completely free for job seekers.


📘 Tutorials

Build a Password Strength Meter in React — A nice way to give users visual feedback as to the strength of their password.

James King

Animated Input Label with Chrome Autofill Detection in React — While autofill can be useful for users, there may be times you need to react to this occurring in your app.

Jason Brown

📈Data-Driven Guide to Engineering Leadership

GitPrime sponsor

Building Highly Performant Masonry Layouts with Gatsby.js — The journey of creating a responsive image gallery which works without client-side JavaScript, but still using React via Gatsby.js.

Kristóf Poduszló

How to Get Started with The React Context API — How to use the React Context API to change the theme in an app.

Scott Spence

🔧 Code and Tools

Storybook 4.1: The UI Component Developer Workshop — Storybook is a popular and powerful tool for working on UI components and the latest release boosts startup time and extends support to all versions of React 15.x+.

Michael Shilman

React Simple Animate: UI Animation Made Simple — Inline style React animation made easy.

Bill Luo

Simplify Event Tracking with a Single API — Collect data once with Segment and send it to 200+ tools. Get a free developer account.

Segment sponsor

react-top-loading-bar: A Simple YouTube-Like React Load Progress Component

Klendi Gocci

React Content Loader: An SVG-Powered 'Content Loading' Placeholder Component

Danilo Woznica

react-player-controls: A Set of Modular React Components for Building Media Player Interfaces

Alexander Wallin

Material-UI: React Components That Implement Google's Material Design3.9.0 is out introducing a new Link component (demo here).