#205 — September 9, 2020

Read on the Web

React Status
Your weekly React news digest, every Wednesday

React is Becoming a Black Box (A 2020 Update) — While originally posted in October 2019, the author returns to an all-too-brief post with an update. After reading the article, Tom Occhino, Engineering Director of Facebook’s React Group, responded with surprising candor on the state of the always-just-around-the-corner Concurrent Mode.

Jared Palmer

Why I Love React — The title pretty much says it all but what is it about React that Kent C. Dodds loves so much? The simple answer may surprise you. Full disclosure: the article also serves as the thesis statement for a brand new course Dodds is launching in a few weeks.

Kent C. Dodds

💥 Need a Gantt Chart? What About a Complete React UI Library — To see a live demo of the new React Gantt Chart, part of KendoReact UI library, join the release webinar on Sep 29, when TJ VanToll & Carl Bergenhem will play with the new Gantt component and all newly released items. Save your seat.

Progress KendoReact sponsor

Examples of Large Production-Grade, Open-Source React Apps — Something we tend to overlook is the learning opportunity provided by open source projects: all that code is there for the reading. These React apps illustrate what’s available at the higher end of the open source scale. In many cases, they’re the equal (or better) of commercial alternatives.

Max Rozen

My Thoughts on the Endless Battle Of React State Management Libraries — It seems like almost every issue of this newsletter has an article on some sort of new state management solution. This article will save you some time evaluating the plethora of alternatives by tackling a head-to-head comparison of some of the leading contenders.

Mateusz Podlasin

reactjs-popup: A Simple React Popup Component — Version 2 just dropped.

Youssouf El Azizi

💻 Jobs

React JS Developer (Remote) — 13 million people and counting plan outdoor hiking and cycling routes with our apps. If you are smart and talented React Dev, join us to inspire more people to explore more of the great outdoors.

Komoot

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

Building a Component Library with React and EmotionSmashing Magazine has our respect for upholding a consistently high standard for selecting and preparing their articles for publication. This time out, it’s React in combination with Emotion to build reusable components.

Ademola Adegbuyi

Build a TikTok Clone with React and FirebaseTikTok is in the news a lot these days. Not just because it’s the current burning center of the the social media universe but also because it has become something of a political football in some parts of the world. Rumors of its shutdown or sale abound. Might that create an opportunity for you build a TikTok clone and become the next social media fad? ;)

Emmanuel John

Virtual Square UnBoxed 2020 — 2020 gave us 🍋, app devs are helping business owners make 🍹. Get inspired & join our free, 90 min virtual event.

Square sponsor

The Missing Introduction to React — We like to periodically return to an article which will get those new to React off to a good start. This effective combination of written material combined with an complementary embedded video is a great place to begin.

Eric Elliott

Switching to Redux Hooks — Given that Hooks are still a fairly new concept, their use has not yet found its way into every tutorial. This articles take an example from Brad Traversy’s well-regarded MERN Stack Front To Back Udemy course and re-creates it using Redux Hooks.

Harry Herskowitz

▶  Detecting System Theme in JavaScript / CSS / React — Last week’s issue featured the world’s longest YouTube tutorial video (clocking in at over 14 hours) whereas this week, we have one of the shortest and most focused. You can get though it in about the same amount of time it takes to make a decent cup of coffee.

Hypersphere

🔧 Code and Tools

Draft.js: Facebook's Rich Text Editing Framework — It’s been a long time (late 2016, to be exact) since we featured Draft.js, Facebook’s rich text editing framework. With some recent updates, we felt it was high time to become re-acquainted. The best way to get started: try it out.

Facebook

react-use-pip: React Hooks for Picture-in-Picture Functionality — Some may remember PIP (picture-in-picture) as a ‘must have’ feature for your new television set so you could watch two Saturday fixtures at once. If you do, you’re dating yourself. However, what’s old is new again and PIP, today, is the ability to float the playing video over other content. It's supported in recent versions of a few browsers too.

Daw-Chih Liou

Serverless Headless CMS - OpenSource, Powered by React and Node

Webiny sponsor

react-scroll-sync: Sync Up Your Scrolling Elements — A sad fact is that documentation rarely gets read sequentially any more. We think this component opens up some interesting possibilities for presenting information in a manner which better reflects the way your audience inevitably consumes the content while retaining the sequence you intended. The demos clearly illustrate the idea.

Andrey Okonetchnikov

react-awesome-query-builder: Add a Little Discipline to Your Query Building — Although we have all become more-or-less hooked on simply typing in random search terms into the address bar, there are still many situations where it would help if users could have a more structured way to build queries – this component will help you let them do that.

Denis Oblogin

Chonky: The Ubiquitous File Browser Metaphor within React — The concept of browsing through files and folders on a metaphorical desktop was originated in the early 1970s by Alan Kay at Xerox PARC. Today, suffice to say it’s something which is second nature to just about every tech user. So how about a component which faithfully implements it within React?

Tim Kuzhagaliyev