#170 — January 8, 2020

Read on the Web

Yep, we're back - we hope you had a good break! :-) Here's to 2020, and if you have anything you want us to include, just hit reply and let us know.
React Status
Your weekly React news digest, every Wednesday

How I Structure My React Code — One developer’s thoughts on how she likes to lay out the code within her React projects, including dividing code into domain logic vs reusable components.

Mathilde Wærstad

The State of Storybook at the End of 2019Storybook is a popular tool for developing and showcasing UI components (originally just for React, but now supporting Angular, Vue, and others). 2019 saw even more growth for Storybook’s ecosystem and community.

Michael Shilman

One Codebase. Any Platform. Just React — Build awesome apps across mobile, desktop, and web, with the React you know and love. Choose from over 100 mobile-ready components with built-in animations, gestures, and theming capabilities to fit your brand.

Ionic React sponsor

Dan Abramov's 2010-2019 in Review — If you don’t know Dan (prolific React blogger, core team member, Redux co-creator, etc.) you might not enjoy this story, but otherwise it’s pretty neat to see how someone well known in our space got to the position they have.

Dan Abramov

What are the React Team's Principles? — I’m glad Dan caught the blogging bug over the Christmas holidays, because not many people did :-) Here we learn a little about how the React core team operates and what their main principles are.

Dan Abramov

React Share 4.0: Social Media Sharing Buttons and Share Counts — The latest version requires React 16.3, has been refactored to TypeScript, and has added buttons for Weibo and Facebook Messenger.

Klaus Nygård

💻 Jobs

React Developer at X-Team (Remote) — Work with the world's leading brands, from anywhere. Travel the world while being part of the most energizing community of developers.

X-Team

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

Vettery

📘 Tutorials and Stories

▶  Exploring Audio with React and SVGs — A 25 minute talk from React Day Berlin that shows how to use SVGs in a creative way with React to visualize audio. The speaker even does her own programming rap at the end :-)

Elizabet Oliveira

How to Write Correctly Typed React Components with TypeScript — React and TypeScript make a powerful pair, but if you’re just starting out, you’ll need to understand how to write correctly typed components.

Piero Borrelli

Take the Survey & Win Prizes. Is JavaScript Still the #1 Programming Language? — Answer questions on your favourite tools, languages, platforms. You could win a Surface Pro 6, iPhone 11 & more prizes.

Developer Economics Survey sponsor

Build Your Own Netlify-like Deployment for a React App using Kubernetes

Peter Jausovec

Behind the Scenes: A Look at Rebuilding a Scheduling Page“Our new schedule page was built entirely in React Hooks. We’re pulling the curtain back to explore our rationale and motivation for the rewrite, explain the technical challenges and take a closer look at a few of our custom hooks.”

Andre Azzolini

🔧 Code and Tools

react-map-gl: A Friendly Wrapper Around MapboxGLMapbox GL JS is a JavaScript library for slick vector map rendering on the Web (examples here). This wrapper brings the fun more easily to React apps.

Uber

react-spring-slider: A Slider Component Built on React Spring — A straightforward carousel-style image ‘slider’. Live demos here.

farbenmeer GmbH

svg-to-react: Converts SVG Assets Into Accessible React Components — Used by Twilio’s internal design team. SVGR is another option if you want to compare.

Twilio Labs

react-tabs: An Accessible and Easy Tab Component

React Community

scalajs-react: React, but for Scala.JS — Feeling brave? Scala.js provides a way to build front-end apps using Scala (which is then compiled into JavaScript) and scalajs-react brings React into the mix too.

David Barri

React Image Crop: A Responsive Image Cropping Tool — Responsive, touch-enabled, with no dependencies.

Dominic Tobias

🕰 ICYMI (Some older stuff that's worth checking out...)