It is now simpler than ever to get started with building React apps thanks to a variety of very clever build tools, which we will be talking about today.

Decreasing the barrier to entry for using React is very important, especially when you are first trying to learn it. I believe that these three build tools for React will do just that.

1: Create-React-App

Perhaps the most used way to scaffold out a React app is this tool. Create-React-App is a straightforward and easy-to-use command-line tool for building out a React application. The only thing that you need to get started is a command-line, and NodeJS/NPM installed.

Running the following command will create a brand new React app with the name of “demo.”

npx create-react-app demo

This will kick off creating…


Today, we will look at just how easy it can be to get up and running with Prop-Types in a React application.

Prop-Types are a useful package to add to any vanilla React app that does not use TypeScript. The value that they will provide to the codebase will be beneficial to projects, especially ones that will grow and expand. Things such as easier testing and autocompletion are gonna be huge benefits that this package can provide.

Let’s Get Started

We will be walking through a few different examples of how Prop-Types are used within a React project. I want to start by…


How to Use Import Instead of Require Statements in a Node App

Thanks to the support of ESM files in Node.js, the days of using const something = require('something') are a thing of the past. Let’s learn how easy it can be to switch to using import statements in your new Node,js projects.

Today we will be making a very simple Express API to demonstrate how modern import syntax can be implemented in vanilla NodeJS apps.

Pre-Requisites

  • Basic Understanding of NodeJS
  • Knowledge of Express is not a requirement, but will certainly be helpful
  • Beginner Level Command Line Experience (know how to make a new directory and change to it)
  • An up to date…


Today, let’s learn how easy Zustand can make it to manage global client-side state in React by making a to-do list with it.

When I first came across Zustand, I couldn’t believe how easy it was to use. The learning curve is incredibly thin. If you are familiar with how immutable state works in React, then you will feel right at home working with Zustand. So, without further ado, let’s make ourselves a to-do list.

Step 1: Setting Up Our Project

The first thing that we are going to need to do is to get a base project setup, and we can do this by using…


React Query makes it incredibly easy to query and cache server-side data, and in this tutorial, we will be learning how to leverage this.

For simplicity's sake, we will be building a fake API, which will allow us to fetch, add and remove todos from a list. The nice thing about what I am showing you is that the code we write can easily be translated into fetching data from a real API.

The decision for me not using a real API is based on the fact that a real API can introduce additional variables outside the scope of this…


We will learn how you can manage state locally in your app with Apollo using Reactive Variables.

Apollo is an extensive development platform that can be used for front-end and back-end development.

Today we will be focusing on Apollo’s implementation for React, known as Apollo-Client. Apollo-Client is a data fetching and caching tool that uses GraphQL to collect and manage its data, but they recently introduced a new feature called Reactive Variables, which doesn’t rely on GraphQL at all. We will be using Reactive Variables and a library called Immer (more on this later) to implement a local state-managed to-do list.

Below is a link to Apollo-Clients documentation of Reactive Variables for those of you who would…


How to create a Sign-Up form in React using React Hook Form, Material-UI, and Yup

We will be leveraging the power of a library called React Hook Form in this tutorial, which will make handling our form logic in React a breeze. Forms are an almost essential part of any website, and hopefully, by the end of this, everyone will feel comfortable making their own forms in React.

Pre-Requisites

We will not need too much for this tutorial. Below is a list of prior knowledge and tools you will need.

  • Node and NPM (Node Package Manager) installed
  • Beginner Level Knowledge of React
  • Understanding TypeScript is a Benefit (It will not be used heavily in this tutorial…


Let’s talk about some exciting technologies that I think can change the way we write code as a web-developer.

One of the things that we as web developers have to be very good at that doesn’t get enough credit is the ability to learn new things. We work in a space where things can change so fast. That’s why in my opinion, it is important for us to constantly expand our horizons and learn new things. I’m gonna talk about 5 things that I plan on learning in 2021.

This article will be different from most of the articles that…


It’s easier than ever before to set up authentication in your React app, and that is thanks in large part to Auth0

For those of you who don’t know, Auth0 is a tool that provides Authentication to developers as a service. It will essentially allow us to make a secure experience for our users without the hassle of trying to learn and understand everything about Authentication and Authorization.

Prerequisites

We will not need much to be able to do this tutorial.

  • Knowledge of React
  • Node and NPM installed on your machine
  • A positive attitude (this is the most important one)

Let’s Get Started

First things first, if you don’t have an account on Auth0, you will have to create one really quick. Don’t worry. It’s incredibly…


React is very open in how you can approach styling it. I am gonna hit on what I believe to be the most popular approaches to styling in React.

There are so many different ways to Style things in React, and although they are all very different, they are still quite similar. Similar in the way that CSS is what drives all of them. If you know CSS, you can use whichever one your heart desires to great effect.

1. Regular CSS

This is the tried and true method that has been used what seems like the entire life of the internet. Many…

Brian Francis

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store