Memoization is something which comes in handy for performance optimisations. I will try to make it seem less intimidating through this blog, and show you how you can use memoization to your advantage through a simple react application.

In this application, we will simulate how a car works and see memoization in action.

Creating the main App component

After generating a project using create-react-app, you can go into your src/App.js file. Here, we will create a component which will act as the main “car”, and will look over its different workings.

We will assume that our car will have basic functions of accelerating, braking and…

Through this blog, I will show you how to create a basic REST API using Node.js and PostgreSQL.

We will additionally be using express and node-postgres. This blog will not use an ORM such as Sequelize, so that we can understand the querying part better.

Our application will simply sign users up and add them to our database.

Creating the project base

In a directory of your choice, generate a bare node project:

npm init -y

Let us now install express:

npm install express

Great, we can now start a basic server. We will create the main app.js file:

const express = require('express');
const app…

Data structures lie at the heart of programming, and often come in handy when you least expect them to. And even when they don’t, you do definitely need them to crack a lot of interviews.

Linked Lists are a commonly occuring data structure, and this blog will help you understand how to implement one using typescript.

We will be looking at singly linked lists in this post.

To keep things interesting, we will use a pretty cool use case. …

Custom hooks are great to add flexibility to your code and reuse logic, with the help of the alreay existing react hooks in a creative way.

Through this blog post we will have a look at how to create custom hooks, and just how flexible we can be with them. To demonstrate this flexibility, we will use a pretty ridiculous use case: a Witcher needing a potion refill to boost his stats.

Creating a local project

Let us create a local react (typescript) project:

yarn create react-app custom-hooks --template typescript

We’ll remove the pre-populated stuff from our App.tsx

Generics definitely seem intimidating to anyone who is not used to them. In this blog post, I will try to make them a little less mysterious, and show how they can be useful by using a more hands-on approach.

You can follow along over at Typescript playground, if you do not have any local environment set up. I would recommend typing along the examples in a separate tab.

The first glimpse

Generics, as the name implies, help us create more reusable chunks of code.

In simple words:
They can help us create well defined classes, interfaces, and functions while still giving us the…

Interfaces might seem like a strange concept to newcomers in programming, and to programmers who have not used interfaces because they were either never too confident about them, or maybe because the tools they have used so far did not rely on using interfaces much.

Well, interfaces should be making your life easier instead of making you stress out! And I am writing this blog to show you exactly why.

We will understand the concept of interfaces, using one of my favourite games: Witcher 3, as the base.

In the game, consider the following two types of characters who often…

This blog is a part of the series — Getting started with React.

In the previous part we discussed about how to make API calls, create mock servers and implement routing for your web application.

In this part, we will understand the significance of storing a central state for your application which you can subscribe to, using react’s Context API.

Storing a central state- the need

In our web applications for this series of blogs so far, we have relied on props to distribute state from a parent component to its children components. …

This blog is part of the series ‘Getting started with React’ .

In the last part, we discussed about lifecycle methods in class based components. So far, we have only talked about APIs and emulated async tasks by using setTimeout( ) or setInterval( ).

In this part, we will create an application where we will mock a login flow and display a page with data about some famous action movie characters, and some famous action movie villains as well.

Let us first start by generating our application base by using create-react-app:

create-react-app heroes

This will create the basic structure of…

This blog is a part of the series ‘Getting started with React’.

In the last part, we covered the core concepts of react to get familiar with how the very basics of a react application work. A brief recap on what we learnt in the previous part:

  • The initial project structure for a react application
  • How our react code is hooked into plain HTML pages
  • What is JSX
  • Basics of using a local state to store our hero profiles
  • Styling our react components using CSS modules and inline styles
  • React fragments and creating iterables
  • Creating a basic functional component
  • Two…

This blog is a part of the series ‘Getting started with React’.

In part 1, we will be covering the core concepts of React.js and gradually building on that knowledge as we progress over the course of other Parts which I will publish following this.

In this Part, we will be creating a simple Superhero application, which can be used to list Superhero profiles and play with Superhero profiles.

*A note for those who are a bit familiar with React.js already: Please note that we will be creating this application in the conventional way using class based and functional components

Arun Kant Pant

Building things, breaking things, learning things

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