The React Newsletter

Hi <<First Name>>,

Building rich command-line interfaces with Ink and React

Ink is a library for building and testing command-line applications using React components. Since it acts as a React renderer, you can use everything that React has to offer: hooks, class components, state, context, everything. Ink lets you build interactive and beautiful CLIs in no time. Here's basic implementation of Jest's UI.

Read more

TypeScript + React: Component patterns

This list is a collection of component patterns for React when working with TypeScript. See them as an extension to the TypeScript + React Guide that deals with overall concepts and types. This list has been heavily inspired by chantastic’s original React patterns list.

Contrary to chantastic’s guide I use mainly modern-day React, so function components and – if necessary – hooks. I also focus exclusively on types.

Apollo Client v3 Fullstack Next.js Setup with SSR + Nexus Schema

In this video we recreate the Next.js example setting up Apollo Client v3, Apollo Server, Nexus Schema, with support for SSR.

Watch video

How To Use Styled-Components In React

Styled components are a CSS-in-JS tool that bridges the gap between components and styling, offering numerous features to get you up and running in styling components in a functional and reusable way. In this article, you’ll learn the basics of styled components and how to properly apply them to your React applications. You should have worked on React previously before going through this tutorial. If you’re looking for various options in styling React components, you can check out our previous post on the subject.

Read more

Code Splitting by Routes and Components in React

When your app’s bundle starts to grow it will slow things down. That’s why we see a lot more use of code-splitting in modern web development. Code-splitting is the process of taking one large bundle containing your entire app and splitting them up into multiple smaller bundles that contain separate parts of your app. This technique allows you to load chunks of code only when needed.

For example, when a visitor enters your application on the homepage, there is no need to load in all the code related to a completely separate page. That user might not even go to that route at all, so we only want to load it when the user navigates to that page. If we can load only the code necessary for the home page this means our initial loading time will be a lot faster, especially on slow networks.

In this post, we will take a look at how we can boost the performance of our React applications by implementing code-splitting using React Loadable. If you rather save time and start with a boilerplate that includes code-splitting, try out React Milkshake.

An in-depth beginner's guide to testing React applications

Most developers know it: Automated testing is important. There are many reasons arguing for it.

You might unknowingly break an app whenever you change a line of code.
Manually testing your app after each change is cumbersome.
Tests help document edge cases.
Aspiring developers can get a competitive advantage over other job candidates.

Unfortunately, writing tests can be a real struggle for beginners. It's like developing in a completely new environment. You may not know what to test. You might spend hours to write a simple test case because you hit error after error. You're used to developing in the browser and it's great dev tools. But testing just doesn't work the same way.

It doesn't have to be that difficult though. With the right approach, you can start writing tests with confidence even as a beginner.

The goal of this blog post is to act as a guide for your first tests. We'll take a small application as an example and cover it with tests. We will discuss what we should test and why we should test it. We will see different techniques that can help us to write tests with confidence without relying on trial and error.

React video courses

Because I need to pay my bills 😉