Intro

I’ve been working with React for over four years. During this time, I’ve formed some opinions on how I think applications should be. This is Part 5 in the series of such opinionated pieces.

My Pattern for React Context

My buddy Nader asked how I use React Context in my apps. I promised I’d write about it, so here we are.

Why

There are some instances in which your application state is needed by multiple components. I’ll use Context if this shared state requires a lot of prop drilling. In the past, Redux was a popular solution to avoid prop drilling. However, I don’t believe Redux…

Intro

I’ve been working with React for over four years. During this time, I’ve formed some opinions on how I think applications should be. This is part 4 in the series of such opinionated pieces.

Why

State location helps reduce the complexity of your application. In some cases, it can actually improve performance.

What Does Co-Locating Your State Mean?

Simply put, it means to put your state as close as possible to where it’s being used. You should avoid global state unless it’s absolutely necessary.

An Example

Here’s some code that I’ve come across several times in my career. I would avoid doing this:

I find this code overcomplicated…

Intro

I’ve been working with React for over four years. During this time, I’ve formed some opinions on how I think applications should be. This is part three in a series of opinion pieces on this topic.

What I’ll Be Covering

There are a lot of parts to state management. I won’t be able to cover them all in one sitting. For this post, I’ll show you how I use plain React to manage state in my components.

Make sure to follow me for my future posts related to state management, where I’ll write about:

• Component level state vs global state
• Good use cases and…

Intro

I’ve been working with React for over four years. During this time, I’ve formed some opinions on how I think applications should be. This is the second part of a series of such opinionated pieces.

Component File Structure

I have a convention that I use when creating component files. I like to put the things that I find the most important at the top and anything that is not necessary for someone using my component to know at the bottom.

File Structure

When I use a component, I ask myself these questions:

• Is this component fetching any data?
• What are the props that this…

Intro

I’ve been working with React for over four years. During this time, I’ve formed some opinions on how I think applications should be. This is the first part of a series of such opinionated pieces.

Folder Structure and File Naming

I have gone through many iterations of folder structure in the applications that I worked on. The one that I have found scales the best is to have flat folders and long file names. Since I use VSCode, it is easy to search for files, so the longer the name, the better. Here’s how I lay out most of my React applications.

Folder Structure

Here’s a…

JavaScript’s this confuses me.

I've been studying You Don’t Know JS to get a better understanding. These are my takeaways.

The main thing to remember is what this references is determined by how the function is called.

Why this?

In order to understand this, let's talk about why it exists in the first place.

this allows you to write a function and apply different contexts to it, without having to write a function for each context.

function greeting() {
  return "Hello, I'm " + this.name;
}var me = { name: "Faraz" };
var you = { name: "Saad" };console.log(greeting.call(me)); //…

Hi 👋! I’m Faraz, a software engineer @ AdHawk.

I wasn’t able to find too many resources on how to set up Google Optimize in a React app, so I decided to share how I solved this problem.

Google Optimize is a tool that allows you conduct A/B testing on your website, and it’s configurable from the Google Optimize dashboard. This allows non-engineering folks at your company to set up and run experiments on their own.

Creating Your React App

In this tutorial, we will be creating a new React app from scratch using create-react-app and adding Google Optimize to it. …

👋🏽 Hi! I’m Faraz, and I’m a software engineer @ AdHawk.

Recently, I’ve started to use TypeScript with Apollo and React, and I’d love to share something cool that I learned.

Apollo has a great set of command line tools that make generating type definitions for your queries quite simple. This gives you the power of type checking your queries wherever you use them! Let’s dive right in.

Setup

Let’s create a new React application that uses TypeScript.

npx create-react-app react-apollo-typescript --typescript

Sweet. Now, we need to install some dependencies that we will use to generate our types and use GraphQL…