#145 — July 3, 2019

Read on the Web

React Status
Your weekly React news digest, every Wednesday

'Why Did I Have Difficulty Learning React?' — Posts where popular Web developers admit that they don’t always find things simple always seem to go down well.. Brad Frost wrote about this last year. This time, Jonathan Snook tries to tease out just why it took so long to feel comfortable with React.

Jonathan Snook

How We Built A Component Library People Enjoy Using — The tale of how a few engineers at Sprout built a design system and component library using Styled Components. A must-read if you’re working on a similar undertaking.

Chase McCoy

Simplify Customer Data with a Single API — Integrate 250+ tools with the flip of a switch. Power your entire tech stack with the same data. Segment is all you need — in one tool.

Segment sponsor

▶  Speed Coding a Tinder-Like React App in 59 Minutes — I always love to see how other developers approach new projects, and you might learn something from this attempt too.

Karl Hadwen

react-movable 2.2: Drag and Drop for Lists and Tables — Vertical drag and drop for lists and tables with no additional markup needed. Accessible and touch device friendly, and several key releases recently with features like being able to remove items by dragging them out of bounds. Want to try it out? Live demos here.

Vojtech Miksu

'I Think We Need to Rethink How Focus Works in React.' — An interesting thread on the official React GitHub repo about exploring new approaches to ‘focus’ (in the sense of elements or controls having focus in a UI).

Dominic Gannaway et al.

💻 Jobs

React Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world's leading brands.

X-Team

Land a New Dev Job on Vettery — Vettery specializes in tech roles and is completely free for job seekers.

Vettery

📘 Tutorials and Stories

Avoiding Derived State in React“Deriving state at render time and using memoization to keep it performant where needed should help you tame any derived state problems you encounter.”

Ben McCormick

Building Reusable Components — A brief, introductory look at making a component more reusable by making it more generic and less tied to specific logic.

Nirmalya Ghosh

Learning About React Hooks and the Context API by Building a Recipe Search App

Ola John Ajiboye

📕 20 Patterns to Watch for in Engineering Teams

GitPrime sponsor

How to Build An Anonymous Chat App with React Bootstrap and CometchatCometchat is a commercial service for building chat apps, though it’s free up to a certain level.

Idorenyin Obong (Cometchat)

Forget About Component Lifecycles and Start Thinking in Effects

Sebastian De Deyne

Five Android and iOS UI Design Guidelines for React Native — Why UI designers should follow platform specific guidelines while designing for multiple platforms.

Rakshit Soral

🔧 Code and Tools

React-Select: A Flexible Select Input Control — With multiselect, option group, animation, and autocomplete support. GitHub repo.

Jed Watson

RIFM: Transform Any Input Component Into Formatted or Masked Input — A way to transform input components into formatted/masked inputs.

Ivan Starkov

Fast, Intuitive Project Management Tool for Software Teams — Clubhouse is simple and flexible. Integrates with GitHub, GitLab, Slack, and more. Offers a powerful API. Try it free.

Clubhouse.io sponsor

React Compound Slider: A 4KB Slider Component“a stable platform for creating slider components with a very small impact on bundle size.” By ‘slider components’ it means components like these for defining ranges or picking values from a range.

Steve Hall

Rest Hooks: Delightful Data Fetching for React

Coinbase

React-PhoneNr-Input: An Intuitive Phone Number Input — .. with a country selector for international and national phone numbers.

Kai Hotz