Copy
Stay up to date with the latest news on React.
View this email in your browser

The React Newsletter

Hi <<First Name>>,
 
Creating A Multi-Author Blog With Next.js
This article explains how we can connect different types of content in a Next.js application. With this technique, we can add any kind of one-to-one, one-to-many, or even many-to-many relationship to our projects.

Read more
 
How to Cancel Pending API Requests to Show Correct Data

I recently had to create a widget in React that fetches data from multiple API endpoints. As the user clicks around, new data is fetched and marshalled into the UI. But it caused some problems.

One problem quickly became evident: if the user clicked around fast enough, as previous network requests got resolved, the UI was updated with incorrect, outdated data for a brief period of time.


Read more
 
The highly customizable and versatile GraphQL client - urql
urql is a GraphQL client that exposes a set of helpers for several frameworks. It's built to be highly customizable and versatile so you can take it from getting started with your first GraphQL project all the way to building complex apps and experimenting with GraphQL clients.

While GraphQL is an elegant protocol and schema language, client libraries today typically come with large API footprints. We aim to create something more lightweight instead.

Join @bdougieYO and @kitten in learning the latest in consuming GraphQL.

Watch video
 
Setting up Chakra UI in a Next.js Project

If you ask me which React Component Library I love the most, then my answer won't be something super popular like Material UI, AntD, or ReactStrap. Instead, you will hear Chakra UI coming out of my mouth.

What is Chakra UI?

This is what the homepage of Chakra UI describes itself as:

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Chakra UI is a latecomer to this ecosystem of React component libraries, but you will be missing out on a lot if you under-estimate how good it can be.

Why do I like Chakra UI?

Some of my favorite features about Chakra UI are :

  • All the components are accessible. No more looking for how you can make your button more accessible now.
  • TailwindCSS has inspired the color palette chosen for Chakra UI's default theme, and we all know how good those color choices are.
  • The default component looks gorgeous, and I rarely have to change anything before using them.
  • Adding dark mode support is as easy as breathing.

When it comes to React, my go-to way to bootstrap a new project is to use Next.js instead of Create-React-App. The reason behind this choice is worthy of a blog post in itself. I will write one later probably.

So let's do some coding now.


Read more
 
The Evolution of Redux Testing Approaches
What should a beginning dev know about testing Redux?

For #1, I wouldn't necessarily expect a beginner to know much testing at all, really :) I actually just spent the last couple weeks helping guide a pair of interns through writing their first React component tests with React Testing Library, and it was a bit eye-opening when I had to explain so many different moving pieces: Jest, RTL, describeitjest.fn()render()expect(), and even just "write multiple tests that feed in different inputs, and check to see what the output is". It's not an easy or natural thing, and I'd kinda forgotten that.

All that said: the bare basic bit of testing I'd expect a beginner to be able to at least try or hopefully understand is testing reducers, because those are the simplest possible things to test: pure functions, whose entire logic depends on (state, action), and it's just expect(actual).toEqual(expected) in some way


Read more
 
How to Build an Image Comparison Slider

Today we'll be building an image comparison slider component using React. This kind of UI treatment works well for comparing before and after, or side by side images.

The component we'll build is responsive and allows for touch events and basic keyboard support. We'll use several React hooks, including useEffectuseStateuseRef and useCallback, so familiarity with hooks is helpful, but not required!


Read more
 
React video courses
Because I need to pay my bills 😉
 
Copyright © 2021 ABL - The Problem Solver, All rights reserved.


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp