Latest Articles & Tutorials

A personal, opinionated take on designing components in a world of simple scalable reuse.

In this tutorial, we’ll show you how to bootstrap a Next.js web application and add some basic components and features of a typical website.

In this article, we’re going to investigate why React, a framework meant to abstract your code away from DOM manipulation, leaves the door open for developers to access it.

Animations help improve the feel of a website or web app and this often leads to better user experience. We can use animations during different events: during page transitions, while scrolling and of course during mounting and unmounting of components in component-based frameworks or libraries such as React.

The article aims to be an exhaustive list of options for conditional renderings in React and best practices for these patterns.

React and TypeScript are two awesome technologies used by a lot of developers these days. Knowing how to do things can get tricky, and sometimes it’s hard to find the right answer. Not to worry. We’ve put together the best practices along with examples to clarify any doubts you may have.

How to optimize performance to deliver an awesome user experience.

If you are familiar with normal React, it will be easy to pick up React Native, as long as you can understand the different components used. In this guide, we will look through the basic Native components that React Native uses.

In this React tutorial, we will get to know event handlers in React for HTML elements such as button and input elements. You will learn how to use a button with its onClick event and how to define and use different kinds of event handlers. Essentially we will go through three kinds of event handlers: event handlers, inline event handlers and callback event handlers.

We are excited today to introduce Next.js 9.2.

Storybook has been rapidly evolving to meet this challenge. Now I’m excited to announce our latest release — Storybook 5.3 supercharges building and documenting production design systems.

Today, we’re going to take a look at one of the most exciting UI component-building patterns: headless components.

In this post we will investigate several existing React map libraries and compare them based on functionality, technology, and ease of use.

Using AppCenter’s services in a React Native application.

Despite Gatsby’s amazing performance, it would be best not to force the user to load every single post onto the same page. Instead, we’ll explore the gatsby-awesome-pagination plugin to segment our post archive into more manageable sections.

Let’s explore how to write a for loop in React. Although we can write a for loop in React, ES6 provides the more appropriate map function for us to use.

In this article, you will learn how to use React’s Context API which allows you to manage global application states in your React apps without resorting to props drilling.

TinaCMS, when coupled with Gatsby, gives us to ability to manipulate our markdown files directly on our pages, visually. TinaCMS also works with Next.js, but here we’ll explore this powerful new tool with a Gatsby site.

This post takes you through the top features in the newly released Create React App 3.3. See how the latest updates help speed your development of React apps.

How can we use React to filter an array? What is filter in React? I’ll answer all of these questions plus show you some examples to get you started.

I ran in to an unusual error recently when I tried to run create-react-app. I’d recieve Template Not Provided Using Create React App. Let’s explore what this error is and how we can fix it.

JavaScript frameworks are becoming the norm for creating powerful, fast, and adaptive web sites. One of the most popular frameworks is React.

In this post, I will explore the three different methods Tina offers to edit Markdown on your Gatsby site. You’ll learn how to set up Tina with both Page Queries and Static Queries.

We're excited to announce the new Next.js documentation.

Take your app from the console to the web to your users’ home screens.

Performance can begin to degrade pretty quickly when you are trying to show large amounts of data on a map. Even at hundreds of markers using Leaflet via React Leaflet, you may feel it start to lag.

The "Virtual DOM" or VDOM is very similar to the real DOM, in that it is a tree-like structure kept in-memory, where React elements are represented as objects.

In this post, I’ll walk through the process of creating a custom hook that uploads a file to Firebase.

In the previous article, we created a GraphQL server with NodeJS and Express. We will now look to consume the endpoints in the server we created using a React Native mobile app.

In this article, we’ll look at using the react-query library alongside Suspense by building a simple recipe app that fetches recipe data from an API and renders it to the DOM.

I’m excited to share the new simpler, more declarative way to configure Storybook in 5.3. This makes it easier to accomplish common configuration tasks like adding addons and decorators.

Next.js 9 was released six months ago, followed by Next.js 9.1 three months ago. These two releases added very powerful new features to Next.js, without increasing our baseline client runtime size. Since then, we've focused heavily on refining and improving the framework as a whole: 9.1.1, 9.1.2, 9.1.3, 9.1.4, 9.1.5, 9.1.6, and 9.1.7. Let's dive into what these releases have improved!

In this tutorial, you’ll learn how to implement a confetti cannon that can fire off of any element using React Spring from scratch. No previous React Spring experience required! The only prerequisite is a basic understanding of React and hooks.

Since Gatsby handles our routes for us, that leaves us with nowhere to wrap our app with a Redux store or provider. In this article we’ll learn a clever trick to get around that.

If you create something, no matter what it is, you should test it before serving it to other people. That way, you can have more confidence and control over your finished product before you roll it out.

In this article, I’m going to explain two of my techniques for isolating routing in your application. I use Next as an example, but they can be applied to pretty much all routing libraries.

We're going to learn about CSS-in-JS, the powers of this technique and how we can create better applications by writing our CSS code with JavaScript.

Sharing components of all scales to optimize frontend collaboration.

In this article, we’ll see how to use React-Leaflet to render Leaflet maps inside of your React app. We’ll show markers with custom icons, and display a popup on the map when clicked. Later, we will see what needs to change to load remote vs local data using SWR.

Accessing the previous props or state from within a functional component is one of those deceptively simple problems you’ll likely face as you work with React Hooks.

How to use the useState hook to create a functional container component.

Compound component pattern may seem a bit tricky at first but don’t worry, by the end of this article you will clearly understand them.

In this article, we will be building an accessible date picker component that leverages the accessibility guidelines.

Gatsby and WordPress is an interesting combo to watch. On one hand, it makes perfect sense. Gatsby can suck up data from anywhere, and with WordPress having a native REST API, it makes for a good pairing.

This article shows how to integrate clustering with supercluster into your React with Google Maps app.

In this post, we will demonstrate how to build different performant React Native forms with native React Native UI components.

In this post I will go over a real world example from my work at Wix where I was able to trim my bundle size by about 80% using Webpack Analyzer and React Lazy/Suspense.

This is my personal attempt to formalize observations about how the React team operates — other team members may have different perspectives.

React has a number of great charting options to choose from. Not all have the same charts available, but most touch on the staples, such as line, bar, and pie charts. We’ll be focusing on an area chart, which is similar to a line chart, but with the area underneath the line shaded in.

If you’re creating a web application that requires translation into multiple different languages, it can be difficult to implement this manually. That’s why many use internationalization (i18n) libraries, which make adding translations as simple as adding another string.