Latest Articles & Tutorials

Wrapping React.useState with TypeScript (kentcdodds.com)
Jan 22, 2021
How to make a custom hook that wraps useState with TypeScript properly.
7 React Projects You Should Build in 2021 (freecodecamp.org)
Jan 22, 2021
React is a JavaScript library that is ideal for creating impressive apps. There are countless projects that you can make with React, but here are seven that are on my list to build in 2021.
  • Reed Barger
    The top 5 React animation libraries compared (blog.logrocket.com)
    Jan 22, 2021
    In this article, we’ll compare the top five React animation libraries and evaluate each for popularity, developer experience, readability, documentation, and bundle size to help you choose the right library for your next React project.
    • Fortune Ikechi
    Styled-components vs. Emotion-JS for handling CSS (blog.logrocket.com)
    Jan 21, 2021
    In this article, we will compare styled-components and Emotion, including differences, drawbacks, and benefits.
    • Kasra Khosravi
    Using Hooks with React Router (blog.logrocket.com)
    Jan 21, 2021
    In this tutorial, we’ll show you how to use Hooks with React Router and minimize code lines in a component.
    • Gaurav Singhal
    How to Write Better React Components (freecodecamp.org)
    Jan 20, 2021
    In this article, we'll explore various ways we can write shorter, simpler and easier to understand React code. So let's get started.
    • Yogesh Chavan
    Introduction to MobX with React (blog.logrocket.com)
    Jan 20, 2021
    In this tutorial, we will discuss how to use MobX with React, but first, we will begin by getting to understand MobX a little better.
    • Aleem Isiaka
    Make any SVG responsive with this React component (blog.logrocket.com)
    Jan 20, 2021
    I initially ran into problems on mobile devices with some graphs I was working on creating. After a lot of fumbling, I made some reusable components that can shield me from this pain.
    • Paul Cowan
    Creating Reusable Animation Components with React and GSAP (blog.bitsrc.io)
    Jan 20, 2021
    GSAP or GreenSock Animation Platform is a JavaScript animation library that helps you to create fast and silky smooth animations for your interface. It provides simple APIs that grants you full control over your animation sequences, but easy enough to understand and use for simple animations
    • Nathan Sebhastian
    State of the React Ecosystem in 2021 (daveceddia.com)
    Jan 20, 2021
    This post is inspired by a now-deleted Reddit post from someone who had learned React in 2016, and was concerned about how to get back into it and refresh their skills.
      5 React Shortcuts That Will Instantly Boost Your Productivity (freecodecamp.org)
      Jan 19, 2021
      To become a better React developer, you don't always have to learn an entirely new, challenging skill. You can instantly improve your React code in a few minutes by using the powerful features your development tools make available.
      • Reed Barger
      How to use Shared Element Transition with React Navigation v5 (blog.logrocket.com)
      Jan 19, 2021
      Transitions in mobile applications provide design continuity. This continuity is provided by connecting common elements from one view to the next while navigating in the app.
      • Aman Mittal
      Using Grommet In React Applications (smashingmagazine.com)
      Jan 18, 2021
      In this tutorial, we’re going to learn how to use Grommet as a UI library for React applications. We’ll use Grommet as a UI library of choice to create a pricing component, this would help us have a better understanding of how to use Grommet.
      • Fortune Ikechi
      Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux) (blog.isquaredsoftware.com)
      Jan 18, 2021
      Definitive answers and clarification on the purpose and use cases for Context and Redux.
      • Mark Erikson
      How to create React components with TypeScript (felixgerschau.com)
      Jan 17, 2021
      I want to take this fear from you by showing how you can easily define your React components with TypeScript in this article.
      • Felix Gerschau
      Getting started with React and TypeScript (felixgerschau.com)
      Jan 17, 2021
      In this article, I'll first explain how to configure TypeScript with the tsconfig file. Afterward, we'll see how to set up an entire project using Webpack or Create React App.
      • Felix Gerschau
      React Native geolocation: A complete tutorial (blog.logrocket.com)
      Jan 15, 2021
      In this tutorial, we’ll show you how to implement geolocation in React Native. We’ll build an example app in React Native that displays the user’s location on a map in longitude and latitude coordinates and enables the user to send their location to another source, such as Twitter.
      • Emmanuel Oaikhenan
      5 top React Hooks libraries compared (blog.logrocket.com)
      Jan 15, 2021
      In this article, we’ll look at five useful React Hooks libraries and compare their utility.
      • John Au-Yeung
      Integrating A Dialogflow Agent Into A React Application (smashingmagazine.com)
      Jan 14, 2021
      When it comes to building a conversational chat assistant that could be used at a small or enterprise level, Dialogflow would most likely be one of the first options that would show up in your search list — and why wouldn’t it?
      • Nwani Victory
        How and why to use React Frontload (blog.logrocket.com)
        Jan 14, 2021
        A combination of fetching with proper lifecycle events might be a good solution for a complete client-side application, but when things get on the server, it’s not enough. This is where a third-party library known as React Frontload comes in.
        • Kumar Harsh
          Profiling Performance of React Apps using React Profiler (blog.bitsrc.io)
          Jan 14, 2021
          Get to know the art of performance profiling with React Profiler Chrome Extension
          • Viduni Wickramarachchi
          Profiling React Apps with the Profiler API (telerik.com)
          Jan 13, 2021
          In this article we'll measure the performance of an example React app with both the Profiler tab in React DevTools, and the Profiler component.
          • Blanca Mendizábal Perelló
          Top React date pickers for 2021 (blog.logrocket.com)
          Jan 13, 2021
          In this post, I’ll walk you through some of the date picker libraries that I found really useful. Note that we’ll only be going through the libraries which have been updated recently. This is to ensure it will work on your project without going through a lot of hoops.
          • Wern Ancheta
          Incremental Static Regeneration with Next.js (blog.logrocket.com)
          Jan 12, 2021
          This post will cover the relevant bits of this new strategy and explain why it’s a game-changer for web development.
          • Ido Shamun
          GraphQL vs React Server Components — Do We Need Both? (blog.bitsrc.io)
          Jan 11, 2021
          This new type of component promises to revolutionize the way we interact with the back-end.
          • Fernando Doglio
          Design Systems with React’s Server, Shared and Client Components (blog.bitsrc.io)
          Jan 06, 2021
          A few weeks ago the React team has revealed an exciting feature that’s currently still under development: React Server Components. This “feature” will not only introduce a new type of components for the server but rather a completely new taxonomy of React components.
          • Alicia Jones
          Introducing Zero-Bundle-Size React Server Components (reactjs.org)
          Dec 21, 2020
          2020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size React Server Components.
          MDX Embed for Storybook (medium.com)
          Dec 10, 2020
          Embed Egghead, Codepen, and Twitter into MDX.
          • Paul Scanlon
          React useReducer with Middleware (robinwieruch.de)
          Dec 10, 2020
          In this React Hooks tutorial, I want to show you how to use a middleware for React's useReducer Hook. This middleware would run either before or after the state transition of the reducer and enables you to opt-in features.
          Upgrading to React 17 and Webpack 5 (blog.bitsrc.io)
          Dec 09, 2020
          How I upgraded my project to React 17 and Webpack 5.
          • Chameera Dulanga
          Expo SDK 40 is now available (blog.expo.io)
          Dec 09, 2020
          Today we’re announcing our fourth and final SDK release of 2020, Expo SDK 40. SDK 40 includes React Native 0.63, mostly the same version as SDK 39 but with some additional bugfixes cherry-picked on top.
          • Brent Vatne
          New JSX Enhancements in React 17 (blog.bitsrc.io)
          Dec 07, 2020
          What’s New for JSX in React 17 and Why You Should Care
          • Dilantha Prasanjith
          How to Test React.useEffect (epicreact.dev)
          Dec 04, 2020
          So, you've got some code in React.useEffect and you want to know how to test it. This is a pretty common question. The answer is kinda anti-climatic and general.
          Sticky Table Header with React Hooks (webup.org)
          Dec 01, 2020
          Using a <table /> element instead of flexbox for data presentation is a good thing. How to turn the table header sticky with the help of React in that case? How to apply the solution into a production code? This blog post is all about that.
          • Miroslav Nikolov
          How React Uses Closures to Avoid Bugs (epicreact.dev)
          Nov 27, 2020
          When the world moved from React class components and lifecycle methods to React function components and hooks, we left behind a bug that many of us didn't even know was plaguing our class-based codebases.
            Importing React Through the Ages (epicreact.dev)
            Nov 20, 2020
            How and why I import react using a namespace (import * as React from 'react').
            How to Measure Next.js Web Vitals Using Quickmetrics (freecodecamp.org)
            Nov 13, 2020
            Developers spend a lot of time optimizing websites to provide a better user experience. Web Vitals are a set of useful metrics that aim to capture the user's experience on a web page.
            • Umesh Yadav
            Story of how I built my Portfolio and Blog using DEV.to and NextJS (dev.to)
            Nov 13, 2020
            The idea behind this post is to tell the story of how I did it, the tech involved, what I learned along the way and most importantly to inspire many more people to build their own website.
            • Dinesh Balaji
            How React Hooks Work in simple words? (dev.to)
            Nov 13, 2020
            A Hook is a react function that lets you use state and react features from a function based component. Hooks let you use the functions instead of switching between HOCs, Classes, and functions. As Hooks are regular Javascript functions, thus you can use the built-in Hooks and create your own custom one. So the solution to your problem will be a "one-liner" now.
            • Akshay Palekar
            How to add search to your Gatsby site (emgoto.com)
            Nov 12, 2020
            A search bar is a great way to make content on your Gatsby site discoverable. In this tutorial, I'll be walking you through how to add local search to Gatsby with FlexSearch.
            • Emma Goto
            How to create an avatar feature with React (blog.logrocket.com)
            Nov 12, 2020
            In this article, we will take a look at this library, what it does, and, by the end of the article, create a simple React app wherein users can import an image from their computer, use it to make an avatar, and download the avatar to their computer.
            • Yusuff Faruq
            Why you should adopt React Hooks instead of classes (blog.logrocket.com)
            Nov 12, 2020
            In this post, we will look at functional components using React Hooks that were introduced in version 16 of React and why you should use them over class components.
            • Nwose Lotanna
            Building a Next.js App with Apollo Client & Slash GraphQL (apollographql.com)
            Nov 11, 2020
            In this blog post, we will build a simple NextJS app from scratch, using Apollo Client to consume the GraphQL API of Slash GraphQL.
            • Apoorv Vardhan
            Authenticating React Apps With Auth0 (smashingmagazine.com)
            Nov 11, 2020
            In this article, we’ll learn how to authenticate our React apps using Auth0. We will also learn how to set up Social Logins in our apps. This article will be beneficial to readers who want to add some form of authentication to their apps or want to get familiar with Auth0.
            • Nefe Emadamerho-Atori
            React Server-Side Rendering with Deno (telerik.com)
            Nov 11, 2020
            In this post, we will create a simple React app that is server-side rendered using Deno
            • Chinedu Imoh
            React patterns to avoid common pitfalls in local state management (blog.logrocket.com)
            Nov 11, 2020
            In this discourse, our focus will be on local state management and the various React patterns we can use to avoid its common pitfalls.
            • Lawrence Oputa
            New component finder and sidebar (medium.com)
            Nov 10, 2020
            Navigate component libraries fast
            • Dominic Nguyen
            Testing UI - Next JS, Typescript, Jest and React Testing Library (dev.to)
            Nov 10, 2020
            As you know, React is just JavaScript. That means it can be tested just like any other JS application. There are lots of testing libraries and test runners out there, but I find that the best setup is Jest + React Testing Library.
            • Maciek Grzybek
            How to Build a Full Stack App with AWS Amplify and React (freecodecamp.org)
            Nov 09, 2020
            AWS Amplify is a tool developed by Amazon Web Services that helps make app development easier.
            • Sam Williams
              A Dive Into React And Three.js Using react-three-fiber (smashingmagazine.com)
              Nov 09, 2020
              react-three-fiber is a powerful Three.js renderer that helps render 3D models and animations for React and its native applications. In this tutorial, you will learn how to configure and build 3D models in a React application.
              • Fortune Ikechi