Latest Articles & Tutorials

In this article, let’s discuss how React Query addresses the above-mentioned issue by building a small pokemon application and diving into its key concepts.

We will be building a simple demo site like this one, and you can clone the repo for it here. You’ll need to do the Set up Contentful and Set up Netlify steps to make it work for you!

When I started at PayPal, the app I started with used Redux for its state management (like pretty much every other React app at the time). This was the first React product I'd ever worked on and I was excited to use the latest and greatest tools for state management.

A simple guide to use Next.js with Stitches.

The Jamstack architecture is a modern approach to an old idea: making fast, static websites, but making them dynamic with tools like JavaScript.

Among others, Next.js has dubbed itself: The React Framework for Static Websites. But just like every other framework whose goal is to help you build what matters by abstracting common, redundant tasks, you’re often required to learn something new and opinionated. With Next.js, one of the things you need to know is how to integrate different CSS methods with its API, and that is the focus of this tutorial.

In this post, we are going to go through creating a few forms using Formik. Formik is a simple React/React Native form library that helps with handling form state, input validation, formatting, error handling, form submission, amongst other things.

In this article, Aleem Isiaka explains what GraphQL query constructs are, and how they can be used to interact with the data access layer of a Gatsby website. Let’s take a look at some of the advanced use cases of GraphQL within a Gatsby website by using matching data from different sources.

In this guide, you will get an overview of Wouter and see how it can be implemented in place of React Router.

In this post, I'll first introduce you to the localStorage API before we have a look at how to use it in React function components with React hooks.

Developing and shipping production-ready applications to the web today couldn't be easier than with Next.js and Vercel. It provides a world-class developer experience right out of the box and is optimized for powering high-performance production workloads.

A few years ago, I wrote an introductory React tutorial based on a workshop I taught. Since that point in history, I've taught hundreds of new web developers React, and the library has evolved significantly. I thought it was time to come back to the fundamentals and discuss learning React from absolute zero in the era of Hooks.

When was the last time you tried your app out on the kinds of devices your end users are using? If you haven't, have you at least tried to simulate the kind of performance characteristics of your users on low-end devices?

I have once again started learning React, but this time I’m sticking to it. I’ll try to point out my mistakes and why it didn’t work out the first time.

How To Share Code Between React Native And React JS

In this article, Blessing explains how GSAP plays well with the React library by integrating its functions into a React component in building an example landing page with a variety of animations.

This article walks through how I display relevant, themed icons when linking to content on this site based on the topic or type of content. If you've visited the homepage of this site, I use a variation of this component to display my recent content, featured content, and recent video lessons.

When was the last time you saw an error and had no idea what it meant (and therefore no idea what to do about it)? Today? Yeah, you're not alone... Let's talk about how to fix that.

The goal of this guide is to provide an easier to read version of the official React hooks documentation. This guide is a living document; with relevant changes made as the official docs are updated.

In this guide, we will be looking at Next.js, a popular React framework that offers a great developer experience and ships with all of the features you need for production. We will also build a blog, step by step, using Next.js and MDX. Finally, we’ll cover why you would opt for Next.js instead of “vanilla” React and alternatives such as Gatsby.

Errors are bound to happen in our applications, whether they’re server-related errors, edge cases, or others. As such, many methods have been developed to prevent these errors from interfering with user and developer experience. In React, one of such method is the use of error boundaries.

In this beginner React tutorial we're going to build a quiz app. We'll work with complex state objects, how to handle different state hooks, and render things based on state.

React components afford us the opportunity to encapsulate state, logic, and markup in a single place. A component is like a magical machine where you pass in props and a beautiful component pops out the other end.

Learn about the new library introduced by Facebook called Recoil, which aims to solve a few problems such as shared state, derived data and queries, app-wide observation, and many more.

In this guide, I will show you how to use Redux in your React TypeScript project by building an app that allows you to add, delete, and show articles.

This post documents my learnings and the steps I took to implement syntax highlighting in a Next.js Markdown blog.

I still remember when I first heard about React. It was January 2014. I was listening to a podcast. Pete Hunt and Jordan Walke were on talking about this framework they created at Facebook with no support for two way data-binding, no built-in HTTP library, no dependency injection, and in place of templates it had this weird XML-like syntax for the UI.

We will be building a simple demo site like this one, and you can clone the repo for it here. You’ll need to do the Set up Prismic and Set up Netlify steps to make it work for you!

Ever needed to wire up a confirmation dialog in React? You know the ones: “Really delete this file? — Yes / Cancel”

I typically use plain React for forms. But I just converted a React form to use Formik.

React Spectrum is a collection of libraries authored by Adobe Team to help developers build a feature-rich application with React. It has three main libraries that you can use together or separately as you see fit.

Getting started with a new React app is easier than ever with frameworks like Next.js. But those frameworks don’t always include all of the tools you want to use.

Our goal is to explore some of Recoil’s main features in practice.

Authentication verifies who a user is, while authorization controls what a user can access. Next.js supports multiple patterns for authentication, each designed for different use cases. This guide will allow you to choose your adventure based on your constraints.

Props and PropTypes are an important mechanism for passing information between React components, and we’re going to look into them in great detail here.

This tutorial shows you how and why to use React Testing Library for low-friction Test Driven Development (TDD).

In this tutorial, we’ll demonstrate how to deploy a React application in eight different ways. All the services described in this post are completely free with no hidden credit card requirements.

Server-side rendering can be powerful but it does require thinking in multiple contexts so it's important to be familiar with some of the common gotchas when developing Server-Side Rendered websites.

React.js tips from top React developers and engineers.

One of the best ways to learn is by doing. But often developers struggle with the big question "what should I build?"

In mid-July, Adobe announced the release of React Spectrum, a collection of tools for building adaptive, accessible, and rich user experiences. At its core, React Spectrum is composed of three main parts.

How to build scalable React apps with independent and shareable UI components and hooks.

In this post, I'll describe my personal journey with Next.js. I'll also discuss why I believe that it is the right time to add it to your React stack.

Today, we are publishing the first Release Candidate for React 17. It has been two and a half years since the previous major release of React, which is a long time even by our standards! In this blog post, we will describe the role of this major release, what changes you can expect in it, and how you can try this release.

In this beginner React project, we're going to learn how to use state hooks, handle events, apply CSS based on state, and more!

In this guide, we’ll analyze two frameworks that help developers in the full-stack application world strive toward these goals: Blitz.js and RedwoodJS.

The release of some awesome JavaScript frameworks, such as Next and Gatsby, has lead to more server-side applications being made. Let’s see a few reasons why single-page applications are not the best choice for some cases, especially for applications that are going to depend heavily on SEO.

In this tutorial, let’s take a look at how to create routes using the React Router v6 library. Do note that, at the time of writing this post, React Router v6 is still in beta. This tutorial is going to give you a peek into some of the new features the library is coming out with.

In the following guide, you’ll learn how to proactively use product tours to onboard users into a new and complex UX, and how to familiarize them with UI functionality without boring them, using a typical React app.

We’re going to put together a Next.js app that uses the YouTube API To fetch videos from a playlist.