#184 — April 15, 2020

Read on the Web

React Status
Your weekly React news digest, every Wednesday

Profiling React.js Performance — Goes into detail on aspects of the React Profiler API, React’s new experimental Interaction Tracing API, and measuring custom metrics using the User Timing API.

Addy Osmani

How to Style Your React Apps with Tailwind CSS and Styled ComponentsTailwind CSS is a popular CSS framework and this tutorial demonstrates using it along with Styled Components to create a form component in a React app without writing any CSS, as such, at all.

Ibrahima Ndaw

Retool: Build Internal Tools a Lot Faster, with Less Maintenance — Ship in hours, not days. Retool provides UI building blocks that connect to any DB and API so you can focus on what matters. Hackable by design — you can use JavaScript anywhere, write your own custom React components and query JSON with SQL.

Retool sponsor

33 Line 'React' — Sure, React does some useful things, but you can do the same things with very little code, so.. why not? A fun experiment that is unlikely to replace React! 😄 Also of interest is that Hacker News had its say and the author responded.

Oliver Russell

A Tour of Creating a 'Gauge' in React — A very neatly presented walk through of what it takes to build a ‘gauge’ in React, an on-page animated component kind of like an odometer.

Amelia Wattenberger

💻 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

React Developer at X-Team (Remote) — Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

📘 Tutorials and Stories

How to Build a Todo App using React and Firebase — Before you say “not another to-do list tutorial!”, it’s less common to see Firebase being used, and learning how to integrate with that could be of value to you.

Sharvin Shah

Why You Should Keep Faith with React Native — Is React Native dead? Maybe according to some. But the fact is that React Native is about to receive a whole lot of new features and upgrades this year.

Zain Sajjad

Let's Build a Financial Dashboard App with React (Free Webinar) — On April 23, TJ VanToll will stream a 45-minute live session building a stock portfolio app with React. Save your seat.

Progress KendoReact sponsor

The Algebraic Structure of Functions, Illustrated using React Components — This is one of those “let’s look at something familiar but from a different angle” articles. There’s nothing new here except, perhaps, perspective.

James Sinclair

Stop Using Client-Side Route Redirects — To be honest, this might not be something you’re doing anyway.

Kent C Dodds

Effective Code Splitting in React: A Practical Guide — Some techniques on implementing code-splitting, or breaking your code into modular bundles for better performance, in React projects.

hackernoon

Build Your Own React — Just wanted to revisit this if you want something really meaty to work on during the lockdown. It’s a well presented walkthrough of creating your own React-a-like from scratch. You’ll need some time set aside to follow along. It’s more advanced than the 33 line React-a-like we posted above.

Rodrigo Pombo

Building and Styling Tables with react-table v7 — Creating tables with React can be a pain. react-table v7 provides a modern, Hooks-based API that helps us create tables in React with little hassle.

John Au-Yeung

▶  Mapping with React Leaflet — A brief Egghead screencasts collection.

Colby Fayock

Our Tech Skills Platform Is Free for the Month of April. Start Today

Pluralsight sponsor

🔧 Code and Tools

react-tater: Add Annotations to Any Element on a Page — Why ‘tater’? (Anno)tater, apparently 😄 Here’s a live demo where you can create your own such annotations or take a tour.

Jo Sprague

snake-cubed: A New, React-Based Spin on the Classic Game of 'Snake' — Imagine Snake but in 3D and within a cube environment. I can’t get my head around the controls, but you can play it here if you like. A fun project to learn react-three-fiber.

Paul Mendoza

Preact 10.4.0: The Fast 3KB React Alternative (With The Same API)“This release contains some very amazing improvements to hydration and to performance when memoized vnodes are used. We recommend everyone to upgrade.”

Preact

React Intl: Internationalization (i18n) for React Apps — Components and an API to format dates, numbers, and strings, including pluralization and handling translations. Now part of the broader Format.js effort too.

Yahoo Inc

React PDF Viewer: A React Component to View PDF Documents

Phuoc Nguyen

react-virtualized-tree: A Virtualized Tree View Component Built on react-virtualized

Diogo