#203 — August 26, 2020

Read on the Web

React Status
Your weekly React news digest, every Wednesday

A Guide to Six Commonly Used React Component Libraries — There are literally hundreds of repos on GitHub all of which are intended to contribute something to the React ecosystem. The flipside of that excellent state of affairs, for the beginner, is precisely where to start your own React journey. The author offers an informed, experienced opinion of the landscape in the component library space.

Max Rozen

A Tale of Webpage Speed (or Throwing Away React) — We're not afraid to present counter-arguments to React and this pretty cogent one was big on social this week. It was precipitated by the shift of their user base to mobile and an attendant need to supercharge performance – these are the steps which eventually led a development team away from React.

Alexander Solovyov

ButterCMS - #1 Rated Headless CMS. Melts into React Apps — ButterCMS is the #1 rated Headless CMS for React. Enable your marketing team to update website content w/ our easy to use dashboard. Fast content API for modern apps. Secure. Scalable. Less Code. Try free today for 30 days.

BUTTERCMS sponsor

Four useEffect Tips Every React Developer Should Know — Sometimes the flexibility React affords can be a little overwhelming for those who are just learning one of its concepts. Here, an experienced developer provides high level guidance as to the better alternatives in a dazzling array of options for the useEffect hook.

Helder Esteves

Mastering Props And PropTypes In ReactProps and PropTypes are an essential mechanism for communication between React components. This exhaustive and richly-detailed tutorial shows how to use them correctly.

David Adeneye

React-Uploady: Simple Yet Customizable File Uploads — Do you dream of your app’s upload functionality having progress bars, drag-and-drop, file previews and all the other things your users’ now expect? The answer may be just a couple of lines of code away with this new library.

Yoav Niran

💻 Jobs

Find a 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

▶  A React Breadcrumb Component Using Compound Components Pattern — We like tutorials with a clearly defined, concrete feature goal used to anchor the concepts taught. This time out, it’s implementing a breadrcrumb trail in the Goibibo travel site. We also like the author’s low tech (but nonetheless effective) presentation materials which punctuate the video.

Arihant Verma

How to Animate an SVG viewBox with React — Coding doesn’t have to be all hard work and abstract problems: how about a fun tutorial on animating the SVG viewBox. The author’s trigger? A desire for a richer experience for the readers of his Developer Comics.

Elijah Manor

📦 What React 17 Means for Developers — Learn about three key changes in “No New Features” React v17: gradual updates, changes to event delegation and... Read more.

Progress KendoReact sponsor

Real-Time To-Do List Data Management in React Using Redux-Saga and Socket — One of the most challenging areas of application design and implementation is for any real-time requirement. Using a simple, easy-to-understand example of a to-do list, this expert-level article provides insight on how to approach the complex topic.

GaneshMani P

How to Use the Google Autocomplete Search API & React Native Maps to Fetch Location — It’s handy when any sort of geo-centric application takes non-address location information and turns it into an actual street address. We’ve always thought that must be a tricky problem to solve but this quick, accessible tutorial makes it look pretty easy.

Prateek Chitransh

Bitmovin’s Virtual Events Are Back, with Bitmovin Live - IBC Edition

Bitmovin Inc. sponsor

▶  React Podcast: Tom Coleman on Storybook v6 — In last week’s issue we carried Michael Shilman’s overview of Storybook 6.0. This week, listen to React Podcast host chantastic and his guest Tom Coleman (part of the Storybook development team), as he provides first hand insight into what’s new with the popular UI component development library.

React Podcast podcast

The Right Way to Create Function Components in React with TypeScript — A nice, quick read on the both the right (and wrong) way of using TypeScript to create function components. How does this compare to your approach?

Ozan Tunca

🔧 Code and Tools

React Colorful: A Lightweight Colour Picker — Let’s face it, there’s little new under the sun with respect to how to pick a color in an app. That said, you have to do something to make it easy, and this lightweight, focused component does the job (demo) really well.

Vlad Shilov

React Cropper: Image Editing Made Easy — So we go from color to cropping! It would have been nice way back at the beginning of the computer age if some standards around image formats had been adopted. We’re kidding, of course, so putting image cropping where it needs to be – in your app – seems almost essential these days. Check out the demo on CodeSandbox.

react-cropper

Nocturn: A Multi-Platform Twitter Client Built with React, Redux and Electron — Twitter recently announced its new and improved API which is clearly intended to renew interest in developing for the aging platform. Nocturn may provide some inspiration for your own project.

Takashi Kokubun

react-native-dynamic-search-bar: An Easy Way to Get Search Right in React Native — The search bar is still one of the most likely entry points for your app, so yours needs to be pretty good if you’re going to engage your user. Maybe consider this one? It’s clean and modern.

Kuray Ogun

react-dropdown-select 4.5: Customizable Dropdown Select ControlLive demo here.

Sasha Khamkov