Counting your children

#​251 — August 11, 2021

Read on the Web

React Status
⚛️ Your weekly React news digest, every Wednesday

React Children and Iteration Methods — You might think you’ve learnt everything about iterating over React’s .children prop. However, this detailed review of the .toArray method may reveal a few things of which you were not aware.

Arihant Verma

▶  Create a Dashboard App Based on a Figma DesignFigma is an increasingly popular tool for designing apps of all kinds, so it’s great to see another instalment in this informal series walking through the concrete steps of turning an idea into a design, and then into a React-powered reality.

Mitchel Techbase

Learn the Fundamentals of TypeScript — Use TypeScript to add strong typing to large JavaScript apps helps reduce bugs and keeps code performant and maintainable. This course covers all you need to know including how to migrate your codebase to TypeScript and improve productivity while building large-scale apps with ease.

Frontend Masters sponsor

How to Build Force Directed Graphs with React and D3 v7 — A step-by-step build from no movement to the ‘full bells and whistles’ complete with code sandboxes to play with.

Swizec Teller

A Visual Guide to React Rendering: Props — The second of three parts of this author’s series, each part of which employs a series of simple GIF animations to clearly illustrate the rendering behaviour of React. It’s really helpful to understand what is actually going on.

Alex Sidorenko

Why You Should Stop Using The “Container/Presentational” Pattern in Redux (.. Or Not!) — A dramatic, concrete assertion right in the title almost invites differing points of view (maybe that’s the author’s intent?) and this article is no exception. After reading, you will want to review the ensuing discussion on Reddit where Redux expert Mark Erikson chipped in.

Matan Borenkraout

Jobs

Frontend Engineer (React, New York) — Dovetale helps Shopify merchants like KontrolFreek and Italic grow their creator community. Built in NYC and backed by Uber founders.

Dovetale

Senior Frontend Engineer – React (Remote) — With over 7 million clients, Kraken is one of the world’s largest, most successful bitcoin exchanges.

Kraken

Find React Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

How One Conditional Can Entangle Your React App — A cautionary exploration of how a lack of intentional composition can impact your React project.

Jason Lee Hodges

Using Websockets with React with No Library Needed

Itay Schechner

Tagged Template Literals—The Magic Behind Styled Components

Dekel Braunstein

Catching Errors in React with Error Boundaries

Kristofer Selbekk

🛠 Code and Tools

Ant Design Charts — Yes, yet another React chart library with a rich assortment of presentation styles, but this one’s from the Alibaba-affiliated Ant Design.

Ant Design Team

Rooks: 63 Custom React Hooks — It’s almost inevitable the hook for which you’re looking, or something close to it, is in here somewhere. Now well into its fifth major release.

Bhargav Ponnapalli

A Guide to Building Form Components Using the React‑Hook‑Form Library

Retool sponsor

Base Web React Components v10.0Base is Uber’s in-house design system, and Base Web is the mature, React implementation of it.

Uber Open Source

Tailwind Nextjs Starter Blog Template — About to roll your own, custom blogging platform using Tailwind and Next.js? Stop! This live demo shows this one to be clean, complete and visually pleasing.

Timothy Lin

react-infinitegrid — A key element in keeping websites sticky is the much-loved (or hated?) infinite grid. You will run out of patience before it does. From the well-respected Korean search engine, NAVER.

Naver

⚡️ Quick Bits:

Chakra-UI AutoComplete — A WAI-ARIA-compliant autocomplete component.

react-native-actions-sheet — A React Native version of Apple’s ActionSheet, which requires users to make a choice between two or more options.

React Chat Widget — Chat pop-ups are everywhere. Here’s one for your app.

LeafView — “An image viewer for minimalists.”

react-dartDart bindings for React.

Leave a Reply

Your email address will not be published. Required fields are marked *