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…


Learn how to publish your React App incredibly fast using this amazing tool

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…


Today we will learn how to make a To-Do list using Redux to manage our app's state.

Redux is a popular state-management library, especially with React, but one of the downsides/complaints about Redux is often how boiler-platey it can be. Enter Redux Toolkit. Redux Toolkit cuts down significantly on the amount of Redux code that we will have to write and greatly improves developer experience, as you are about to see. So without further ado, let’s dive into creating our To-Do list.

Prerequisites

  • React Knowledge
  • TypeScript Knowledge
  • JavaScript Knowledge
  • Understanding of how Redux works (this will help, but is not necessary)

Let’s Get Started

Before we do anything else, our first step will be to create our project. We will be…


Find out why React Hooks has changed the way we write React code and why we should be very excited about it.

Before Hooks came along, the React world was very different. It was a world in which we had to learn two completely different ways to write our components. We had to use class-based components whenever we needed to hook into the “lifecycle” of a component or have a stateful component. There were still functional components, but they did not have the ability to do the two things I just mentioned. That is until React Hooks came along and…


We’re are going to learn how we can use IIFE’s (Immediately Invoked Function Expressions) to write asynchronous JavaScript in the useEffect hook.

IIFE’s (Immediately Invoked Function Expressions) are a far lesser-known syntax in JavaScript in my opinion. Basically, an IIFE is a function that is immediately executed after its definition. A lot of you may be wondering now, what is the point. Why even use a function if you are just going to execute it immediately afterward. The answer to that question is quite simple, and that is because we can use async-await syntax inside of it.

Below is an…


Learn how to get the most out of useState by using TypeScript for autocompletion and error catching

I feel like TypeScript really unlocks the potential of React Hooks. Using TypeScript with React Hooks just feels right. It unlocks highly accurate autocompletion as well as the ability to catch errors before they happen. We are about to learn what a perfect match React Hooks and TypeScript are for each other via some examples.

Let’s Get Started

Before we get into these examples I would like to go into some more detail about how the useState hook works with TypeScript (the ins and outs of it so to speak).

TypeScript will always try to infer types of variables, which is really good…


These two different solutions are perfect for getting up and running quickly with a new React project

React is great. It allows us to create rich user-interfaces with next to no hassle at all. It makes writing our UI code easy and fun. That’s all very exciting, so how does one create a React project. That answer unfortunately gets a little more complicated. There are literally tons of different ways to set up a React project (I’m being a bit facetious, but there are a lot). My plan in this article is to demonstrate how to create a React project by showing you what I believe to be two very solid and dead-simple solutions.

1. Create-React-App

Many of you…


You will learn just how simple making type-safe components in React can be and how much that is gonna improve writing React code

I love writing all my React code in TypeScript for a variety of reasons, but one of the big ones is that I am able to make my components type-safe out of the box, which in turn makes them less error prone. This is also a huge benefit when it comes to code completion in editors such as VS Code. If you are used to writing your React code in vanilla JavaScript what I am about to show you would be the equivalent to using prop-types.

Let’s Start Coding

I don’t plan on walking through coding a full React project for this tutorial…

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