Latest Articles & Tutorials

How to use the useMemo React hook (
Jul 20, 2019
Find out what the useMemo React hook is useful for, and how to work with it!
How to use the useEffect React hook (
Jul 19, 2019
Find out what the useEffect React hook is useful for, and how to work with it!
Using GraphQL Playground with Gatsby (
Jul 18, 2019
In this article, we are concerned with the build process, which is powered by GraphQL. This is the part where your data is managed.
  • Adebiyi Adedotun
How to use the useCallback React hook (
Jul 18, 2019
Find out what the useCallback React hook is useful for, and how to work with it!
How to connect your React app to a backend on the same origin (
Jul 18, 2019
How to serve a React and a server-side backend app from the same origin, without having to use CORS on the server and worrying about ports.
    Making Gatsby a PWA: Service Worker and Web App Manifest (
    Jul 18, 2019
    Progressive Web Apps (PWAs) allow developers to deliver an app-like experience to the user. Paired with the top-notch performance of Gatsby.js, and you get a blazing fast website.
    • Juan Villela
    How to build a reusable animation component using React Hooks (
    Jul 18, 2019
    Animations delight users. And you’d think, by the sheer volume of articles, that React Hooks delight developers. But for me, fatigue was starting to creep into my opinions on Hooks.
    • Christian Sepulveda
    Back to Basics: Event Handling in React (
    Jul 17, 2019
    What are event handlers, and why are they important? Event handlers make a website’s user experience a two-way street. You’re not just presented with nicely styled content… you can actually click, type, scroll it!
    • William Le
    Frontend design, react, and a bridge over the great divide (
    Jul 17, 2019
    Frontend designers create the HTML, CSS, and presentational JavaScript code that powers web products’ user interfaces. I see frontend design as helpful mortar that bridges the gap between design and development.
    • Brad Frost
    How to use Mapbox GL with React (
    Jul 17, 2019
    In this article, we are going to make use of react-map-gl to build two map components, one that displays your current location and another that allows you to search for locations across the globe.
    • Austin Roy Omondi
      Write tests. Not too many. Mostly integration. (
      Jul 17, 2019
      Guillermo Rauch tweeted this a while back. Let's take a dive into what it means.
      How to use the useState React hook (
      Jul 17, 2019
      Find out what the useState React hook is useful for, and how to work with it!
      Next.js Practical Introduction: Pages and Layout (
      Jul 16, 2019
      Learn how to use Next.js to create server-side rendered React applications.
      • Dan Arias
      Re-writing React Navigation Stack (
      Jul 16, 2019
      Recently I’ve been working with with Michał Osadnik on a new version of the stack navigator, which lives under the react-navigation-stack repo as a standalone package.
      • Satyajit Sahoo
      Redux with Code-Splitting and Type Checking (
      Jul 16, 2019
      This article assumes a working knowledge of Redux, React, React-Redux, TypeScript, and uses a little bit of Lodash for convenience.
      • Matthew Gerstman
      Adding Sitemaps to Gatsby Websites (
      Jul 15, 2019
      Thankfully, adding a sitemap to a Gatsby.js project is incredibly simple! Let’s go over how in the post below.
      • Daniel Stout
      Build a Chat App Using React Hooks in 100 Lines of Code (
      Jul 15, 2019
      We’re going to see how hooks make our development process easier and faster by building a chat application.
      • Akash Joshi
      An Easy Way to Know When React Components Enter the Browser Viewport (
      Jul 14, 2019
      In this article, you’ll learn how to use React Visibility Sensor to detect when your React components have entered the viewport.
      • William Le
      Create a Modal Route with React Router (
      Jul 13, 2019
      Let's explore how to create a modal, and how we can go about turning into a route while not un-rendering the current route.
      • Jason Brown
      Tequila-powered X-Platform development with Expo (
      Jul 12, 2019
      What happens when you mix a bit of Tequila with Expo and Next.js? You obtain a nice Margarita, a subtle cocktail of cross-platform goodness!
      • Robin Cussol
      Hermes: An open source JavaScript engine optimized for mobile apps, starting with React Native (
      Jul 12, 2019
      At Chain React 2019, we announced the Hermes JavaScript engine. We have open-sourced the Hermes engine, as well as integration with Hermes for React Native. We are excited to work with the open source community and have developers start using Hermes today.
      Progressive Enhancements for Loading Images Using React Image (
      Jul 12, 2019
      In this article, you’ll learn about React Image, a library focused on providing progressive enhancements for loading images in React.
      • William Le
      Testing React Components: Complete Guide (
      Jul 11, 2019
      When I first started learning to test my apps back in the day, I would get very frustrated with the different types, styles and technologies used for testing, along with the disbanded array of blog posts, tutorials and articles. I found this to be true as well for React testing.
      • Mohammad Iqbal
      Using styled-components in Gatsby (
      Jul 10, 2019
      When creating a new Gatsby.js project, there are several available options for styling. styled-components is one of the most popular CSS-in-JSS solutions, and for good reason. It’s powerful, easy to learn, and it works flawlessly with Gatsby. Let’s explore how to add it into your project!
      • Daniel Stout
      Thoughts on React Hooks, Redux, and Separation of Concerns (
      Jul 10, 2019
      Some observations on the tradeoffs involved in using React hooks.
      • Mark Erikson
      React Router: How to add child routes (
      Jul 10, 2019
      For react router 4 and above.
      • Avery Duffin
      Exporting Data to Excel with React (
      Jul 10, 2019
      Learn how to export data from your React app to excel using XLSX and FileSaver.
      • Bhargav Bachina
        How to Generate Dynamic PDFs Using React and NodeJS (
        Jul 09, 2019
        In this article, you will learn how to generate dynamic PDFs using HTML code as a template. For this particular example, we are going to create a simple receipt that will have dynamic data coming from React’s state object.
        • Adrian Hajdin
          How to Build Great React Search Experiences Quickly (
          Jul 09, 2019
          We’ll walkthrough how to build excellent, React-based search experiences using Elastic’s open source Search UI library. It’ll take about 30 minutes and afterwards you’ll be ready to bring search to any application.
          • Jason Stoltzfus
          Build custom Modal Component in React (
          Jul 09, 2019
          Modals are one of the most vital component of UI elements on the web. they provides a solid foundation for creating dialogs, popover etc. In this article we will see how to build our own modal component in react.
          • Chisom Okoye
          ReactJS Interview Questions for Senior Developers (
          Jul 09, 2019
          You can work with React for years and actually have no opinion on some of the less practical questions and it’s fine. However, if you have an interview, then it’s quite important to have an opinion.
          • Alex Permyakov
          Exploring Next.js 9 Dynamic Routing & API Routes (
          Jul 09, 2019
          Next.js 9 has been released yesterday with some amazing new features. In this post we'll create a simple RSS feed reader to explore how to use the new file system based dynamic routing and API routes.
          • Kristian Heruc
          Gatsby.js - A powerful Static Site Generator (
          Jul 08, 2019
          Not long ago, most people argued against a framework like React, Angular or Vue for your personal website. Since then, tools on top of these frameworks – like Gatsby.js for React.js – emerged to make static website development effortless. So if there is no actual demand, why does a static website generator like Gatsby.js do so well?
          React Fundamentals: Props vs State (
          Jul 08, 2019
          What's the difference between props and state in React?
          Next.js 9 (
          Jul 08, 2019
          After 70 canary releases we are pleased to introduce Next.js 9.
          • Tim Neutkens
          • Joe Haddad
          • JJ Kasper
          • Connor Davis
          • Luis Alvarez
          • Lukáš Huvar
          Structuring React applications (
          Jul 08, 2019
          Today's post lays out my current thinking and approach to structuring React applications: the folder structure I use, my naming conventions, where I write tests, and so on.
          React Form Validation Using React Hooks (
          Jul 07, 2019
          In this article I’m going to share with you on how I created my own form validation using React hooks.
          • Vince Llauderes
          How React Hooks can replace React Router (
          Jul 04, 2019
          We are going to explore other possibilities and look at how we can improve the routing experience in React apps using hooks.
          • Peter Ekene Eze
          Announcing React Native 0.60 (
          Jul 03, 2019
          After months of hard work from hundreds of contributors, the React Native Core team is proud to announce the release of version 0.60. This release handles significant migrations for both Android and iOS platforms, and many issues are resolved too. This blog post covers the highlights of the release.
          • Ryan Turner
          Why Did I Have Difficulty Learning React? (
          Jul 01, 2019
          Just over six months into a job doing React development, I’ve been trying to figure out why it has taken me so long to feel comfortable with it. (Comfortable feels a bit too ambitious of a word. Maybe competent? Unexceptional? Whichever.)
          • Jonathan Snook
          How to drive React state with D3 transitions for complex animation (
          Jul 01, 2019
          Here’s part 2 of Kiran B’s challenge from last week - animating our drilldown piechart.
          Optimize Your React Functional Components with useCallback and useMemo (
          Jul 01, 2019
          Learn how to use useCallback and useMemo to optimize performance.
          • Chidume Nnamdi
          Learning TypeScript with React - Part 1 (
          Jul 01, 2019
          Understanding what are types, type annotations, why use them and how to use them can help you catch errors during development while also enhancing code quality and readability.
          • Ana Liza Pandac
          React hooks useState and useReducer are equivalent in theoretical expressiveness (
          Jul 01, 2019
          It turns out that useState is as powerful as useReducder in terms of expressiveness. This is because useState allows functional updates. Even with deep updates, you can pass down custom callbacks.
          • Daishi Kato
          Securing a React app with a basic server-side authentication (
          Jul 01, 2019
          This article will walk you through how to do that through basic authentication for an Express server. Although the client side will be a React app, you can virtually apply it to any other client-side applications.
          • Dogcan Bilgili
          7 optimization techniques in React (
          Jun 30, 2019
          One key factor for positive user experience is speed i.e how much time a user has to wait to first see contents from your website or application.
          • Ogundipe Samuel
          Creating React usePosition() hook for getting browser’s geolocation (
          Jun 30, 2019
          In this article we’ll create a React usePosition() hook to fetch and follow browser’s location. Under the hood we’ll use getCurrentPosition and watchPosition functions that are provided by global object navigator.geolocation.
          • Oleksii Trekhleb
          Let's learn React Hooks and Context API by building a Recipe Search App (
          Jun 29, 2019
          This is a beginner tutorial in understanding React Hooks and the Context API.
          • Ola John Ajiboye
          Building better React forms with Formik (
          Jun 28, 2019
          Building forms with React involves setting up state as the container for user data and props as the means to control how state is updated using user input.
          • Nathan Sebhastian
          A Drilldown Piechart with React and D3 (
          Jun 28, 2019
          A few days ago Kiran B sent me a challenge via Twitter DM: How can I make a drilldown piechart?