Latest Articles & Tutorials

Designing Reusable React Components (
Jan 20, 2020
A personal, opinionated take on designing components in a world of simple scalable reuse.
  • Fernando Doglio
How to create a website with Next.js and React (
Jan 20, 2020
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.
  • Nick Major
A guide to React refs: useRef and createRef (
Jan 17, 2020
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.
  • Jeremias Menichelli
Animating React Components Using React Transition Group (
Jan 17, 2020
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.
  • Yusuff Faruq
React Conditional Rendering (
Jan 16, 2020
The article aims to be an exhaustive list of options for conditional renderings in React and best practices for these patterns.
React with TypeScript: Best Practices (
Jan 16, 2020
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.
  • Joe Previte
10 Ways to Optimize Your React App’s Performance (
Jan 15, 2020
How to optimize performance to deliver an awesome user experience.
  • Chidume Nnamdi
Learning the Basic Components of React Native (
Jan 15, 2020
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.
  • Stephen Hartfield
React Event Handlers: onClick, onChange ... (
Jan 15, 2020
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.
Next.js 9.2 (
Jan 15, 2020
We are excited today to introduce Next.js 9.2.
Storybook 5.3 (
Jan 14, 2020
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.
  • Michael Shilman
The complete guide to building headless interface components in React (
Jan 14, 2020
Today, we’re going to take a look at one of the most exciting UI component-building patterns: headless components.
  • Paramanantham Harrison
    React map library comparison (
    Jan 14, 2020
    In this post we will investigate several existing React map libraries and compare them based on functionality, technology, and ease of use.
    • Siegfried Grimbeek
      Integrating AppCenter SDK with React Native (
      Jan 14, 2020
      Using AppCenter’s services in a React Native application.
      • Said Hayani
      Pagination in Gatsby Using gatsby-awesome-pagination (
      Jan 14, 2020
      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.
      • Joshua Hall
      How to For Loop in React (With Examples) (
      Jan 13, 2020
      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.
      • James King
        An Introduction To React’s Context API (
        Jan 13, 2020
        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.
        • Yusuff Faruq
        Exploring TinaCMS with Gatsby (
        Jan 13, 2020
        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.
        • Joshua Hall
        Best New Features of Create React App 3.3 (
        Jan 13, 2020
        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.
        • Nwose Lotanna Victor
        React Filter: Filtering Arrays in React (With Examples) (
        Jan 11, 2020
        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.
        • James King
          Fix: Template Not Provided Using Create-React-App (
          Jan 10, 2020
          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.
          • James King
          Debunking the Myth: Accessibility and React (
          Jan 09, 2020
          JavaScript frameworks are becoming the norm for creating powerful, fast, and adaptive web sites. One of the most popular frameworks is React.
          • Mark Steadman
          3 ways to edit Markdown with TinaCMS + Gatsby (
          Jan 09, 2020
          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.
          • Thomas Weibenfalk
          New Next.js Documentation (
          Jan 09, 2020
          We're excited to announce the new Next.js documentation.
          From create-react-app to PWA (
          Jan 08, 2020
          Take your app from the console to the web to your users’ home screens.
          • John Reilly
          Leaflet Marker Clustering (
          Jan 08, 2020
          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.
            React, "Diffing" and the DOM (
            Jan 08, 2020
            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.
            • Rachel Adaw
            Firebase Hooks with Ionic React (
            Jan 07, 2020
            In this post, I’ll walk through the process of creating a custom hook that uploads a file to Firebase.
            • Aaron Saunders
            How to create a React Native app with PostgreSQL and GraphQL: Part 2 (
            Jan 07, 2020
            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.
            • Austin Roy Omondi
            Using Suspense with react-query (
            Jan 07, 2020
            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.
            • Abdulazeez Abdulazeez Adeshina
            Declarative Storybook configuration (
            Jan 07, 2020
            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.
            • Norbert de Langen
            Next.js 9.1.7 (
            Jan 06, 2020
            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!
            How to make a confetti cannon with React Spring (
            Jan 06, 2020
            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.
            • Joshua Saunders
            State Management in Gatsby using the wrapRootElement Hook (
            Jan 03, 2020
            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.
            • Joshua Hall
            Comparing React testing libraries (
            Jan 02, 2020
            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.
            • Murat Çatal
            Dealing with links in Next.js (
            Jan 02, 2020
            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.
            • Radoslav Stankov
            Understanding CSS-in-JS (
            Jan 02, 2020
            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.
            • Leonardo Maldonado
            Sharing React Components: From Atoms and Molecules to Pages (
            Jan 01, 2020
            Sharing components of all scales to optimize frontend collaboration.
            • Eden Ella
            How to use React-Leaflet (
            Jan 01, 2020
            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.
              How to get previous props/state with React Hooks (
              Jan 01, 2020
              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.
              • Ohans Emmanuel
              Implementing the Container Pattern using React Hooks (
              Dec 31, 2019
              How to use the useState hook to create a functional container component.
              • Sonny Recio
              Understanding Compound Components in React (
              Dec 30, 2019
              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.
              • Aayush Jaiswal
              How to build an accessible date picker component in React (
              Dec 30, 2019
              In this article, we will be building an accessible date picker component that leverages the accessibility guidelines.
              • Jeremy Kithome
              Gatsby and WordPress (
              Dec 30, 2019
              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.
              • Chris Coyier
              Google Maps Marker Clustering (
              Dec 29, 2019
              This article shows how to integrate clustering with supercluster into your React with Google Maps app.
                Build better forms with React Native UI components (
                Dec 28, 2019
                In this post, we will demonstrate how to build different performant React Native forms with native React Native UI components.
                • Peter Ekene Eze
                Trim the Fat From Your Bundles Using Webpack Analyzer & React Lazy/Suspense (
                Dec 26, 2019
                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.
                What Are the React Team Principles? (
                Dec 25, 2019
                This is my personal attempt to formalize observations about how the React team operates — other team members may have different perspectives.
                  React area chart comparison (
                  Dec 24, 2019
                  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.
                  • Leigh Halliday
                  Internationalization in React with React-Intl (
                  Dec 24, 2019
                  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.
                  • Alex Taylor