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…

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…

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

Creating an Account

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…

GraphQL Code Generator can change the way you write GraphQL code going forward. Let’s see how easy it can be to get up and running with it by setting up a TypeScript based GraphQL server in Apollo.

GraphQL Code Generator is honestly a game-changer for writing GraphQL based code (both server and client-side). In this article, we will be learning how to leverage GraphQL Code Generator from within Apollo. In this article, we will use it by generating the types for our resolvers, enabling us to write type-safe resolvers with minimal effort.

Let’s Set Up Our Project

The first thing that we will need to…

Let’s learn how easy it can be to dynamically generate lists in React using the array map function.

For those of you who are unaware, using the map function is not React-specific syntax. It is entirely vanilla JavaScript. The map function in easier-to-understand words takes an array of items (oftentimes from a server) and returns an array that has been transformed to look differently. We will leverage this in React by taking a list of data and transforming that into a list of React components that we then render on the screen.

Let’s Start Coding

Let’s look at some examples to get an…

Surge is an elegant tool used for deploying static websites. It makes it so simple to deploy that you probably won’t believe it. Today we will learn how we can deploy a fully functioning React app running just a few commands.

Here is a link to the Surge website for those who would like to learn more about it.

Let’s Deploy a React App

We can start by opening up the command line (terminal or command prompt depending on the operating system).

The first thing you will need to do is install Surge by running this command.

npm install surge --global

With surge installed, it…