React Newsletter #224

SWR gets a power-up, how to test React components, and how Records and Tuples affect React code.


News

SWR adds pagination and infinite loading

SWR is a React Hooks data-fetching library created by Vercel (the company also behind Next.js). These new features should make it that much more valuable going forward.

Speaking of Next.js... they released v9.5 last week with more features to support static site generation. We did a deep dive on it in yesterday's issue of Bytes, and we think you'll like it.


Articles

JSX Tips and Gotchas for Beginners

In this article you'll learn some common tips and gotchas for JSX including including variables in JSX, rendering nothing, conditional rendering, and more.

How to test React components: the complete guide

This in-depth article is a great foundational guide to React testing. It covers what you should (and should not) test, why to test, and how to use the most common testing resources.

TypeScript + React: Component patterns

This article by Stefan Baumgartner provides a collection of component patterns for React when using TypeScript with helpful code examples for each one.

Records and Tuples for React

ICYMI, Records and Tuples recently made their way to Stage 2. In this article, Sebastien Lorber explains the basics of records & tuples, and demonstrates how they can solve real-world React issues.

What is NPM? A guide to the company, registry, and CLI

A common pre-requisite to diving into React is NPM. In this article you'll learn about the company, the registry, and the CLI.


Tutorials

Generating TypeScript types and React Hooks based on GraphQL endpoint

This tutorial demonstrates how to auto-generate TypeScript types and custom React hooks in React applications using GraphQL Code Generator.

How to set up a React app with Parcel

Parcel is a "blazing fast, zero configuration web application builder." This tutorial goes over how to use it to set up a bare-bones "Hello world" app.


Sponsor

React developers are in demand on Vettery

Vettery is an online hiring marketplace that's changing the way people hire and get hired. Ready for a bold career move? Make a free profile, name your salary, and connect with hiring managers from top employers today. Get started today.


Resources

Reactime

Reactime is a debugging tool for React developers. It records state whenever it is changed and allows the user to jump to any previously recorded state.

This tool is for React apps using stateful components and prop drilling, and has beta support for Context API, conditional state routing, Hooks (useState, useEffect) and functional components.

re-frame

re-frame is a ClojureScript framework for building user interfaces, leveraging React. Its primary focus is on high programmer productivity and scaling up to larger Single-Page applications.


Videos

Build an Online Store Using React, AWS, and Stripe

This hour-long video will walk you through each step of building an online bookstore and will demonstrate how technologies like Amplify, AppSync, DynamoDB, S3, Lambda services in AWS, and React Hooks all fit together.


made with ❤️ by ui.dev