Latest Articles & Tutorials

React Query — An Underrated State Management Tool (blog.bitsrc.io)
Sep 18, 2020
In this article, let’s discuss how React Query addresses the above-mentioned issue by building a small pokemon application and diving into its key concepts.
  • Tharaka Romesh
Integrate Next.js & Contentful (netlify.com)
Sep 17, 2020
We will be building a simple demo site like this one, and you can clone the repo for it here. You’ll need to do the Set up Contentful and Set up Netlify steps to make it work for you!
  • Cassidy Williams
My State Management Mistake (epicreact.dev)
Sep 17, 2020
When I started at PayPal, the app I started with used Redux for its state management (like pretty much every other React app at the time). This was the first React product I'd ever worked on and I was excited to use the latest and greatest tools for state management.
Using Next.js with Stitches (stitches.dev)
Sep 17, 2020
A simple guide to use Next.js with Stitches.
  • Pedro Duarte
How to Build a Jamstack Site with Next.js and Vercel (freecodecamp.org)
Sep 17, 2020
The Jamstack architecture is a modern approach to an old idea: making fast, static websites, but making them dynamic with tools like JavaScript.
  • Colby Fayock
Comparing Styling Methods In Next.js (smashingmagazine.com)
Sep 17, 2020
Among others, Next.js has dubbed itself: The React Framework for Static Websites. But just like every other framework whose goal is to help you build what matters by abstracting common, redundant tasks, you’re often required to learn something new and opinionated. With Next.js, one of the things you need to know is how to integrate different CSS methods with its API, and that is the focus of this tutorial.
  • Adebiyi Adedotun Lukman
React Native form validations with Formik and Yup (blog.logrocket.com)
Sep 17, 2020
In this post, we are going to go through creating a few forms using Formik. Formik is a simple React/React Native form library that helps with handling form state, input validation, formatting, error handling, form submission, amongst other things.
  • Kitavi Joseph
Advanced GraphQL Usage In Gatsby Websites (smashingmagazine.com)
Sep 16, 2020
In this article, Aleem Isiaka explains what GraphQL query constructs are, and how they can be used to interact with the data access layer of a Gatsby website. Let’s take a look at some of the advanced use cases of GraphQL within a Gatsby website by using matching data from different sources.
  • Aleem Isiaka
An introduction to Wouter: A React Router alternative (blog.logrocket.com)
Sep 16, 2020
In this guide, you will get an overview of Wouter and see how it can be implemented in place of React Router.
  • Gaurav Singhal
How to Persist React State in Local Storage (felixgerschau.com)
Sep 15, 2020
In this post, I'll first introduce you to the localStorage API before we have a look at how to use it in React function components with React hooks.
  • Felix Gerschau
Easily Deploy a Fullstack Next.js App with Vercel (scotch.io)
Sep 15, 2020
Developing and shipping production-ready applications to the web today couldn't be easier than with Next.js and Vercel. It provides a world-class developer experience right out of the box and is optimized for powering high-performance production workloads.
  • Chris Sevilleja
A Complete Beginner's Guide to React: Hooks Edition (welearncode.com)
Sep 15, 2020
A few years ago, I wrote an introductory React tutorial based on a workshop I taught. Since that point in history, I've taught hundreds of new web developers React, and the library has evolved significantly. I thought it was time to come back to the fundamentals and discuss learning React from absolute zero in the era of Hooks.
  • Ali Spittel
Why you've been bad about Profiling React Apps (epicreact.dev)
Sep 14, 2020
When was the last time you tried your app out on the kinds of devices your end users are using? If you haven't, have you at least tried to simulate the kind of performance characteristics of your users on low-end devices?
My journey to mastering React (dev.to)
Sep 14, 2020
I have once again started learning React, but this time I’m sticking to it. I’ll try to point out my mistakes and why it didn’t work out the first time.
  • Davor Tvorić
Share Code Between React Native and React JS (blog.bitsrc.io)
Sep 14, 2020
How To Share Code Between React Native And React JS
  • Rooney Reeves
Animating React Components With GreenSock (smashingmagazine.com)
Sep 14, 2020
In this article, Blessing explains how GSAP plays well with the React library by integrating its functions into a React component in building an example landing page with a variety of animations.
  • Blessing Krofegha
How To Render Relevant Icons Based on Content (aboutmonica.com)
Sep 12, 2020
This article walks through how I display relevant, themed icons when linking to content on this site based on the topic or type of content. If you've visited the homepage of this site, I use a variation of this component to display my recent content, featured content, and recent video lessons.
  • Monica Powell
Requisite React (epicreact.dev)
Sep 11, 2020
When was the last time you saw an error and had no idea what it meant (and therefore no idea what to do about it)? Today? Yeah, you're not alone... Let's talk about how to fix that.
React Hooks Documentation (visual & easy-to-read version) (ohansemmanuel.com)
Sep 10, 2020
The goal of this guide is to provide an easier to read version of the official React hooks documentation. This guide is a living document; with relevant changes made as the official docs are updated.
  • Ohans Emmanuel
How To Build A Blog With Next And MDX (smashingmagazine.com)
Sep 09, 2020
In this guide, we will be looking at Next.js, a popular React framework that offers a great developer experience and ships with all of the features you need for production. We will also build a blog, step by step, using Next.js and MDX. Finally, we’ll cover why you would opt for Next.js instead of “vanilla” React and alternatives such as Gatsby.
  • Ibrahima Ndaw
Simple error handling in React with react-error-boundary (blog.logrocket.com)
Sep 09, 2020
Errors are bound to happen in our applications, whether they’re server-related errors, edge cases, or others. As such, many methods have been developed to prevent these errors from interfering with user and developer experience. In React, one of such method is the use of error boundaries.
  • Yusuff Faruq
How to Build a Quiz App Using React –with Tips and Starter Code (freecodecamp.org)
Sep 09, 2020
In this beginner React tutorial we're going to build a quiz app. We'll work with complex state objects, how to handle different state hooks, and render things based on state.
  • Chris Blakely
    Avoid soul-crushing components (epicreact.dev)
    Sep 08, 2020
    React components afford us the opportunity to encapsulate state, logic, and markup in a single place. A component is like a magical machine where you pass in props and a beautiful component pops out the other end.
    Understand Recoil in React (telerik.com)
    Sep 08, 2020
    Learn about the new library introduced by Facebook called Recoil, which aims to solve a few problems such as shared state, derived data and queries, app-wide observation, and many more.
    • Leonardo Maldonado
    How to Use Redux in Your React TypeScript App (freecodecamp.org)
    Sep 08, 2020
    In this guide, I will show you how to use Redux in your React TypeScript project by building an app that allows you to add, delete, and show articles.
    • Ibrahima Ndaw
    Add Syntax Highlighting to a Next.js Markdown Blog with rehype-prism (laurosilva.com)
    Sep 02, 2020
    This post documents my learnings and the steps I took to implement syntax highlighting in a Next.js Markdown blog.
    • Lauro Silva
    Why I Love React (epicreact.dev)
    Aug 31, 2020
    I still remember when I first heard about React. It was January 2014. I was listening to a podcast. Pete Hunt and Jordan Walke were on talking about this framework they created at Facebook with no support for two way data-binding, no built-in HTTP library, no dependency injection, and in place of templates it had this weird XML-like syntax for the UI.
      Integrate Next.js & Prismic (netlify.com)
      Aug 28, 2020
      We will be building a simple demo site like this one, and you can clone the repo for it here. You’ll need to do the Set up Prismic and Set up Netlify steps to make it work for you!
      • Cassidy Williams
      Build A Confirmation Modal in React with State Machines (daveceddia.com)
      Aug 19, 2020
      Ever needed to wire up a confirmation dialog in React? You know the ones: “Really delete this file? — Yes / Cancel”
      Formik vs Plain React for Forms – Worth it? (bitnative.com)
      Aug 19, 2020
      I typically use plain React for forms. But I just converted a React form to use Formik.
      Getting Started with Adobe’s React Spectrum (blog.bitsrc.io)
      Aug 19, 2020
      React Spectrum is a collection of libraries authored by Adobe Team to help developers build a feature-rich application with React. It has three main libraries that you can use together or separately as you see fit.
      • Nathan Sebhastian
      How to Create a Next.js Starter to Easily Bootstrap a New React App (freecodecamp.org)
      Aug 18, 2020
      Getting started with a new React app is easier than ever with frameworks like Next.js. But those frameworks don’t always include all of the tools you want to use.
      • Colby Fayock
      Creating your first CRUD with Facebook’s Recoil (blog.logrocket.com)
      Aug 18, 2020
      Our goal is to explore some of Recoil’s main features in practice.
      • Diogo Souza
      Authentication Patterns for Next.js (leerob.io)
      Aug 17, 2020
      Authentication verifies who a user is, while authorization controls what a user can access. Next.js supports multiple patterns for authentication, each designed for different use cases. This guide will allow you to choose your adventure based on your constraints.
      • Lee Robinson
      Mastering Props And PropTypes In React (smashingmagazine.com)
      Aug 17, 2020
      Props and PropTypes are an important mechanism for passing information between React components, and we’re going to look into them in great detail here.
      • David Adeneye
      A low-friction way to do TDD with React (blog.logrocket.com)
      Aug 17, 2020
      This tutorial shows you how and why to use React Testing Library for low-friction Test Driven Development (TDD).
      • Jeff Auriemma
      8 ways to deploy a React app for free (blog.logrocket.com)
      Aug 17, 2020
      In this tutorial, we’ll demonstrate how to deploy a React application in eight different ways. All the services described in this post are completely free with no hidden credit card requirements.
      • Ashutosh Singh
      Keeping Server-Side Rendering Cool With React Hydration (aboutmonica.com)
      Aug 14, 2020
      Server-side rendering can be powerful but it does require thinking in multiple contexts so it's important to be familiar with some of the common gotchas when developing Server-Side Rendered websites.
      • Monica Powell
      5 Recommended ReactJS Tips and Best Practices (blog.bitsrc.io)
      Aug 12, 2020
      React.js tips from top React developers and engineers.
      • Nicolas Adrien
      8 React.js Project Ideas to Help You Start Learning by Doing (freecodecamp.org)
      Aug 12, 2020
      One of the best ways to learn is by doing. But often developers struggle with the big question "what should I build?"
      • Colby Fayock
      Richer, more accessible UIs with React Spectrum (blog.logrocket.com)
      Aug 11, 2020
      In mid-July, Adobe announced the release of React Spectrum, a collection of tools for building adaptive, accessible, and rich user experiences. At its core, React Spectrum is composed of three main parts.
      • Yusuff Faruq
      Build Scalable React Apps by Sharing UIs and Hooks (blog.bitsrc.io)
      Aug 10, 2020
      How to build scalable React apps with independent and shareable UI components and hooks.
      • Eden Ella
      Why You Should Learn Next.js as a React Developer (freecodecamp.org)
      Aug 10, 2020
      In this post, I'll describe my personal journey with Next.js. I'll also discuss why I believe that it is the right time to add it to your React stack.
      • Mehul Mohan
      React v17.0 Release Candidate: No New Features (reactjs.org)
      Aug 10, 2020
      Today, we are publishing the first Release Candidate for React 17. It has been two and a half years since the previous major release of React, which is a long time even by our standards! In this blog post, we will describe the role of this major release, what changes you can expect in it, and how you can try this release.
      How to Build a Temperature Control App in React – Tips and Starter Code Included (freecodecamp.org)
      Aug 07, 2020
      In this beginner React project, we're going to learn how to use state hooks, handle events, apply CSS based on state, and more!
      • Chris Blakely
        Blitz.js vs. RedwoodJS (blog.logrocket.com)
        Aug 07, 2020
        In this guide, we’ll analyze two frameworks that help developers in the full-stack application world strive toward these goals: Blitz.js and RedwoodJS.
        • Ganesh Mani
        How Next.js can help improve SEO (blog.logrocket.com)
        Aug 07, 2020
        The release of some awesome JavaScript frameworks, such as Next and Gatsby, has lead to more server-side applications being made. Let’s see a few reasons why single-page applications are not the best choice for some cases, especially for applications that are going to depend heavily on SEO.
        • Leonardo Maldonado
        A guide to using React Router v6 in React apps (blog.logrocket.com)
        Aug 07, 2020
        In this tutorial, let’s take a look at how to create routes using the React Router v6 library. Do note that, at the time of writing this post, React Router v6 is still in beta. This tutorial is going to give you a peek into some of the new features the library is coming out with.
        • Aman Mittal
        A Practical Guide To Product Tours In React Apps (smashingmagazine.com)
        Aug 06, 2020
        In the following guide, you’ll learn how to proactively use product tours to onboard users into a new and complex UX, and how to familiarize them with UI functionality without boring them, using a typical React app.
        • Blessing Krofegha
        How to Add a YouTube Playlist to a Next.js React App with the YouTube API (freecodecamp.org)
        Aug 06, 2020
        We’re going to put together a Next.js app that uses the YouTube API To fetch videos from a playlist.
        • Colby Fayock