#139 — May 22, 2019

Read on the Web

React Status
Your weekly React news digest, every Wednesday

Folding the DOM: Using 3D CSS Transforms to 'Fold Up' Images — The ‘trick’ to creating an image folding effect with CSS transforms is to have multiple identical images and then transform them separately. This is a great, interactive tutorial that’s based around React, although the underlying CSS principles are usable anywhere.

Josh W. Comeau

My Experience Moving From Enzyme to react-testing-library — A developer saw react-testing-library gaining traction and liked that it supported hooks out of the box, so he gave it a chance. Here, he reflects on why react-testing-library has “changed the way I think about writing React tests.”

David Boyne

Get the Fastest React Deployments. Get Started Free — Unlike most Continuous Integration (CI) solutions, Buddy only re-builds the parts of your application that have changed and deploys your updates in seconds to any cloud. Start building better React apps faster with Buddy.

Buddy sponsor

How to Handle Authentication in Modern React Applications — This doesn’t go into depth on the particulars of authentication but more how to handle rendering an app based upon authentication state.

Kent C Dodds

The Future of React Router and @reach/router — React Router and @reach/router are merging with a backward compatible, new hook-based API.

Ryan Florence

“I have absolutely 0 plans to ever teach classes again at all.”

___
Kent C Dodds shares his opinion when asked whether or not to teach classes and hooks side by side.

💻 Jobs

Senior Full Stack Developer, Sydney or Option to Work Remotely Across Australia — We are expanding our team and range of products. Recruiting for a Developer with a passion in the server side and APIs who wants to be part of our work family.

Compono

Find a React Job on Vettery — Vettery specializes in tech roles and is completely free for job seekers.

Vettery

📘 Tutorials and Stories

What Does react-beautiful-dnd Cost to Maintain?“By exposing maintenance information I hope to dispell the myth that open source projects lead to less total effort then private source. There are huge advantages in open source, but the cost of ownership is not one of them.”

Alex Reardon

The Approachable Guide to useReducer“Hopefully reading this article shows how approachable and flexible useReducer is”

Sean Groff

How To useContext With useReducer — This concludes a series Harry has been running on useReducer.

Harry Wolff

📕 20 Patterns to Watch for in Engineering Teams — Actionable insights to help you debug your development process with data. Get your copy.

GitPrime sponsor

Why You Should Render React on the Server Side — Client-side rendered React apps are great but having apps be rendered on the server can provide significant benefits.

Muhammad Muhsin

How to Build a Tic Tac Toe App with TypeScript, React and Mocha — Learn how to compose a tic-tac-toe app with React and TypeScript components.

Josh Kuttler

Uploading Images to S3 from a React Single Page Application — This is how one app does it without the images having to go via any other servers.

Koan

Building an Animated Search Bar with React Native

Krissanawat Kaewsanmuang native

Uploading to Firebase Storage with React Native

Jo E. native

🔧 Code and Tools

react-image-magnifiers: Responsive, Image-Magnifying Components for Mouse and Touch — If you have images like product photos or stock photography that users might want to occasionally see a little extra detail of, this could be useful. Demos here.

Adam Risberg

React-Designer: Lightweight, Editable Vector Graphics in Your React Components — This isn’t entirely new but has just become maintained again. GitHub repo.

Fatih Erikli

Grow Your Cloud Service Business with Manifold

Manifold sponsor

Gestalt: React UI Components Supporting Pinterest's Design Language

Pinterest

An 808 Drum Machine Built using Hooks-Flavored React — No easily accessed demo, but here’s the code..

Joe Seifi

React Navigation: Routing and Navigation for React Native Appsv3.11.0 just came out.

React Navigation