#272 — January 19, 2022
Good Advice on JSX Conditionals — “Time after time I shoot myself in the foot with JSX conditionals. In this article, I look at the trickier corners of JSX conditionals, and share some tips for staying safe”. As always, there are other options, though, and future potential options too as may eventually be offered by do expressions or pattern matching.
How Storybook Migrated 541 Components from Styled Components to Emotion (Without Bugs) — The Storybook team essentially dogfooded their Chromatic visual testing tool to streamline a refactor.
Varun Vachhar (Storybook)
Introducing the Last eCommerce Back-End You’ll Ever Need — Solidus powers the brands defining the future of eCommerce. We’re the free, open-source framework created by a dedicated group of passionate developers, agencies, and retailers that work together to move the platform forward. Come take a look.
React Event Bubbling and Capture — Event bubbling occurs when handling events within nested elements: an event ‘bubbles up’ from one element to its container until it reaches the root element. This behavior can be both helpful and troublesome — here’s how to handle it correctly with React.
How Not to Learn TypeScript — Five useful pointers from someone who’s spent a lot of time with TypeScript.
Three React Component Design Patterns You Should Know About — “While this is not an exhaustive list, it applies to most problems you will probably encounter when building components.”
React Server Components in Next.js 12 — If you’re excited to start using React Server Components — part of React 18 — you’ll be delighted to know they will also work with Next.js 12+. You can start experimenting now.
React Native Engineer Builds a SwiftUI App: The Good, The Bad & The 🤯 — If you’ve spent a lot of time in React Native—as is the case for the author—you may have wondered what it’s like to make to leap to SwiftUI. Here’s his assessment.
Director of Engineering @ ButterCMS (Remote) — Working closely with our founder and CEO, you’ll own all technology, deliver on our roadmap, and most importantly, ensure that our customers are successful.
Senior React Engineer @ Nebulab (Remote) — Join our distributed team and build high-volume eCommerce applications in a workplace made by developers for developers.
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.
Sneak Peek into React 18: The useDeferredValue Hook — useDeferredValue is one of the new Concurrent features included in the upcoming major release of React which is now in beta. This describes how to use it to keep the UI responsive while waiting for data to be retrieved.
How to Migrate Your Blog from Gatsby to Next.js
Running Next and Remix on the Same Server
▶ React Elements vs React Components in 59 Seconds
Six Tips to Make Your React Components More Reusable
🛠 Code and Tools
React Calendar Heatmap: A Component for D3.js Calendar Heatmaps — Supports a variety of views including years (which look a bit like GitHub’s contribution heatmaps), months, weeks, or even down to a single day.
JHipster: Spring Boot and React in One Generator — One for you if you’re in the Java world or headed there soon. “Generate, develop, and deploy modern web applications and microservice architectures” with support for a number of popular frameworks including React. Now in its seventh major release with a broad user base.
drei: Helpers and Abstractions for react-three-fiber — Browsing the index of visually striking examples will quickly introduce the broad array of capabilities from this prolific developer collective.
React Headless Hooks: Powerful Components That You Control — The idea of these ‘headless’ components is that you get the behavior of an accordion, carousel, pagination, and similar mechanisms, but you retain 100% control over markup and styling. There’s a guide to getting started in ‘two minutes’ along with CodeSandbox examples for each of the components.
React Tracking 9.1: Declarative Tracking for React Apps — I’m a big fan of their crosswords, but the NYT puts out a lot of code too.
The New York Times
⚡️ Quick Bits:
React Native Clean Project — Automatically purges caches and modules and then re-installs them.
react-native-reanimated-carousel — “High performance infinite scroll component.”