React Newsletter #276

Fine-grained code-splitting with Gatsby, Building a React app on the blockchain, and How to write readable React content states


This week’s issue is sponsored by Retool.

Retool is by far the easiest way to build internal tools for your team.

Instead of wasting time hunting down the best React table library, you can build an app in 30 seconds with their pre-built components and drag-and-drop UI. And you can customize it however you want by writing JavaScript anywhere inside of Retool.

👉 Check out the free trial.


Articles

Prefer Declarative State Updaters

Kyle Shevlin writes about why he encourages people to write declarative state updaters in their React code and to "really take control of the little APIs you're creating in your components and hooks."

Flexible, Fine-Grained Code-Splitting with Gatsby + Loadable Components

In this article, Grayson Hicks (from the Gatsby team) examines how you can use loadable-components with Gatsby to get fine grained control over our flexible layout components and Javascript bundles.

Catching Errors in React with Error Boundaries

In this article, Kristofer Selbekk will introduce you to the concept of error boundaries in React. You'll learn what challenges they try to solve, what shortcomings they have, and how to implement them. Lastly, you'll look at a small abstraction layer that makes error boundaries even better.


Tutorials

Your first Web3 dApp: React app reading real Ethereum blockchain database

Want to get in on the Web3 action but not sure where to start? This tutorial's got you covered with a step-by-step guide to setting up and launching a TypeScript & React web app that queries Ethereum blockchain data in standard querying language (GraphQL).

How To Write Readable React Content States

Content streams are an important part of any React project, but they also introduce a lot of complexity. This article by Chak Shun Yu covers and analyzes the readability of two fundamental approaches to handling content states in your React components.


Jobs

2x Sr. Frontend Engineers - React | 100% Remote

Close.com is looking for two experienced individuals that have a solid understanding of React and want to help design, implement and launch major user-facing features. They are a 100% globally distributed team of ~45 high-performing, happy people that are dedicated to building a product our customers love.


Projects

Mitosis

A subset of JSX that lets you write components once and run everywhere. It compiles to Vue, React, Solid, Angular, Svelte, and Liquid.

Unstateless

A state management library for React that allows the creation of injectable, persistent, shared state hooks. With unstateless, stateless components can be "upgraded" into stateful components by injecting React hooks as props.

Bumbag

A themeable, accessible & composable component library for React & React Native that lets you easily create cross-platform applications.


Videos

React Hooks Course -- All React Hooks Explained

In this 90-minute video, Pedro spends some time going over every single "core hook" in React.

Figma to React with CSS Modules

In this 2-hour video tutorial from Techbase, you'll learn how to create a Dashboard App with React based on a Figma Design. You'll be using TypeScript, CSS Modules, Recharts and Github Pages to deploy the app.

made with ❤️ by ui.dev