Latest Articles & Tutorials

Next.js 10 (
Oct 27, 2020
Next.js 10 introduces Built-in Image Optimization, Internationalized Routing, Next.js Analytics, React 17 Support, and more.
  • Tim Neutkens
  • Joe Haddad
  • JJ Kasper
  • Davis Connor
  • Luis Alvarez
  • Shu Uesugi
Run Code in React Before Render (
Oct 27, 2020
Want to run some code before your React component renders? There are a few ways to make this work, and we’ll talk about them here.
    How to move around blocks of code with React and Tailwind (
    Oct 27, 2020
    While working on a Next.js website I had the need to move a React component to a whole different place in my markup, depending on the size of the screen.
    Building an Ecommerce Operational Dashboard in React (
    Oct 26, 2020
    We will be constructing an Operational Dashboard in React for an ecommerce store, utilizing a number of charts and components from KendoReact.
    Best Practices with React Hooks (
    Oct 26, 2020
    In this post, I will share 6 tips about React Hooks that will be useful to keep as a guideline as you implement hooks into your components.
    • Nathan Sebhastian
    Introducing Framer Motion (
    Oct 26, 2020
    With Framer Motion, you don’t need to be a CSS expert to make beautiful animations. Framer Motion provides us with production-ready animations and a low-level API we can interact with to integrate these animations into our applications.
    • Nefe Emadamerho-Atori
    Getting Started With Next.js (
    Oct 22, 2020
    Next.js is a React framework that is bound to ease your life as a React developer by abstracting away the common and redundant tasks (such as routing) into relatively simpler and powerful APIs. That way, you can focus on writing your apps instead of reinventing the wheel.
    • Adebiyi Adedotun Lukman
    Testing React Native Apps In the Cloud Part 1 (
    Oct 22, 2020
    A quick guide on how to test React Native apps in the cloud instead of using testing devices.
    • Mike Grabowski
    Using React in web games (
    Oct 22, 2020
    In this article, we will be looking at how React is used in developing web games by building a tic-tac-toe game.
    • Fortune Ikechi
    Next.js - The Data Story (
    Oct 22, 2020
    In this post, we'll take the next steps to talk about the data story, how it fits in to the picture, and how to implement various access patterns with and without authentication and authorization.
    Throttling data requests with React Hooks (
    Oct 21, 2020
    When an application loads data, typically, relatively few HTTP requests are made. For example, if we imagine we’re making a student administration application, then a “view” screen might make a single HTTP request to load that student’s data before displaying it.
    • John Reilly
    Getting Started with Storybook: How to Develop React Components Without an App (
    Oct 21, 2020
    I wanted to write up some thoughts and a quick tutorial on one of my favorite development tools, Storybook. You can use Storybook which allows you to develop user interface components in isolation.
    • Ali Spittel
    How to Use Chakra UI with Next.js and React (
    Oct 20, 2020
    Building websites and applications is hard. There are a lot of things to consider to make sure our apps are usable and accessible including how our React components work.
    • Colby Fayock
    How to Create a Camera App with Expo and React Native (
    Oct 20, 2020
    In this tutorial, we will be building a simple camera app in which the user can take pictures, see previews of their pictures, use flash mode, and switch between the front and the back cameras.
    • Said Hayani
    React v17.0 (
    Oct 20, 2020
    Today, we are releasing React 17! We’ve written at length about the role of the React 17 release and the changes it contains in the React 17 RC blog post.
    Next.js Basics Tutorial – Server-side Rendering, Static Sites, REST APIs, Routing, and More (
    Oct 16, 2020
    In this article, I will walk you through the Nextjs features that I personally use the most.
    • Said Hayani
    Supercharge Testing React Applications With Wallaby.js (
    Oct 16, 2020
    This article will introduce you to Wallaby.js — a JavaScript productivity tool that supercharges your IDE by allowing you to get real-time feedback on your JavaScript tests in your code editor even before saving the file. You will also learn how to use Wallaby.js for testing React applications.
    • Kelvin Omereshone
    How to build a comment system for Gatsby using GitHub Issues (
    Oct 16, 2020
    Comment systems play an important role because they enable you to interact with your blog readers. There are paid services such as Commento and Disqus available if you want to add a comment system to your blog, but in this article, you’ll learn how to build a comment system for a Gatsby blog using GitHub Issues.
    • Ganesh Mani
    Monetizing your React Native app with Stripe (
    Oct 16, 2020
    Build a complete, fully functioning app with Expo, UI Kitten, Stripe, and AdonisJs
    • Foysal Ahamed
    Managing Long-Running Tasks In A React App With Web Workers (
    Oct 15, 2020
    In this tutorial, we’re going to learn how to use the Web Worker API to manage time-consuming and UI-blocking tasks in a JavaScript app by building a sample web app that leverages Web Workers. Finally, we’ll end the article by transferring everything to a React application.
    • Chidi Orji
      Wouter: A Minimalist Alternative to React Router (
      Oct 13, 2020
      Wouter is a minimalist routing library that implements only the most used functionality from React Router. It also targets only the most recent environment, which is React v16.8.0+ and ES6-compliant browsers to further reduce the bundle size.
      • Nathan Sebhastian
      React Form Validation With Formik And Yup (
      Oct 12, 2020
      In this article, we’ll learn how Formik handles the state of the form data, validates the data, and handles form submission.
      • Nefe Emadamerho-Atori
      How to set up internationalization in React using Lingui.js (
      Oct 12, 2020
      For the purpose of this article, I’ll demonstrate how to use Lingui.js. This is a powerful library that not only handles internationalization in native JavaScript applications, but also in React, one of the most well-known JavaScript libraries.
      • Kasra Khosravi
      How To Manage File Uploads In React With Google Storage And GraphQL (
      Oct 08, 2020
      From a user’s profile picture to other media assets, data collection and storage to cloud services through file uploads have become an essential feature for most modern applications. In this article, you will learn how file uploads can be implemented in a GraphQL application.
      • Nwani Victory
      How to Build a Blog with Gatsby and Netlify CMS – A Complete Guide (
      Oct 06, 2020
      In this article, we are going to build a blog with Gatsby and Netlify CMS. You will learn how to install Gatsby on your computer and use it to quickly develop a super fast blog site.
      • Mohammed Asker
      How to build a Markdown plugin for your Gatsby blog (
      Oct 06, 2020
      In this article, you’ll learn how to build a Markdown plugin for your Gatsby blog. As an example, we’ll build a text highlighting plugin so that when it finds a specified syntax that you’ve defined around a text, it processes it into a styled HTML that displays the text as highlighted.
      • Dillion Megida
      Building Figma plugins with React (
      Oct 06, 2020
      This article will cover how to set up a Figma plugin project with webpack to implement the UI using React. The purpose of the plugin will be to generate three random colors and let the user pick one to assign to a selected element in the Figma document.
      • Doğacan Bilgili
        Routing in Next.js – A Complete Beginner's Guide (
        Oct 05, 2020
        Next.js is a React framework that ships with all the features you need for production. It enables routing in your app by using the file-system-based routing.
        • Ibrahima Ndaw
        How to Add Drag and Drop in React with React Beautiful DnD (
        Oct 05, 2020
        Drag and Drop is a common interaction technique added to allow people to intuitively move things around on a page. This could be reordering a list or even putting together a puzzle.
        • Colby Fayock
        Accessible components with Reakit (
        Oct 05, 2020
        The most common thing in a React application is the reusability of components. We have been using and reusing the same components in different parts of an application and this is one of the most fantastic features that we have in React applications.
        • Leonardo Maldonado
        React State 5 Ways (
        Oct 05, 2020
        In this post I'm going to walk through how to implement global state management in a React application using the same pattern across 5 of the most popular libraries and APIs using the most modern and up-to-date versions of the libraries.
        An Honest Review of Gatsby (
        Oct 02, 2020
        We decided to adopt Gatsby for Sentry’s customer-facing documentation - well, I should say that I decided. We were already using it successfully for a variety of static marketing content, and I knew it had a lot of hype, so after a brief proof-of-concept it seemed like a safe choice.
        • David Cramer
        Why React Hooks over HOCs (
        Oct 01, 2020
        I am still an advocate for higher-order components these days, because there composable nature of enhancing components fascinates me. However, there are problems with HOCs which shouldn't be denied and which are entirely solved by React Hooks.
        Positioning a tooltip in React using Tippy (
        Oct 01, 2020
        This tutorial will show you how to create and position tooltips in a React project using Tippy.
        • Samantha Snead
        JQuery to React: How we rewrote the HelloSign Editor (
        Sep 30, 2020
        HelloSign is a Dropbox company that provides a Web-based eSignature solution: If you have a document you want someone to sign, you upload the document file, then show you an editor in which you place all the fields to build the form the recipient will fill out—signatures, dates, initials, etc.
        • Asa Ayers
        Creating Mirrors in React-Three-Fiber and Three.js (
        Sep 30, 2020
        A brief walk-through of how to create a mirror scene with react-three-fiber.
        • Gianmarco Simone
        • Marco Ludovico Perego
          Controlled Inputs Using React Hooks (
          Sep 29, 2020
          There are 2 approaches to access the value of an input element in React. In the first approach, named uncontrolled input, you access the value from a reference to the input element. The second approach, which I like because it doesn’t use references, is using a controlled input. Let’s see how to design controlled inputs using React hooks.
          • Dmitri Pavlutin
          Unit Testing In React Native Applications (
          Sep 29, 2020
          Unit testing has become an integral part of the software development process. It is the level of testing at which the components of the software are tested. In this tutorial, you’ll learn how to test units of a React Native application.
          • Fortune Ikechi
          Stop Stumbling Around in React Learning Darkness (
          Sep 28, 2020
          Learning can be a lot like stumbling around in the darkness. Except not only is there no illumination to guide you, you're also in someone else's house and their kids are less clean than yours and their dogs are darker and less forgiving than yours.
          React Renderers: an Overview (
          Sep 28, 2020
          One of the most advanced features of React is the ability to write renderers for different environments. You can be surprised, but it’s possible to create CLI or Hardware apps using React! In this article, I will look over the most interesting React renderers.
          • Ilya Lesik
            How Your Gatsby Site Can Get a Perfect Google Lighthouse Score After the Version 6 Update (
            Sep 28, 2020
            I want to share with you the steps I took in order to re-achieve a perfect 100 Google Lighthouse score.
            • Erik Larsson
            One React mistake that's slowing you down (
            Sep 25, 2020
            One thing that I like about React is that it allows me to write my components like little black boxes of abstraction. I can look at a design and draw lines around the UI elements and I know the components that I'm going to be making.
            What’s new in React v17, and the road to v18 (
            Sep 25, 2020
            A few weeks ago, the React team released the library’s latest version, React v17.0 RC. In this post, we will look into the new changes and updates this new release shipped with.
            • Nwose Lotanna
            Myths about useEffect (
            Sep 24, 2020
            I've taught React to tens of thousands of developers. Before and after hooks were released. One thing I've observed is people tend to struggle with the useEffect hook and there are some common hang-ups for them that I'd like to address here.
            How to Use SVG Icons in React with React Icons and Font Awesome (
            Sep 24, 2020
            How can we add icons using SVG to our React apps to improve our visual communication?
            • Colby Fayock
            Diving into the new JSX transform (
            Sep 24, 2020
            With React 17, you no longer need to import React in your files to use React. Confused? This article will tell you what you need to know in order to migrate both your code and knowledge to this new way of doing things.
            • Kristofer Selbekk
            Understanding React Rendering (
            Sep 23, 2020
            Learn to optimize React rendering process.
            • Nathan Nguyen
              RedwoodJS: 5 Features that Make it Unique among JAMstack Frameworks (
              Sep 23, 2020
              A full-stack framework that combines, React, GraphQL, and Prisma.
              • Chameera Dulanga
                Introducing the New JSX Transform (
                Sep 22, 2020
                Although React 17 doesn’t contain new features, it will provide support for a new version of the JSX transform. In this post, we will describe what it is and how to try it.
                • Luna Ruan
                The Complete Guide to Next.js Authentication (
                Sep 21, 2020
                In this guide you will learn how to implement authentication in a Next.js app. I will cover client authentication, authenticated server-rendered pages, authenticated API routes, protected routes, and redirects.