#209 — October 7, 2020

Read on the Web

React Status
Your weekly React news digest, every Wednesday

Take the Official React 2020 Community Survey — The React Core Team wants your input and it’s probably the least we can do for all their hard work 🙂 They’re working on new docs and other initiatives and will use the results of this survey to help direct their work going forward. All questions are optional too, so if you only have a few minutes and want to focus on areas that concern you, you can do this.

React Core Team

An Honest Review of GatsbyGatsby is a popular React-based framework commonly associated with (but not limited to!) building static sites. Sentry have been using it for their documentation and here’s the tale of how that’s gone. Spoiler: It’s not been all sunshine and roses.. plus further discussion on Hacker News.

David Cramer

On Twitch Today—Dive Into React Unit Testing w/ Eric Elliott — The one and only Eric Elliot is joining TJ VanToll to share his knowledge about all things unit testing. Eric teaches developers essential software development skills and is the author of “Composing Software.” Join us live on Twitch.

Progress KendoReact sponsor

jQuery to React: How We Rewrote the HelloSign Editor — eSignatures have been getting a lot of positive press recently, no doubt in part because signers currently have a great reason not to meet face-to-face. Here’s an excellent case study of how Dropbox.Tech recently replaced 12,000 lines of jQuery with an all new React app.

Asa Ayers

▶  Create React App vs Next.js vs Gatsby — As you kick off a new project, you may still be considering alternative approaches to getting started. This concise video broadly compares some leading contenders so you can make the right choice between Create React App, Next.js and Gatsby.

James Q. Quick

How You Should Structure Your React Applications — Do you ever wonder how your method of organizing your React projects compares to how others do it? Everybody has an opinion, how does yours stack up?

Thomas Guibert

💻 Jobs

React Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find Your Next Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

🧑‍💻 Interested in running a job listing in React Status? There's more info here.

📘 Tutorials and Stories

Using Service Workers with create-react-app — You may not yet realize that React service workers do much of the heavy lifting of modern Progressive Web Apps. If one of those is on your radar, this article will introduce the concepts and show how you use create-react-app to set them up.

Shaumik Daityari

Building a Truly Accessible Clickable DivWealthFront is committed to the delivery of apps which embrace the challenges of accessibility. Their in-house ExpandedClickableArea component is a great example. And this is novel: they’re using their article as a means of attracting new engineering talent.

Andrew Easton

Demystifying React Native’s Animated API: Part 1 — There are some stunning animations being implemented with CSS. However, React Native animations don’t work quite the same way and you’ll need to adjust your approach. This post from the Drop Engineering blog explains.

Simon Steer

Getting Started with Gatsby: Build Your First Static Site — We like it when an article starts with the assumption we know nothing of a new tool or technique and then, using a simple example, illustrates everything we need to know to get to at least a basic understanding.

Maria Antonietta Perna

Unit Testing In React Native Applications — Testing your components to ensure they’re ready for prime time means unit testing them thoroughly. This is how you use Jest JavaScript testing framework to achieve this goal.

Fortune Ikechi

Getting Started with OpenTelemetry in JavaScript

Lightstep sponsor

Lightweight, Modern React.js Setup for GraphQL using Vite and urql — A prescriptive, easy-to-follow guide to getting your first React/GraphQL project off the ground.

Jakub Neander (Zaiste)

🔧 Code and Tools

react-force-graph: Beautiful Visualization of Complex Network Relationships — When Hollywood wants to convey the notion of software which is just over the horizon, it seems like force graphs are the way they do it. But the fact is they are a great way to visualize complex relationships in an interactive way and they’re actually here already.

Vasco Asturiano

How to Measure Performance Metrics in React Native Apps — Track component load times with the lifecycle API so you can focus on what matters: shipping features for your users.

New Relic sponsor

A List of Various React + TypeScript 'Starter Kits' — With different frameworks, different scenarios (cloud, browser, local), or a full on manual setup approach.

Shawn Wang

react-plotly.js: How React Does Plotly — Your key to accessing the beautiful and functional Plotly JavaScript Open Source Graphing Library.

Plotly

React-Menu: All The Menu Use Cases You'll Ever Need — This covers just about every menu use case, many of which are not available in more popular React libraries. This includes submenus, radio and checkbox functionality.

Zheng Song

Upcount: Invoicing with React and Electron — While it may not necessarily revolutionize the way you do business, everybody could use a good, basic, cross-platform invoicing app.

Madis Väin

react-avatar: An All-in-One Component for User Personalization — A nice, all-in-one component to professionalize your app while enabling your users to easily express themselves through their avatar. Everybody wins.

Kirill Novikov