#191 — June 3, 2020

Read on the Web

🖤 It's time to speak up, donate or even just stream a fundraising video, because Black Lives Matter. Our thoughts are with everyone fighting for these causes. We've also donated to the Stephen Lawrence Charitable Trust and the NAACP.

React Status
Your weekly React news digest, every Wednesday

The React Core Team Joins The Facebook Employee Walkout“Facebookʼs recent decision to not act on posts that incite violence ignores other options to keep our community safe.” The React team specifically suggests the Equal Justice Initiative as a target for your support.

Dan Abramov on Twitter

Analyzing the Performance of Notion's Electron App — A fascinating deep dive into analyzing the performance of a desktop packaged React app for a popular note taking service and some basic optimizations that can be done.

Ivan Akulov

Scale Your Software Projects Without Losing Speed — See how Shopify used Buildkite CI/CD to scale from 300 to 1800 engineers while keeping build times under 5 minutes.

Buildkite sponsor

The Rise of React (And Its Growing Pervasiveness) — In the most recent issue of Increment, a noted journalist (for WIRED and The Economist) takes a wide-angle look at how React came to be one of the predominant frontend frameworks powering today’s web and the attendant implications ― both positive and negative ― for the future.

Chris Stokel-Walker (Increment)

React Tutorials Now on The Mozilla Developer Network — While it may be the world does not need more generic React tutorials, when an industry heavyweight decides to jump in it’s still newsworthy. We’re impressed by what we see in MDN’s Getting Started with React tutorial, for example.

Mozilla Developer Network

Reparenting is Now Possible with React — The popular and compelling UI artefact of dragging-and-dropping often requires reparenting which―according to renown React authority Dan Abramov― “there are no plans”. But here’s a solution which will deliver most of what you need.

Paolo Longo

💻 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

Senior Software Engineer — Save Lives & Make an Impact — We use Node/TS/React & ML to provide crisis support via SMS. Help us scale globally with a focus on privacy and security.

Crisis Text Line

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

📘 Tutorials and Stories

Building Reusable React Components Using Tailwind — Ways to build reusable React components using the popular utility-first CSS framework Tailwind.

Tilo Mitra

How to Deploy a React App on AWS Using the AWS CDK — The AWS Cloud Development Kit enables Amazon’s cloud infrastructure to be provisioned with programming languages you likely already know. Here’s an end-to-end, real-world, well-illustrated walkthrough which uses the CDK to deploy a sample React app on the popular cloud platform.

Andrew Bestbier

How to Add Search to a React App with Fuse.js — Don’t know exactly that for which you are looking? Then your React app could benefit from fuzzy search. This tutorial goes through a simple example using the well-regarded, lightweight, dependency-free Fuse.js library.

Colby Fayock

Check Out the Top Productivity Tips of 25 React Experts

Progress KendoReact sponsor

Four Ways to Conditionally Render in React — For many developers, effective UI design means only showing those things which the user wants or needs to see based on certain conditions. Here’s an overview of four ways to control what gets seen and what doesn’t.

Piero Borrelli

▶  Let's Build an Image Classifier with Node, Tensorflow and React — The chilled out background music makes this feel like a spa experience but.. there is something genuinely quite nice about this screencast.

Tim Tam

React Hooks: Now What Do I Do? — So you’ve been through the official documentation on React Hooks. You think you understand the concept. It all seems to make sense. But what’s lacking is an integrated, holistic feel for how they are best employed. This article pulls it all together.

David Polites (Expedia)

🔧 Code and Tools

Windups: A Typewriter Effect for React — You can control the speed, trigger animations/sounds, etc. GitHub repo.

Sam Gwilym

Hooked On Redux: The Power of Redux Made As Simple as the useState Hook — For many developers, effective UI design means only showing those things which the user wants or needs to see based on certain conditions. Here’s an overview of four ways to control what gets seen and what doesn’t.

Harry Hope

Building Chat With React? Stream Chat Has You Covered — Have a look at our interactive chat tutorial in React and learn how to build with Stream Chat.

Stream sponsor

Is It Time to Add Maps to Your React App with react-geo? — There is a lot of demand for map-enabled apps and react-geo from Terrestris provides a complete feature set to get you going. We particularly like the workshop they have put together.

Terrestris

style9: A CSS-in-JavaScript Compiler Inspired by Stylex — Facebook’s stylex was a response to the demanding requirements of richer, more interactive content. Taking its cue from that, style9 features compilation to atomic CSS, typed style using TypeScript and font-size conversion to REM units. All that and no selectors!

Johan Holmerin

Two More 'Cool' Components — Back in early May we covered Welly’s Cool Inview hook. We were impressed. But Welly has been one busy guy and has just rolled out updates to Cool Img and Cool Dimensions. What can we say but…cool.

Welly Shen

Caldera: A Server-Side Execution Environment for React — Ever wondered how two separate web app clients can update the same data in real time? There has got to be some magic must be happening server-side. That’s exactly what Caldera promises: all the logic runs on the server and real-time updates are sent out to the client. Not possible you say? Check out the examples.

CalderaJS