#210 — October 14, 2020

Read on the Web

React Status
Your weekly React news digest, every Wednesday

ReactGrid: Add a Spreadsheet-like Experience to Your React App — The UI element you can almost guarantee will be familiar to your app’s prospective users is a spreadsheet grid. The fully-featured ReactGrid comes in both MIT-licensed and commercial versions and can be demoed here.

Silevis Software

Why React Hooks Over Higher-Order Components — Robin is back with a fantastic set of examples demonstrating the advantages of using hooks over higher-order components.

Robin Wieruch

New Course: Introduction to Next.js, The Full-Stack React Framework — Next.js is a complete framework built on top of React.js. You'll learn server-side rendering, static site generation, data fetching, code API endpoints, creating pages with the file system, add CSS modules, and more.

Frontend Masters sponsor

React Tiny Fab: An Accessible 'Floating Button' Component — Android-esque ‘floating buttons’ that stay above the main content. Check out the example in the bottom right of the homepage. GitHub repo.

Deric Cain

⚡️ Quick bytes:

💻 Jobs

Full-Stack Engineer (React + Rails) [Remote] — Reform professional education. We're bootstrapped and profitable, are led by 3x successful founder, and we tell a lot of dad jokes.

Reforge

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

Four Characters Can Optimize Your React Component — The author admits the title “is kinda clickbait-y” but then goes on to explain that just four characters really do differentiate two methods of initializing state. Without peeking, do you know what they are?

Ben Ilegbodu

How I Structure React Apps — Another instalment in this mini-series on how others are structuring their React apps. The comparison is valuable even if you eventually decide to do things your own, unique way.

Chetan Raj

▶  Fullstack Jamstack with Next.js — A return engagement with James Quick, this time to kick off a series of videos on Jamstack. Next.js is a good choice, but as he says “it can’t do everything”.

James Quick (Auth0)

Take the KendoReact Team's Early Web Cheese Challenge — This month, we’re partnering with CodePen to offer weekly challenges inspired by the web’s early days. Time to show off.

Progress KendoReact sponsor

Review of Chakra UI — Rather than having the author of the Chakra UI advocate on his own behalf, here’s a third-party review of the increasingly-popular framework which focuses on building accessible apps.

Classic Reagan

Five Awesome React Packages to Check Out — At last count we have well over 500 React-related GitHub repos in our database — it’s an embarassment of riches. They can take a long time to sort through, however, which is why somebody sharing their favourites is a time saving bonus.

Varun Chilukuri

Understanding the Image Component in React Native — It’s hard to imagine getting very far in the mobile app space without some consideration for how images will be organized and presented. This thorough, detailed tutorial provides most of what you need to know.

Esther Vaati

🔧 Code and Tools

ReactReparenting: Shared Custody for Components? — Move a component from one parent to another without remounts or losing internal state. All it takes is a few lines of code.

Paolo Longo

rc-pagination: Pagination Made Easy — If you believe the interests of your users are best served with paged content, this library provides a wide variety of options.

react-component

Building Chat With React? Stream Chat Has You Covered

Stream sponsor

React Countdown: A Customizable Countdown Component — Seems quite flexible and here’s a very basic CodeSandbox example.

Martin V.

Abstract Complex Configurations Into a Single Dependency with Razzle — Want more than create-react-app delivers and yet not ready to fully embrace a full blown framework like Next.js? Razzle provides an alternative path for your SSR and SPA projects.

Jared Palmer

Atlassian Design System: Components and Patterns to Create Beautiful UIs (But Only for Atlassian Related Tools) — Lots to look at here, but note that according to the license, these are to be used “solely in connection with … products or services that interoperate or are integrated with Atlassian’s software and hosted products.”

Atlassian

react-chat-ui: Roll Your Own Chat Interface — These days, no consumer-facing app is seemingly complete without that little chat ‘bug’ in the corner of the UI. Here are some components to help you in implementing your own.

Brandon Mowat