Issues » #365

#365 – July 18, 2022

sponsor

How To Build a Real-Time Updating Data Grid in React

There are plenty of examples out there of building a data grid using static data, but what about live streaming data? This blog post explains how you can create a real-time grid that uses the KendoReact Data Grid. Check it out.

this week's favorite

Applying SOLID principles in React

As the software industry grows and makes mistakes, the best practices and good software design principles emerge and conceptualize to avoid repeating the same mistakes in the future. The world of object-oriented programming (OOP) in particular is a goldmine of such best practices, and SOLID is unquestionably one of the more influential ones.

Learn how to build, test and deploy a bookstore app

This guide will cover in detail the steps to create a working example bookstore single page application using the latest React 18 and run it using the Vite. It also includes details on how to add a custom state management solution and routing using the wouter library.

Actionless and Stateless Reducers in React

I think useReducer is pretty great and underutilized, and conversely useState overutilized. useReducer usually comes in to play when state updating logic gets unwieldy. So unwieldy and spread out over many components that it needs to be consolidated, with the state updates mapped out in a single function; a reducer. Usually reducers are half state-machines with long a switch statement with a case for each action type (or many if/elses, same thing). Maybe your reducer is particularly gnarly and has few nested conditions, oh boy.

Migrating from Styleguidist to Storybook

By transitioning from Styleguidist to Storybook, we were able to offer a faster and more user-friendly development environment for React components along with better alignment to developer and designer workflows. In this post we’ll take a deep dive into how and why we migrated to Storybook.

React Hooks: The Deep Cuts

Hooks are reusable functions. They allow you to use state and other features (e.g. lifecycle methods and so on) without writing a class. Hook functions let us “hook into” the React state lifecycle using functional components, allowing us to manipulate the state of our functional components without needing to convert them to class components.

projects

No more endless back-and-forth on tracking plans

Objectiv is ready-to-use infrastructure for advanced product analytics. Set up validated event tracking for React apps, based on a generic event structure. Built together with 50+ companies to cover many modeling use cases. Open-source with developer tooling: inline documentation & linting in IDE/console, client/server side validation and end-to-end testing tools for the tracking instrumentation.

newsletters

Join over 14,200 readers for a free weekly email with fresh news, articles and tutorials.