Latest Articles & Tutorials

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.

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.

Using CSS custom properties for React theming.

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.

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.

The challenges coming from integrating the tools, the current status of integration, and some best practices to properly test a rendered component.

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.

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.

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.

How and when to use React.forwardRef

In this post I'll show you how we manage our reusable components in React, from development to integration in our applications.

A guide to building a React component library that scales.

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.

How I hacked CRA's config to have it build a classic AngularJS codebase.

react-query v1.0 was released on 26 February, which brought about a change in the react-query API and all-new dedicated devtools.

Top 11 recommended ReactJS custom Hooks — with examples.

In this post, you’ll learn how to build a simple product tour for your React application.

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.

Learn how to monitor your components’ performance with the new ReactJS Profiler component.

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.

Get confidence your custom React hooks work properly with solid tests.

React.js tips from top React developers and engineers.

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.

In this tutorial, we’ll demonstrate how you can use uniforms to efficiently build schema-based forms in React.

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.

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.

If you have been developing Gatsby applications recently, it is likely that this has bitten you at some point.

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.

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.

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!

How to set up performance monitoring for production React applications.

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.

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.

My top favorite tools for monitoring and optimizing my React components.

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.

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.

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.

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.

Tips for building reusable and shareable React components.

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.

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.

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!

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.

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.

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!

Using the Name attribute in React Forms.

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.

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.

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.

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.