React is very unopinionated about how things should be structured. This is exactly why it’s our responsibility to keep our projects clean and maintainable.

Today, we will talk about some best practices to follow to improve your React application’s health. These rules are widely accepted. As such, having this knowledge is imperative.

Everything will be shown with code, so buckle up!

1. Use JSX ShortHand

Try to use JSX shorthand for passing boolean variables. Let’s say you want to control the title visibility of a Navbar component.

Bad

Good

2. Use Ternary Operators

Let’s say you want to show a particular user’s details based on role.

Bad

Good

3. Take Advantage of Object Literals

…

Ever got frustrated with a horrible API where everything’s a guessing game? Well, I have.

In this world of microservices, a consistent design for your backend API is imperative.

Today, we’ll talk about some best practices to follow. We’ll keep it short and sweet — so buckle up!

First, Some Terminology

Any API design follows something called Resource Oriented Design It consists of three key concepts

• Resource: A resource is a piece of data, For example, a User.
• Collection: A group of resources is called a collection. Example: A list of users
• URL: Identifies the location of resource or collection. Example: /user

1. Use kebab-case for URLs

For…

Getting the job done is the most important thing in software development. But how do you separate yourself from others? Well, from my experience, I can say the difference is in the approach.

Over the years, I’ve worked with a number of React developers. Here are some things that separate a great developer from an average one.

1. They Don’t Use Index as the Key

When we render a list, usually we get a warning saying that we need to provide a key for each list item. We lazy people often use the index as the key.

Something like this:

But in the React documentation, they…

Over the years I have had the privilege to work on some large-scale react projects. Today I am gathering some essential things to keep in mind when building a new project or enhancing the functionality of any large scale application.

We will start from the absolute basics and then go deeper. So buckle up!

1. Project Structure

When I started with React it was intuitive for me to keep files by their types. Bus as I had the privilege to work on some larger projects I understood how difficult it can be to navigate through your files as any project grows bigger

Take…

Having some cloud knowledge is getting more important by the day. If you are primarily a frontend developer, then having AWS knowledge can keep you ahead of the competition.

Today, we will learn how to use AWS DynamoDB from a React application. This is one of the most popular services of AWS and definitely worth learning.

To follow along, you should have:

• An AWS account
• Basic knowledge of React

Let’s get started!

1. Create a DynamoDB Table

Head over to the AWS management console and search for DynamoDB. Then hit the “Create new table” button and you will be presented with this screen.

• Give a…

The dependency inversion principle is one of the famous SOLID principles. Also, it is one of the most important ones.

Today, we will see how to solve a very common mistake that novice React developers make using this principle.

I will try to keep it very simple. Let’s get started!

What Does This Principle Tell Us?

In terms of object-oriented programming, the main idea behind this principle is to always have a high-level code interface with abstraction rather than an implementation detail.

Hold on! I know what you are thinking: “I am a simple frontend developer. Why are you bothering me with these complex terms?”

Let…

Going inside any framework has two benefits. It makes you a better developer and improves your understanding of the job that you are doing.

It also helps you appreciate the things that these frameworks do under the hood that we take for granted.

I wanted to go deep inside React to see how an application really works under the hood by replicating it locally.

Today, I will take you with me on this journey. I will try to keep the concepts beginner-friendly for you. You don’t need to code with me. But if you do, that will be awesome!

Let’s…

State management is a big part of our modern web applications. The need for a global state manager was felt since the beginning of React.

Then Redux came into the picture and won it. It has become the go-to state management solution for most large-scale applications.

But redux is far from perfect. And recently it seems that the popularity of redux is declining. Many new players have joined the game of state management and Recoil is one of them.

So what’s Recoil anyway?

Simply speaking Recoil is yet another state management solution for React. React community has jumped up after the introduction of RecoilJS…