React Newsletter #283

React anti-patterns to avoid, using Recoil over Redux, and Shopify's React-first approach to building e-commerce sites


This week’s issue is sponsored by Progress KendoReact

How to Implement a React Data Grid (One That’ll Make Your Life Easier).

The KendoReact Data Grid is not only feature rich and very fast, but also satisfying to work with. With it, you can implement a beautiful table with sleek theming, paging and filtering in just 16 minutes! Try it out.

Check out the video tutorial here.


Articles

7 things you may not know about useState

Vladimir Klepov writes about how doing code reviews for his team's hooks-based projects has made him realize that many developers aren't aware of some awesome features (and nasty pitfalls) that useState offers. It's one of his favorite hooks, so he wrote up these 7 facts about useState that are essential for anyone working with hooks.

React Philosophies

In this article (written as a GitHub README), Mithi Sevilla writes a checklist or outline of things she thinks about before writing her own React code or reviewing someone else's React code. It's a set of guidelines more than hard and fast rules, but it's been helpful to her throughout her career, and it may help you too.

Just Redux: The Complete Guide

Sanjeev Sharma wrote this beginner-friendly guide to Redux that aims to clear up some common misunderstandings and misconceptions about the state management library and help you use it with greater confidence.

React antipatterns to avoid

Iskander Samatov writes about some of the anti-patterns most commonly seen in React applications and how to fix them. These anti-patterns can make your codebase a nightmare to work with if you don’t learn to recognize and prevent them at their early stages.

Using Recoil instead of Redux For State Management In React Applications

Recoil is a new-ish state management library created by an internal team at Facebook. In this article, Origho Precious writes about some its advantages compared to Redux and why you might want to consider using it in future React projects.


Tutorials

Image from React Component (JPG or PNG)

This is a brief tutorial where Robin Wieruch walks you through how to generate an image (JPG or PNG) from a React component, in case you want to give users the ability to download an area of your application as an image (like a chart or graph).


Jobs

React Native Engineer at IGN (Remote)

IGN, the premier publisher of video game and entertainment news, is looking for a full time React Native engineer to join our team and help build out the next generation of mobile apps. If you are interested, we'd love to talk. Apply now!


Projects

Hydrogen

Hydrogen is Shopify's recommended approach to building commerce experiences that are both dynamic and incredibly fast. Built on JavaScript and React, Hydrogen provides a quick-start toolkit and set of components, so you can focus on building the fun parts that make your store unique—not the boilerplate.

Refine

Refine is a React-based framework for easily building data-intensive applications. It ships with Ant Design System, an enterprise-level UI toolkit.

Theatre.js

Theatre.js is an animation library for high-fidelity motion graphics. It is designed to help you express detailed animation, enabling you to create intricate movement, and convey nuance by using React or other JavaScript libraries.

Reaviz 11.1

Reaviz is a modular chart component library that leverages React natively for rendering the components while using D3 under the hood for calculations. This v11.1 update introduces a new chart type -- Tree Maps, which you don't often see in other libraries.


Videos

Swyx interviews Sunil Pai about React and the Meta of the Web

In this 80-minute video, Swyx has a fascinating, wide ranging conversation with Sunil Pai that covers the future of React, the Third Age of JavaScript, the Meta of online discourse, and more.

Coding a Vim Tutor with React and CodeMirror

This 20-minute video goes over how to build a Vim tutor with React and CodeMirror in under 60 lines of code. It starts off by setting up the React and Tailwind CSS frontend with CodeMirror to allow the user to run Vim commands on an editor, then creates a challenge to teach the user about Vim keybindings. You'll also add a React hook counter to display the number of times the programmer completed the Vim challenge.

made with ❤️ by ui.dev