Latest Articles & Tutorials

Using Fuse.js to add dynamic search to a React app (blog.logrocket.com)
Apr 05, 2021
Fuse.js is a lightweight search engine that can run on the client side in a user’s browser. Let’s see how we can use it to easily add search functionality to a React application.
  • Danny Guo
    Using React Hooks to create sticky headers (blog.logrocket.com)
    Apr 05, 2021
    For many developers, implementing a sticky header on a table before the CSS property position: sticky was challenging. In this article, we are going to look at building a sticky header using React Hooks.
    • Fortune Ikechi
    How State Works in React – Explained with Code Examples (freecodecamp.org)
    Apr 05, 2021
    State is the most complex thing in React, and it's something both beginners and experienced developers struggle to understand. So in this article, we'll explore all the basics of state in React.
    • Yogesh Chavan
    How to Write Cleaner React Code (freecodecamp.org)
    Apr 05, 2021
    In this guide, I've put together seven of the top ways that you can start writing cleaner React code today to make building React projects and reviewing your code much easier.
    • Reed Barger
    How to Create Your First React Hook from Start to Finish (freecodecamp.org)
    Apr 02, 2021
    You can use custom React hooks to solve many different real-world problems in your React projects.
    • Reed Barger
    Using Font Awesome 5 with React (blog.logrocket.com)
    Apr 02, 2021
    In this post, I’m going to walk through setting up Font Awesome in a React project. I’ll also include some basics on how to use Font Awesome in your React components.
    • Andrew Evans
      How to Read React Errors (fix 'Cannot read property of undefined'!) (daveceddia.com)
      Apr 01, 2021
      We’ll cover how to read a stack trace, how to interpret the text of the error, and ultimately how to fix it.
      Hands-on with React Native for Web: A complete tutorial (blog.logrocket.com)
      Mar 31, 2021
      In this article, we will talk about the buzz around React Native for Web and set up a demo project with it, too!
      • Kumar Harsh
      How to adopt Next.js into your existing application (blog.logrocket.com)
      Mar 31, 2021
      Next.js provides a zero-configuration setup process similar to what Create React App does through a package called Create Next App. Today, we will look at how you can make use of Next.js on a pre-existing React application. This will allow you to add SSR to an existing project.
      • Austin Roy Omondi
      Conditional React Hooks (kyleshevlin.com)
      Mar 30, 2021
      You want to conditionally call a hook, but you can't do that because of rules. What do you do?
      • Kyle Shevlin
      How to create a split pane component in React (blog.logrocket.com)
      Mar 30, 2021
      Split panes are a constant part of a developer’s life. Whether it’s to divide the many areas of your favorite desktop or web IDE, it’s a great feature to improve the user experience in terms of screen organization.
      • Julio Sampaio
      Top React boilerplates for 2021 (blog.logrocket.com)
      Mar 30, 2021
      Non-opinionated by design, the React library benefits from the use of boilerplates, pieces of code that act as a logical starting point while beginning development with any technology. In this article, we will look at five such boilerplates for React and explore their strengths and weaknesses.
      • Kapeel Kokane
      Next.js 10.1 (nextjs.org)
      Mar 29, 2021
      We are excited to introduce Next.js 10.1
        How to debug encrypted network traffic in React Native (blog.logrocket.com)
        Mar 29, 2021
        This article covers additional tools for React Native that enable debugging capabilities the shipped React Native Developer Tools don’t offer. The focus is on inspecting and rewriting network traffic between your app and server.
        • Sebastian Weber
        Implementing in-app purchases in React Native (blog.logrocket.com)
        Mar 29, 2021
        In this tutorial, we’ll look at how we can implement in-app purchases in React Native. Aside from the frontend, we’re also going to implement the backend so that we can verify the purchases and update user data accordingly.
        • Wern Ancheta
        How to fix layout shifts to improve SEO in Next.js apps (blog.logrocket.com)
        Mar 26, 2021
        In this post, we will discuss CLS specifically, with special focus on how to prevent layout shifts in Next.js apps.
        • Vilva Athiban P B
        Data Visualization: Build React Graphs the Easy Way (telerik.com)
        Mar 24, 2021
        Let’s explore an efficient way to create React graphs with the KendoReact Charts library. Read on to see how to quickly implement Donut, Bar, Line and Sparkline charts.
        • Thomas Findlay
        How to Design an iMessage-like Chat Bubble in React Native (freecodecamp.org)
        Mar 24, 2021
        Whether you're an Apple fan or not, you'll likely agree that Apple sure does have a groundbreaking UI. And iMessage is definitely an important part of that design.
        • Prajwal Kulkarni
        Continuous deployment of React Native app with Azure DevOps (blog.logrocket.com)
        Mar 24, 2021
        In React Native, you have to typically deploy apps on two platforms: Android and iOS. Both platforms use different languages and build tools. In this tutorial, we will build a continuous deployment pipeline of a React Native app on App Center via Azure DevOps.
        • Huzaima Khan
        Generating and integrating OpenAPI services in a React app (blog.logrocket.com)
        Mar 23, 2021
        In this tutorial, we will look at how to integrate an OpenAPI-generated service from the server, and then use this generated service across a React application.
        • Olasunkanmi John Ajiboye
          Debounce and Throttle Callbacks with React Hooks (kyleshevlin.com)
          Mar 23, 2021
          This one will be short and to the point. I recently ran into a problem while trying to create a debounced callback with React hooks.
          • Kyle Shevlin
          The modern guide to React prop types (blog.logrocket.com)
          Mar 23, 2021
          Type checking in React through the prop-types package ensures that you know what each variable stores even if documentation is lacking or not helpful. In this discourse, we examine prop types in depth to help you build a quality codebase.
          • Andrew Evans
          Comparing React Native UI libraries (blog.logrocket.com)
          Mar 22, 2021
          In this guide, we’ll compare 10 of the most-used UI libraries for React Native.
          • Said Hayani
          Building a front end project with React, TailwindCSS and Storybook (medium.com)
          Mar 19, 2021
          To make things as easy for myself as possible, I wanted to put together a development stack that got me up and running as quickly as possible, made the mystic art of CSS as easy as possible, and gave me a way of rapidly developing, visualising, and iterating on the design of my components.
          • John Clarke
          How to Make Your React Apps Responsive with a Custom Hook (freecodecamp.org)
          Mar 19, 2021
          How do you make your React applications responsive for any sized device? Let's see how to do so by making our own custom React hook.
          • Reed Barger
          Tailwind CSS tips for creating reusable React components (blog.logrocket.com)
          Mar 19, 2021
          In this blog post, I’ll share some tips that I’ve found incredibly useful when building reusable React components with Tailwind.
          • Ryan Bethel
          Code splitting in React: An overview (blog.logrocket.com)
          Mar 18, 2021
          The more code a project has, the slower the browser will load. Therefore, you often have to balance the size of your dependencies with the performance you expect out of your JavaScript. Code splitting is a useful way to strike this balance.
          • Jessica S. Reuter Castrogiovanni
          React State Management Libraries and How to Choose (daveceddia.com)
          Mar 17, 2021
          In this post I’ll give you the Grand Tour of state management options in React and help you decide which one to use in your project.
          How to Use Finite State Machines in React (telerik.com)
          Mar 17, 2021
          Learn about finite state machines, the advantages of this computer science concept and how we can use it in React apps.
          • Leonardo Maldonado
          How to Deploy a React App to Production Using Docker and NGINX with API Proxies (freecodecamp.org)
          Mar 17, 2021
          This post will help you to learn how to deploy your React applications to production. We are going to use Docker and NGINX to secure API keys and proxy requests to prevent Cross-Origin Resource Sharing (CORS) violations.
          • Matt Sokola
          Why You Should Use React Components Instead of HTML (freecodecamp.org)
          Mar 17, 2021
          In this article, we're going to see how to use the JavaScript library React as a way to add convenience and reusability to our websites.
          • Reed Barger
            React Fragments: An overview (blog.logrocket.com)
            Mar 17, 2021
            This tutorial is designed to help you understand React Fragments and various use cases where it would come in handy.
            • Vijit Ail
            What’s new in Gatsby 3.0 (blog.logrocket.com)
            Mar 17, 2021
            Each of the previous releases were focused on a specific addition to the Gatsby platform, but with version 3.0, things have gone to the next level. In this post, we will discuss the new features that have come with the new version.
            • Kasra Khosravi
            Why do we love Next.js & what is Next.js used for? (tsh.io)
            Mar 16, 2021
            Practical introduction for CTOs
            • Witold Ossera
            Building a splash screen in React Native (blog.logrocket.com)
            Mar 16, 2021
            In this tutorial, we’ll demonstrate how to build and show a splash screen in React Native. We’ll walk you through how to build stunning welcome displays for both iOS and Android apps using react-native-splash-screen.
            • Emmanuel Etukudo
            Using React Native Elements, a cross-platform UI toolkit (blog.logrocket.com)
            Mar 16, 2021
            In this tutorial, we’ll go over the basics of using React Native Elements.
            • Clayton Francis
            How to Build a Weather Application with React and React Hooks (freecodecamp.org)
            Mar 15, 2021
            React is a super-awesome front-end library that you can use to build user interfaces.
            • Nishant Kumar
              Introducing Auth0's Next.js SDK (auth0.com)
              Mar 15, 2021
              Learn how to authenticate users with Auth0’s Next.js SDK
              • Adam McGrath
              Successful Refactoring with React Testing Library (blog.logrocket.com)
              Mar 15, 2021
              In this article, we’ll take a look at a simple React component and observe how our test suite responds to simple refactors. We’ll use React Testing Library to highlight the power of testing how the user interacts with the app.
              • Tyler Hawkins
              Guide to unit testing in React Native (blog.logrocket.com)
              Mar 15, 2021
              React Native is among the most commonly used libraries for building mobile apps today. In this guide, we will explore unit testing in React Native applications, covering benefits, best practices, testing frameworks, and more.
              • Chidume Nnamdi
              Why You Should Choose React Hook Form Over Formik and Redux-Form (blog.bitsrc.io)
              Mar 15, 2021
              Understanding React Hook Form and how it stands out from other form libraries
              • Madushika Perera
              How to Animate Your React Apps with Lottie (freecodecamp.org)
              Mar 12, 2021
              Animations can make for a more engaging user experience in our React apps.
              • Reed Barger
              How to Build React Forms the Easy Way with react-hook-form (freecodecamp.org)
              Mar 12, 2021
              Let's see how to use react-hook-form in your own projects to build rich, featureful forms for your React apps.
              • Reed Barger
              How to Build React Applications with Deno Using the AlephJS Library (freecodecamp.org)
              Mar 12, 2021
              If you're a front end developer who's just getting started with Deno, you might be wondering – can you build something as complex as a NextJS or create-react-app (CRA) application using Deno?
              • Akash Joshi
                Build a React Budget Tracker App – Learn React & Context API with this Fun Project (freecodecamp.org)
                Mar 12, 2021
                In this React Budget Tracker App tutorial we're going to learn how break down a UI into React components, learn how to work with state using the Context API, learn about actions, reducers, and the dispatch function.
                • Chris Blakely
                Top 10 React Grid components and libraries for 2021 (blog.logrocket.com)
                Mar 12, 2021
                In this post, we’ll look at the top ten unranked React Grid component libraries that help you build great-looking and performant grid layouts.
                • Nelson Michael
                How to Use React Context Effectively (kyleshevlin.com)
                Mar 11, 2021
                In this post, I want to go over how I personally use React Context. I think you'll find it succinct and useful.
                • Kyle Shevlin
                React Native styling tutorial with examples (blog.logrocket.com)
                Mar 11, 2021
                In this tutorial, we’ll show you how to style components in React Native. We’ll demonstrate how styling in React Native works by building an example e-commerce mobile application.
                • Emmanuel Etukudo
                useCallback and useRef: Two React Hooks You Should Learn (telerik.com)
                Mar 10, 2021
                Learn how to use the useCallback hook to avoid unnecessary re-renders in our application, and the useRef hook to keep track of references.
                • Leonardo Maldonado
                Using Zustand to simplify state management (blog.logrocket.com)
                Mar 10, 2021
                I, for one, am excited about the growing number of new ways to manage your state. In this article, I’ll cover probably the simplest and smallest of all: Zustand.
                • Lorenz Weiß