Latest Articles & Tutorials

React Native Candy Crush Clone (itnext.io)
Apr 03, 2020
I started building JellyBean Jam as a volunteer project for Puppetry Arts LLC. I wanted to gain experience in React Native and it seemed like a fun way to get started. Before we get started, don’t forget to download JellyBean Jam for free on the App Store and try it out. My high score is 1400.
  • Andrew Fenner
The future of Reach Router and React Router (blog.logrocket.com)
Apr 03, 2020
In this article, I will talk about the new features in React Router, compare Reach Router (and React Router) to the new Hooks-based API, and briefly discuss how to migrate to this API.
  • Yusuff Faruq
Theming React Components with CSS Variables (blog.bitsrc.io)
Apr 03, 2020
Using CSS custom properties for React theming.
  • Eden Ella
Building and styling tables with react-table v7 (blog.logrocket.com)
Apr 02, 2020
It’s widely acknowledged that creating a table with React is a pain. No surprise, then, that there are many libraries to make creating tables easier for React apps. One of these packages that aims to make our lives easier is react-table. It provides a modern, Hooks-based API to let us create tables with React with little hassle. In this article, we’ll look at how to use react-table to add tables to our React app.
  • John Au-Yeung
Expo SDK 37 is now available (blog.expo.io)
Apr 01, 2020
Today, we’re announcing our first release of the decade! Expo SDK v37.0.0 (which uses React Native 0.61 internally) is our Spring release, but also inaugurates a new, bolder approach to empowering developers.
  • Eric Samelson
Testing a Virtual List component with Cypress and Storybook (itnext.io)
Apr 01, 2020
The challenges coming from integrating the tools, the current status of integration, and some best practices to properly test a rendered component.
  • Stefano Magni
Jest tests with react context api (itnext.io)
Apr 01, 2020
I always find myself doing dumb mistakes all over the code that could easily be caught by well-written tests. Last fall I attended this conference where this workshop leader said if you really want your developers to write good tests, you have to make the developers accountable. And you do that by fire all the testers. I love testers though.
  • Malin Milford
Building A Web App With Headless CMS And React (smashingmagazine.com)
Apr 01, 2020
This article introduces the concept of the headless CMS, a backend-only content management system that allows developers to create, store, manage and publish the content over an API. It gives developers the power to quickly build excellent user experiences, free from the worry of its impact on the back-end business logic.
  • Blessing Krofegha
How to Build Custom Forms with React Hooks (telerik.com)
Mar 31, 2020
Creating forms in React has become so easy now. We're going to learn how we can create custom forms using Hooks, and remove the necessity of downloading a ton of libraries for our applications.
  • Leonardo Maldonado
Understanding Ref Forwarding in React (blog.bitsrc.io)
Mar 31, 2020
How and when to use React.forwardRef
  • Chidume Nnamdi
How to Manage Reusable UI Components (hackernoon.com)
Mar 31, 2020
In this post I'll show you how we manage our reusable components in React, from development to integration in our applications.
  • Jonathan Saring
How to Build a Modular React UI Library with Bit and Bit.dev (medium.com)
Mar 31, 2020
A guide to building a React component library that scales.
  • Eden Ella
Using Tailwind CSS with Create React App (daveceddia.com)
Mar 30, 2020
I’ve been hearing a lot about Tailwind CSS lately and I wanted to give it a try, but I wanted to combine Tailwind with Create React App. In this post I’ll show you how to use Create React App with Tailwind CSS in just a couple quick minutes.
Codebase Conversion: Building a MEAN.js AngularJS Project with Create-React-App (blog.isquaredsoftware.com)
Mar 28, 2020
How I hacked CRA's config to have it build a classic AngularJS codebase.
  • Mark Erikson
What’s new in react-query v1.0 (blog.logrocket.com)
Mar 27, 2020
react-query v1.0 was released on 26 February, which brought about a change in the react-query API and all-new dedicated devtools.
  • Abdulazeez Abdulazeez Adeshina
    11 Useful Custom React Hooks for Your Next Web App (blog.bitsrc.io)
    Mar 26, 2020
    Top 11 recommended ReactJS custom Hooks — with examples.
    • Chidume Nnamdi
    Complete guide to building product tours on your React apps (blog.logrocket.com)
    Mar 26, 2020
    In this post, you’ll learn how to build a simple product tour for your React application.
    • Paramanantham Harrison
    Building a Real-Time Chat App with React and Firebase (css-tricks.com)
    Mar 25, 2020
    In this article, we’ll cover key concepts for authenticating a user with Firebase in a real-time chat application. We’ll integrate third-party auth providers (e.g. Google, Twitter and GitHub) and, once users are signed in, we’ll learn how to store user chat data in the Firebase Realtime Database, where we can sync data with a NoSQL cloud database.
    • Deven Rathore
    Measure Performance with the New React Profiler Component (blog.bitsrc.io)
    Mar 25, 2020
    Learn how to monitor your components’ performance with the new ReactJS Profiler component.
    • Chidume Nnamdi
    Next.js, Storybook, and Lerna: Build a Monorepo Structure (buttercms.com)
    Mar 24, 2020
    In this tutorial, you'll learn about how to build a monorepo using Lerna. We’ll be building a Next.js application which will import components from a separate package. We’ll also be using Storybook to showcase those components.
    • Nirmalya Ghosh
    How to test custom React hooks (kentcdodds.com)
    Mar 24, 2020
    Get confidence your custom React hooks work properly with solid tests.
    5 Recommended ReactJS Tips and Best Practices (blog.bitsrc.io)
    Mar 24, 2020
    React.js tips from top React developers and engineers.
    • Adam Raphael
    Comparing hooks libraries for GraphQL (blog.logrocket.com)
    Mar 24, 2020
    There are two major React Hooks libraries: graphql-hooks and apollo/react-hooks. To help you determine which library is best for your next GraphQL project, let’s compare them, examine their features, and weigh the pros and cons.
    • Ganesh Mani
    Quickly build schema-based forms in React with uniforms (blog.logrocket.com)
    Mar 23, 2020
    In this tutorial, we’ll demonstrate how you can use uniforms to efficiently build schema-based forms in React.
    • Godwin Ekuma
    Introducing React Navigation 5 (saidhayani.com)
    Mar 23, 2020
    I’m a big fan of this library and my first solution to handle the Navigation in React Native, it has an awesome and easy API, very customizable. version 5 just went from beta to stable. and it comes with some features changes and new API design that is a simple and different way to declare the Routes. In this article, we are going through the new APIs and ways to use them in our applications.
    • Said Hayani
    Creating Sortable Tables With React (smashingmagazine.com)
    Mar 20, 2020
    Making your tables sortable in React might sound like a daunting task, but it doesn’t have to be too difficult. In this article, we’re going to implement all you need to sort out all of your table sorting needs.
    • Kristofer Selbekk
    Fixing Gatsby’s rehydration issue (blog.logrocket.com)
    Mar 20, 2020
    If you have been developing Gatsby applications recently, it is likely that this has bitten you at some point.
    • Rafael Quintanilha
    React Suspense in Practice (css-tricks.com)
    Mar 19, 2020
    This post is about understanding how Suspense works, what it does, and seeing how it can integrate into a real web app. We'll look at how to integrate routing and data loading with Suspense in React.
    • Adam Rackis
    Getting started with Postgres in your React app (blog.logrocket.com)
    Mar 19, 2020
    In this tutorial, we’ll demonstrate how to create a small application using Express and Node.js that can record and remove information from a PostgreSQL database according to the HTTP requests it receives. We’ll then create a simple React app to test and see how the entire application flows from front to back.
    • Nathan Sebhastian
    A Sneak Peek at React Router v6 (alligator.io)
    Mar 17, 2020
    At the time of this writing, React Router v6 is still in alpha, but the time is about right to start playing with it and exploring what’s to come. This guide will give you a peek at the new features/changes!
    • William Le
    React Production Performance Monitoring (kentcdodds.com)
    Mar 17, 2020
    How to set up performance monitoring for production React applications.
    Implementing Infinite Scroll And Image Lazy Loading In React (smashingmagazine.com)
    Mar 16, 2020
    In this tutorial, we’re going to learn how to use the HTML Intersection Observer API to implement infinite scrolling and image lazy loading in a React functional component. In the process, we’ll learn how to use some of React’s hooks and how to create Custom Hooks.
    • Chidi Orji
      Building a CRUD App with React Hooks & the Context API (alligator.io)
      Mar 16, 2020
      This article will be covering React hooks, introduced in version 16.8 and the Context API, introduced in 16.3 and mixing them together to build a fully functional CRUD application.
      • Ishan Manandhar
      5 Recommended Tools for Optimizing Performance in ReactJS (blog.bitsrc.io)
      Mar 16, 2020
      My top favorite tools for monitoring and optimizing my React components.
      • Chidume Nnamdi
      NextJS OAuth with Passport + Github (zemuldo.com)
      Mar 14, 2020
      In this post we setup OAuth between a NextJS client and an Express API. I have assumed knowledge of JavaScript, Nodejs and Expressjs in this post. I however explain things well enough for anyone to catch up and understand things.
      • Danstan Onyango
      Getting started with styled-components in React (emgoto.com)
      Mar 13, 2020
      If you’re looking for a way to write easily maintainable and portable CSS in React, you may be interested in using the styled-components library. It’s one of a number of CSS in JS libraries that let you skip some of the pains that you may otherwise experience dealing with large and unwieldy .css files.
      • Emma Goto
      How to Show and Hide Elements in React (telerik.com)
      Mar 13, 2020
      Without if statements in JSX, how do you control your application's flow? Let's explore how to render or NOT render elements in React.
      How to Migrate a React App to TypeScript (sitepoint.com)
      Mar 12, 2020
      The purpose of this article is to be that friend for you and help you migrate your own project to TypeScript. For context, I will be using pieces from a personal project which I migrated while going through this process myself.
      • Joe Previte
      9 Tips for Building Awesome Reusable React Components (blog.bitsrc.io)
      Mar 12, 2020
      Tips for building reusable and shareable React components.
      • Eden Ella
      How to Start Testing Your React Apps Using the React Testing Library and Jest (freecodecamp.org)
      Mar 12, 2020
      Testing is often seen as a tedious process. It's extra code you have to write, and in some cases, to be honest, it's not needed. But every developer should know at least the basics of testing. It increases confidence in the products they build, and for most companies, it's a requirement.
      • Ibrahima Ndaw
      Code splitting React components with TypeScript and NO Babel (blog.logrocket.com)
      Mar 12, 2020
      With the advent of the now-infamous single page application, extreme amounts of JavaScript started getting pushed to the browser. The sheer weight of JavaScript is one problem, but the browser also has to parse the downloaded JavaScript.
      • Paul Cowan
      A Simple Guide to Error Boundaries in React (alligator.io)
      Mar 11, 2020
      In this article, you’ll learn about Error Boundaries via code snippets and interactive demos. If you’re still wondering what Error Boundaries are and how they work, this simple guide is for you!
      • William Le
      How to create a custom toast component with React (blog.logrocket.com)
      Mar 11, 2020
      In this tutorial, I’ll demonstrate how to create a custom toast component with React. We’ll use React hooks such as useState and useEffect. After creating the toast component, we’ll add some simple buttons to try out and display the toast on our page.
      • Uzochukwu Eddie Odozi
      React Hooks with Firebase Firestore (blog.logrocket.com)
      Mar 11, 2020
      What do React Hooks and Firebase have in common? They both accelerate development and reduce the amount of code you need to write to build something that would otherwise be complex.
      • Brian De Sousa
      React Native Starter Kits Review for 2020 (blog.bitsrc.io)
      Mar 10, 2020
      In this article we are going to review the number of the best React Native starter kits to give you a fuller view of them. If you like something, follow a link in the description of the chapter and jump into the mobile development world. Enjoy reading!
      • Anastasia Ovchinnikova
      You May Not Need Controlled Form Components (swyx.io)
      Mar 10, 2020
      Using the Name attribute in React Forms.
      The complete guide to publishing a React package to npm (blog.logrocket.com)
      Mar 10, 2020
      So you want to publish a React component as a package to npm? This guide will provide all the information you need, even if you’re completely new to this.
      • Ovie Okeh
        React Single File Components Are Here (swyx.io)
        Mar 10, 2020
        The launch of RedwoodJS today marks a first: it is the first time React components are being expressed in a single file format with explicit conventions.
        Visual Open Authoring with Next.js & TinaCMS (dev.to)
        Mar 10, 2020
        We're focused on improving the independent web as a whole. We want to craft tools that help people build better sites and create better content. In line with this mission, we sought to create something we call Visual Open Authoring.
        • Scott Gallant
        Comparing popular React component libraries (blog.logrocket.com)
        Mar 10, 2020
        In this article, we’ll compare popular React component 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.
        • Ibrahima Ndaw