NPM stands for Node Package Manager and is a go to tool for managing NodeJS packages.

• It helps you install libraries, manage dependencies & even define scripts to automate tasks.

Now switch to the term NPX which stands for Node Package Execute

• it comes with the NPM, when you installed NPM above 5.2.0 version then automatically NPX will installed.

• It is a NPM package runner that can execute any package that you want from the NPM registry without even installing that package.

Let’s take a simple example to understand the difference between the two:

🎯 NPM

📍 Example

Create a new directory

mkdir test-project
cd test-project

Now install the package cowsay using NPM

npm install cowsay

Now if you check your project directory there will be new entry created inside the node_modules

You can use this new package using that path like

./node_modules/.bin/cowsay hello

Or instead of using the whole path, directly use the package name like

cowsay world

So now you understand whenever we use NPM for any package update you have to install it which will occupy space in your system.

📍 Usage

• You are working on a long-term project where you’ll frequently use the same packages and libraries.

• You want to manage dependencies and ensure they are tracked in your package.json.

🎯 NPX

📍 Example

It is a NPM Package Executor that can execute any package that you want from the NPM registry without even installing that package.

Let’s try this out:

mkdir test-npx
cd test-npx

npx cowsay hello

Also if you check test-npx directory, it is empty that means this package does not occupy any space.

📍 Usage

• You want to execute a package without permanently installing it.

• You’re running one-off commands like create-react-app, eslint, or package binaries.

• You need to run a specific version of a package or command without modifying your existing setup.

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together. LinkedIn Twitter Instagram

Let’s try to understand it in a better way by creating your own simple CLI tool.

In this article, we will create a simple Calculator CLI tool.

🎯 What is CLI Tool?

A CLI (Command Line Interface) tool is just a program you run in the terminal by typing commands with your keyboard, instead of clicking buttons in a GUI (Graphical User Interface).

🎯 Project Setup

1. Setup the Project with initial command

npm init

2. Create a folder named src in the root directory of your project.

3. Inside src create a file called index.js This is going to be the entry point of our CLI.

4. In the package.json file, change the “main” part to src/index.js.

5. Now manually add another entry into the package.json file called bin and set its key to calc and it's value to ./src/index.js.

Your resultant package.json file would look like this:

{
  "name": "calculator-cli-tool",
  "version": "1.0.0",
  "description": "A CLI tool used for calculations",
  "main": "src/index.js",
  "bin": {
    "calc": "./src/index.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

The key calc, is the keyword for calling the CLI. This is the keyword that user will type in the terminal for using your CLI.

🎯 Commander

• Commander is a popular Node.js library that makes it easy to build CLI tools.

• What commander gives you?

  1. Commands → Define sub-commands like add, multiply.

  2. Arguments → Easily get values like 5 7.

  3. Options (flags) → Support things like --verbose or --format json.

  4. Automatic help → Generates --help output for free.

  5. Versioning → Add --version easily.

Let’s install commander:

npm install commander

In src/index.js file:

#!/usr/bin/env node
const { Command } = require('commander');
const program = new Command();

program
  .name('calc')
  .description('A simple calculator CLI')
  .version('1.0.0');

// Command: add
program
  .command('add <a> <b>')
  .description('Add two numbers')
  .action((a, b) => {
    console.log(Number(a) + Number(b));
  });

// Command: multiply
program
  .command('multiply <a> <b>')
  .description('Multiply two numbers')
  .option('-v, --verbose', 'Show detailed steps')
  .action((a, b, options) => {
    const result = Number(a) * Number(b);
    if (options.verbose) {
      console.log(`${a} * ${b} = ${result}`);
    } else {
      console.log(result);
    }
  });

program.parse();

🎯 Link it globally

Now if you run the below command in your project folder, this creates a global symlink so you can use calc anywhere.

npm link

Now your CLI tool is ready to use anywhere in your system. Let’s try it now:

🎯 CLI Building Blocks

As you noticed in the above examples, there are multiple parts in the single commands, let’s break it down.

• calc is the main command (the tool itself).

• add, multiply represents sub-command (an action inside calc).

• 5, 7 represents the arguments (values you pass)

• —verbose is a option which acts like a flag & modifies behavior

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together. LinkedIn Twitter Instagram

Each use cases demand a different pattern to solve the problem in the most optimised way and also made our code more scalable.

React provides different design patterns to solve common problems. The list of commonly used design patterns in React are:

• Presentational & Container Component

• Higher Order Components

• Render Props

• Compound Components

• Hooks

Let's explore them one by one.

🎯 1. Presentational & Container Component

Each component in React has two parts: One is logic to handle your data and the other is displaying data on screen.

This pattern helps separate concerns by splitting components into two categories. Container components handle the logic and state management, while Presentational components focus on rendering the UI based on the provided props.

export const DisplayList = ({ patientRecord }) => {
  return (
    <ul>
      {patientRecord.map((patient, id) => {
        return <li key={id}>{patient}</li>;
      })}
    </ul>
  );
};

Container components, on the other hand, keep track of the internal states and data-fetching logic and handles business logic.

export const PatientComponent = () => {
  const [patientList, getPatientList] = React.useState([]);

  React.useEffect(() => {
    // Fetch data through an API and apply business logic
    (async () => {
      const response = await fetchPatientList();

      setPatientList([...response]);
    })()
  }, []);

  // provide data to presentational component to display
  return <DisplayList patientRecord={patientList} />; 
};

The container component passes the state and any required callbacks as props to the presentational component. The presentational component is responsible for rendering the UI based on the provided props, without worrying about the data fetching or business logic.

🎯 2. Higher Order Components

HOCs take one component as an input and give a newly created component with additional functionalities as an output. It allows you to reuse component logic by wrapping components with additional functionality.

By using HOCs, we can easily add common functionality to multiple components without duplicating code.

import React from 'react';

function withLogging(WrappedComponent) {
  return function WithLogging(props) {
    React.useEffect(() => {
      console.log(`Component ${WrappedComponent.name} mounted`);
      return () => {
        console.log(`Component ${WrappedComponent.name} unmounted`);
      };
    }, []);

    return <WrappedComponent {...props} />;
  };
}

// Usage
const MyComponent = (props) => {
  return <div>My Component</div>;
};

const EnhancedComponent = withLogger(MyComponent);

In the example above, withLogger is a HOC that takes a component (WrappedComponent) as input and returns a new component (WithLogger). The returned component logs a message to the console when it mounts and unmounts.

To use the HOC, we wrap our original component MyComponent with withLogger, creating a new component EnhancedComponent. The enhanced component has the same functionality as MyComponent, but it also includes the logging behaviour defined in the HOC.

🎯 3. Render props

In this pattern, a component receives a function as a prop and uses that function to render its content.

import React from 'react';

const MouseTracker = (props) => {
  const [position, setPosition] = React.useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setPosition({ x: event.clientX, y: event.clientY });
  };

  return <div onMouseMove={handleMouseMove}>{props.renderPosition(position)}</div>;
};

// Usage
const DisplayMousePosition = () => (
  <MouseTracker
    renderPosition={({ x, y }) => (
      <div>
        Mouse position: {x}, {y}
      </div>
    )}
  />
);

A prop like renderPosition is called a render prop because it is a prop that specifies how to render a piece of the user interface.

🎯 4. Compound Components

Compound components are a pattern used in React to create components that work together as a group, allowing users to customize and control the rendering of multiple related components.

It allows you to define a parent component that encapsulates the behaviour and state of child components, while still giving flexibility to users to determine the composition and appearance of the child components.

Let's consider a use case where you need to create a List component in React which looks something like an unordered list in native HTML or an Accordion component.

<List>
 <ListItem>1</ListItem>
 <ListItem>2</ListItem>  
 <ListItem>3</ListItem>
 <ListItem>4</ListItem> 
</List>

Now in this scenario, we need some of the states of the List component to be transferred to its child component i.e. ListItem. It can be implemented either by using the context API or React.cloneElement API.

Let's explore how to develop the same scenario using Context API.

const ListContext = React.createContext();
const { Provider } = ListContext;

// Parent Component
export const List = (props) => {
  const { children, size } = props;

  const sharedProp = { size }

  return (
    <Provider value={sharedProp}>
      <ul>
        {children}
      </ul>  
    </Provider>
  )
}

// Child Component
export const ListItem = (props) => {
  const contextProp = React.useContext(ListContext);
  const { size } = contextProp;

  return (
   <li className={size === 'medium' ? bg-primary : bg-secondary}>
      {props.children}
   </li>
  )
}

// Usage
<List size='medium'>
 <ListItem>Item 1</ListItem>
 <ListItem>Item 2</ListItem>
 <ListItem>Item 3</ListItem>
</List>

In the above example, React Context is created to share the prop size between the parent (<List>) and child (<ListItem>) components. Also, the user has the flexibility to provide custom content inside each list item.

🎯 5. Hooks

Hooks are introduced in React Functional component as a replacement for Class components. There are multiple hooks available to manage states and different lifecycle methods of React.

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <Button onClick={() => setCount(count + 1)}></Button>
  )
}

We can also create custom hooks to solve our specific use case and code reusability.

You can read about the most commonly used built-in react hooks here.

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together. LinkedIn Twitter Instagram

We'll look into the different approaches to building component APIs.

🎯 Component Requirements

While building a component, we'll consider into mind the different use cases and as we add more functionality, the complexity of components increases. So before building future-proof components let's first explore all the use cases:

Consider creating an Alert component which looks something similar to this:

Let's first break down the entire component into smaller subcomponents.

The Alert component consists of the following subparts:

1. Title

   It can be a string or may be optional

2. Message

   Message can consist of multiline text or any other component. So we can fix its type to string | ReactNode

3. Action buttons

   It consists of any component where input from the user is required. It may consist of multiple buttons, or any other component or might be an optional field.

   Its type is set to ReactNode | undefined

4. Icon

   • We can define any icon to be shown.

   • Along with the icon name, its position also matters. There might be a case when we need to show the icon to the right.

   • The icon can also vary based on size.

5. Variants

   

   The alert component can come under multiple variants and based on the type of variants colours, the font style of its subparts (title, message, icon) changes.

6. Patterns

   As some of the subparts are optional in the Alert component and the user can also add its custom component, this will result in multiple patterns.

   

   Now that we had go through all the requirements, let's move to the code part.

🎯 Configuration

In the Configuration approach, the user can pass data to the component via props, and the component should know exactly how to render itself based on that props.

Let's move with the above example of the Alert component and see how to design its API using a configuration approach.

const Alert = (props) => {
    const {
        title,
        description,
        actions,
        iconName, 
        iconSize, 
        iconPosition='left', 
        iconColor, 
        variant 
    } = props;

    return (
        <div className={variantClass}>
          {iconName && 
            <Icon 
              name={iconName} 
              size={iconSize} 
              position={iconPosition} 
              appearance={iconColor} 
            />
          }
          <div>
            {title && <Heading>{title}</Heading>}
            {message && <Paragraph>{description}</Paragraph>}
            {actions && (
              <div>{actions}</div>
            )}
         </div>
        </div>

    )
}

export default Alert;

Users can use this component using the following API:

<Alert 
  title='Title goes here'
  description='Message goes here'
  variant='warning'
  iconName='warning_check'
  iconPosition='right'  
  actions={
    <div>
      <Button>Action 1</Button>
      <Button>Action 2</Button>
    </div>
  }
/>

As you notice, for all the functionality user needs to pass a prop to the component but all the design decision and rendering is handled internally by the component.

📍 Pros:

• Quick and easy to use. Different functionality and visual variants can be controlled by configuring props.

• Configuration API via props makes it harder to diverge from the design system and keeps the UI and behaviour consistent.

📍 Cons:

• Adding more features requires more props and conditional logic. Thus a component becomes harder to maintain.

• Not easy to extend.

• Not easy to override

• If a component can't be extended, a new version might need to be built.

Using the above approach, the user does not need to worry about the design consistency across the app, they simply need to pass the prop to the component and all the design and visual aspects need to be handled by the component internally.

But it may be overhead as sometimes props provided by the component are not enough to satisfy all the use cases and the user may want some kind of customisation. Also for each functionality providing a different prop may to lead complex APIs which are not easy to extend.

Let's explore another approach for a similar use case.

🎯 Composition

In the Composition approach, Users should be able to take small building blocks and combine them together in whatever order they like.

Using this approach, the user is provided with multiple subcomponents which can be used in whatever order as per their use cases. Let's look at an example for better understanding.

<Alert variant='warning'>
    <Alert.Container>
        <Alert.Title>
            Title goes here
        </Alert.Title>
        <Alert.Description>
            <div>Hello World!!</div>
            <Badge>Description</Badge>
            <Paragraph>Short Description</Paragraph>
        </Alert.Description>
        <Alert.Action>
          <div>
            <Button>Action 1</Button>
            <Button>Action 2</Button>
          </div>
        </Alert.Action>
        <Alert.Icon name='warning_check' />
    <Alert.Container>
</Alert>

In the above code, instead of passing multiple props, the user can use smaller subcomponents for customisation. For example, Instead of passing a description as a string they can also pass a custom-designed description as per their use case. And also change the position of the icon to the right.

All these are just building blocks which are used to compose the functionality based on different use cases.

📍 Pros:

• Extremely flexible

• It's easy to create different functionality and UI variants and add new building blocks.

• Makes a component library much more resistant to change

📍 Cons:

• You need to compose the building blocks yourself to create a fully functioning component/feature.

• Takes more time and code.

• It's easy to diverge from the design system and ship inconsistent UI and behaviour.

🎯 Which Approach to use?

Both approaches as we see above have their advantages and disadvantages. Then the question is which one to use and when?

The approach you want to use totally depends on your use case and design pattern. There might be cases when we can use both approaches to satisfy our use case appropriately.

🎯 Summary

The Composition approach offers more flexibility, but it does require more knowledge of how to compose the building blocks and how they work.

On the other hand, the Configuration approach is less flexible, but it is simpler to use and makes it easier to stick to the design system.

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together. LinkedIn Twitter Instagram

🎯 Register a Service Worker

Create a service worker and register it in a browser from another javascript file.

In file js/app.js:

// Step 1: register a service worker
if('serviceWorker' in navigator){
  navigator.serviceWorker.register('/sw.js')
  .then((reg) => console.log('Service Worker Registered', reg))
  .catch((err) => console.log('Error in Registering Service Worker', err))
}

• First, we will check if the browser supports the service worker or not.

• navigator is an object in javascript that represents the browser and information about it.

• In register method we need to provide the path to our service worker file.

Now you can check the result in the browser.

Points to remember:

• Service workers only work on pages where they're served over a secure HTTPS connection. Also, localhost is an exception so that we can easily develop an app using service workers.

🎯 Install Event

The browser emits the install event automatically while the service worker is being installed. So we can listen to that install event.

Create a new file sw.js in the root directory so that it has access to the overall scope.

In file sw.js:

const staticCacheName = "site-static-v2";
const assets = [
  "/",
  "/index.html",
  "/js/app.js",
  "/css/styles.css",
  "https://unpkg.com/@innovaccer/design-system@2.15.3/css/dist/index.css",
  "https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&display=swap",
  "https://fonts.gstatic.com/s/nunitosans/v12/pe03MImSLYBIv1o4X1M8cc8GBs5tU1ECVZl_.woff2",
  "/pages/404.html"
];

// Step 2: Install Service Worker
self.addEventListener("install", (event) => {
  console.log("service worker has been installed!!");
  event.waitUntil(
    caches.open(staticCacheName).then((cache) => {
      console.log("caching shell assets");
      cache.addAll(assets);
    })
  );
});

• self inside a service worker refers to the service worker itself.

• This event will occur only when we first install it or any changes in the file have been made.

• We can use this event to add common assets to the cache so that users can still see those assets in the offline mode.

🎯 Activate Event

When the service worker is installed it becomes active. Once the service worker is active, it can access all the different pages and all the different files inside its scope.

const clearOldCaches = () =>
  caches.keys().then((keys) =>
    Promise.all(
      keys
        .filter((key) => key !== staticCacheName && key !== dynamicCacheName)
        .map((key) => {
          console.log("[sw] remove cache", key);
          caches.delete(key);
          return true;
        })
    )
  );

// Step 3: Activate Service Worker
self.addEventListener("activate", (event) => {
  console.log("service worker has been activated!!");

  event.waitUntil(clearOldCaches());
});

The service worker will wait to activate until all the instances of the app will be closed.

But it is a bit tedious as we have to first close all the tabs on which our app is running and then it reinstalls and comes under the running state. To avoid this we can use the following approaches:

• use the skipWaiting option.

• use Update on reload option.

🎯 Fetch Event

The fetch event occurs whenever we try to get something from a server like any CSS file or javascript file.

We have index.html file running in the browser which was initially fetched from a server. When an app requests a stylesheet or images or some other page it sends a request from the browser to the server and in response gets the requested resources.

We also have a service worker in the background listening for any fetch requests from our app. This service worker acts as a proxy between our app and a server.

Now whenever we make any request for resources it goes through the service worker and at this point, a fetch event is emitted and the service worker can listen for and react to it. We can either intercept the request or sent a custom response.

Service workers handle the cached asset and while making a fetch request we can prevent to sent the request directly to the server and instead send cached resources.

self.addEventListener("fetch", (e) => {
  e.respondWith(
    (async () => {
      const r = await caches.match(e.request);
      console.log(`[Service Worker] Fetching resource: ${e.request.url}`);
      if (r) {
        return r;
      }
      const response = await fetch(e.request);
      const cache = await caches.open(dynamicCacheName);
      console.log(`[Service Worker] Caching new resource: ${e.request.url}`);
      cache.put(e.request, response.clone());
      return response;
    })()
  );
});

Now we have seen all the lifecycle events of the service worker. A service worker is one of the steps in creating a Progressive web app. Let's see how to audit your application.

🎯 Lighthouse Audit

Chrome dev tools give us a way to audit our application using the lighthouse plugin which provides us with a checklist of required actions to make a site a valid PWA.

Go to the Lighthouse tab in Chrome dev tools and check the Progressive Web App option and press the Analyze page load button.

It provides us with the checklists to complete to create a valid PWA.

🎯 Install Prompt

We can also get an 'Install Banner' in our app by fulfilling certain criteria. This banner is similar to Add to home screen option which allows us to install the application into our device.

We can check all the criteria to show the install banner on this site.

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together. LinkedIn Twitter Instagram

🎯 Introduction

A service worker is a script that runs in the background of a web page, separate from the main page thread.

They are simply a javascript file but not exactly the same as a normal javascript file.

So whenever we create some kind of website we might have a mix of HTML, CSS and javascript files and then we upload those files to the server. When we request them by going to the web address we see them in the browser. Normal javascript file runs on a single thread inside the browser which is tightly coupled with the HTML page and it can access the DOM and manipulate the page content.

Now, when we create a service worker javascript file, it doesn't run on the same thread as our normal javascript file. It runs on a different thread in another part of the browser isolated away from the HTML page. That is why it does not have access to the DOM. So we cannot directly read, change or remove page content.

Service workers are background process. Their job is to provide an app-like functionality by listening and reacting to the events which occur in the browser.

Service worker listens to events such as fetch HTTP requests made by the browser.

🎯 Service Worker Life Cycle

Service Worker follows the following lifecycle:

1. Register: first register the service worker with the browser. From our normal javascript file (e.g. app.js), we register a service worker basically telling the browser that a certain javascript file (e.g. sw.js) should be registered as a service worker and put onto that separate thread.

2. Install: After the registration, the browser downloads and installs the service worker script. We can listen to this lifecycle event inside the `sw.js` file itself. This event is fired only once when the service worker is registered. Or the code inside the service worker file has changed since the last time it was installed in the browser.

3. Active: When the service worker is installed it becomes active. Once the service worker is active, it can access all the different pages and all the different files inside its scope.

   If we made some changes in the service worker file then it will become active only when all the instances of our app are closed.

4. Fetch and Cache: When a fetch event occurs, the service worker intercepts the network request and can respond with cached assets instead of making a network request. This allows the service worker to serve content even when the user is offline. The service worker can also update the cache with fresh content from the network when available.

5. Update: When a new version of the service worker is detected by the browser, it is downloaded and installed in the background. The new version enters a "waiting" state while the currently active service worker handles any ongoing events. Once all tabs using the old service worker are closed, the new version takes control during the activation phase, and the cycle continues.

🎯 Advantages

Service workers help to achieve all the things that you would expect in a modern app that runs on a mobile device like:

• Load Content Offline: you still open and view the app without any internet connection by using cached assets and data.

• Use Background Sync: If a user tries to perform an action while they're offline that normally requires a connection, then it will perform an action in the background when a connection is re-established.

• Use Push Notifications: Our app can notify users on a device

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together. LinkedIn Twitter Instagram

Let's learn how to create simple PWA using HTML, CSS and vanilla JS.

🎯 What is PWA?

PWA stands for "Progressive Web App". PWAs are simply alternatives to creating a native mobile app. It is a web application that is designed to provide an app-like experience to users on their mobile devices or desktop browsers, without the need to download and install a native app from an app store.

Using PWAs we can create a mobile app with vanilla javascript that runs inside a browser just like a normal website does but which could also consist of the features of native mobile apps so that when we run that web app on a mobile it could do things that a native app could do as well like:

• Be installed onto the home screen of the mobile

• Access the application when offline

• Get push notifications

🎯 Advantages of PWA

• Can be made using vanilla JS, HTML & CSS

• Accessed via a web address and not the app store

• Can be installed on the mobile home screen

• Runs in the browser but with access to device features

• Can be used offline

• Can use web push notifications

🎯 Technical components of PWA

We can simply create a progressive web app using the below components:

• The Web App Manifest

• Application Shell

• Service Workers

Don't worry if this sounds like bit complicated, we'll look into these components one by one.

🎯 Basic Setup

We will create a simple web app with three pages Home , About , Contact and later on convert it into PWA.

Let's build a basic setup of our app. We'll start with a simple HTML file.

In index.html file:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PWA Application</title>
    <link rel="stylesheet" href="/css/styles.css" />
    <link
      href="https://unpkg.com/@innovaccer/design-system@2.15.3/css/dist/index.css"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&display=swap"
      rel="stylesheet"
    />
    <meta name="theme-color" content="#FFE1C4" />
  </head>
  <body
    class="d-flex h-100 align-items-center flex-column justify-content-center"
  >
    <nav class="p-10">
      <a class="links" href="/index.html">Home</a>
      <a class="links" href="/pages/about.html">About</a>
      <a class="links" href="/pages/contact.html">Contact</a>
    </nav>
    <div>
      <div class="bg-primary p-10">
        <h2>My PWA Application</h2>
      </div>
    </div>
  </body>
</html>

Similarly, create the other two pages About & Contact

🎯 Web App Manifest

This is a single JSON file which is going to provide information about our app to the browser like:

• name of the application

• home screen icon for the mobile

• colour theme

• start URL

By providing the above information, the browser would know how to display our app properly on a mobile when it's installed onto it.

By using the Web App Manifest, PWAs can be easily installed on a user's device and provide a more native-like experience, even when accessed through a browser.

On the root of the project, create a file manifest.json

{
  "name": "My PWA App",
  "short_name": "PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#FFE9D2",
  "theme_color": "#FFE1C4",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/img/icons/icon-72x72.png",
      "type": "image/png",
      "sizes": "72x72"
    },
    {
      "src": "/img/icons/icon-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "/img/icons/icon-128x128.png",
      "type": "image/png",
      "sizes": "128x128"
    },
    {
      "src": "/img/icons/icon-144x144.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "/img/icons/icon-152x152.png",
      "type": "image/png",
      "sizes": "152x152"
    },
    {
      "src": "/img/icons/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/img/icons/icon-384x384.png",
      "type": "image/png",
      "sizes": "384x384"
    },
    {
      "src": "/img/icons/icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

• name: the name of your app, this is going to be shown when you click on the application on the splash screen while the application loads in the mobile.

• short_name: the name that displays underneath the icon on the home screen when someone installs your application.

• start_url: the URL of the page that actually opens up when the user taps on the icon when we install it onto the home screen.

• display: it specifies the developers' preferred display mode for the website. By selecting "standalone" it's not going to show the other browser things like the address bar at the top.

• icons: An array of objects and each object represents a different icon. Depending on the device we are installing the app on, it's going to use a different-sized icon.

Don't forget to include this manifest.json file inside your all HTML files like this:

<link rel="manifest" href="/manifest.json" />

Now you can all those properties which you have provided inside the browser in the Application Tab:

Browser will take all the information and when we install this onto our mobile device it can make sure that our app displays properly.

You can read more about web app manifest [here](https://web.dev/add-manifest/)

🎯 Application Shell

Now let's move to the next component of PWA i.e. Application Shell.

The app shell is the minimum HTML, CSS, and javascript that is required to power the user interface of PWAs. It represents the static parts of the app that remain consistent across different views or pages. This includes components like the header, footer, navigation menu, and other UI elements that are visible on every page.

By caching the App Shell in the service worker, PWAs can load instantly and provide a smooth user experience even in offline or low connectivity scenarios.

The App Shell provides a consistent UI and navigation experience throughout the app, making it feel more like a native application.

There are more important concepts of PWA like service workers etc. which we will cover in the next article.

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together. LinkedIn Twitter Instagram

• At first glance, it looks like an application without a server. But it's not.

• It basically means you're not responsible for managing and provisioning the servers.

• These servers are managed by the cloud provider and you as a developer has to focus more on the development part or writing your business logic.

🎯 Serverless Function

• A serverless function refers to a single-purpose piece of code.

• It enables running code on-demand without the need to manage your own infrastructure, provision servers, or upgrade hardware.

🎯 Function as a Service

• "Function as a Service" (FaaS) is actually a subset of serverless functions.

• Serverless functions can fall into any service category where the configuration and management of servers are invisible to the end user.

• FaaS, on the other hand, refers exclusively to event-driven computing wherein the code only runs in response to specific events or requests.

🎯 How does it work?

All the cloud providers have "Function as a Service" (FaaS). This is essentially a computing platform for serverless where you run your functions. Functions may contain your business logic or code you want to execute on the trigger of any event.

Event here refers to any action performed through your application like the click of a button or submitting a form, etc. which creates an event and then calls your function and runs your code.

Serverless functions are built using these steps:

1. create a serverless function

2. deploy it to a platform

3. call it through an API from your frontend code (using something like fetch or an Axios)

🎯 Advantages of Serverless

• Pay for execution only: you only pay for the server resources you use. When your function is running, that's the only time you are paying for that and it's very cost-efficient.

• Auto-scalable: Cloud providers automatically add server capacity when you need it and then take it away when you don’t, you don’t have to worry about maintaining and scaling servers to fit the evolving needs of your website or application.

• Invest more time in development: Since you are not responsible for any of the management and deployment of any underlying infrastructure, you can build your apps faster.

• High Availability: Cloud providers take care of all the fault tolerance and make sure that your app is always up and running.

🎯 Drawbacks of Serverless

• Timeouts: These are basically stateless containers, they run for a little bit of time and are deleted afterwards. So if your execution code does not finish in that time, your app could fail.

• Debugging: It is generally more challenging to debug serverless code.

• Not handling Stateful applications: Serverless is not a good choice when it comes to stateful applications. A stateless application means that every transaction is performed as if it were being done for the very first time. There is no previously stored information used for the current transaction.

Now enough of the introduction!! Let's move to the code part.

🎯 Create a Serverless Function on Vercel

Vercel is a cloud platform for static frontends and serverless functions.

🔍 Step 1: Install Vercel CLI

npm i -g vercel@latest

You should have the latest version of Vercel CLI installed to proceed further.

🔍 Step 2: Create a Next.js project

npx create-next-app@latest --typescript

This will create a next.js project for you with a single API Route. This is where we create our Serverless Function.

🔍 Step 3: Create a Serverless Function

Inside pages/api/handler.ts file write your function:

import { NextApiRequest, NextApiResponse } from "next";

export default function handler(
  request: NextApiRequest,
  response: NextApiResponse
) {
  response.status(200).json({
    body: 'This is my Serverless Function',
    query: request.query,
  });
}

Use Vercel CLI to start a local development server:

vercel dev

Now navigate to the http://localhost:3000/api/handler to see the response:

🔍 Step 4: Deploy a Serverless Function

You can deploy your Serverless Function to Vercel's global Edge Network by running the following command from your terminal:

vercel deploy

The Serverless Function can then be accessed by navigating to the URL provided in the terminal.

Now if you open the URL provided in the terminal, you'll see your serverless function live on production.

🔍 Step 5: Check Logs

You can view all the details of your project on the Vercel web dashboard.

You can now use this as an API endpoint in your frontend application and trigger this function to execute your business logic when any event occurs from your application.

🎯 Resources

• Vercel Documentation

• Serverless Function Overview

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together. LinkedIn Twitter Instagram

🎯 Minikube

• Open source tool

• One node kubernetes cluster that runs in a virtual box.

• One node cluster where the master and worker processes both run on one node

• It has docker container runtime pre-installed.

• It runs on your machine using a virtual box or some other hypervisor. So minikube will create a virtual box on your laptop and the node will run inside that virtual box.

🎯 Kubectl

• It provides a way to interact with the cluster, to create a pod or another K8s component.

• kubectl is a command line tool for the K8s cluster.

🎯 Local Setup

🧩 1. Install hypervisor

Minikube needs virtualization or hypervisor so first install it.

brew install hyperkit

🧩 2. Install Minikube

brew install minikube

minikube has kubectl as a dependency, so the above command will install kubectl as well.

🧩 3. Create and start Cluster

Use the following command to start a K8s cluster

minikube start --vm-driver=hyperkit

Minikube needs to be run inside a virtual box so we need to tell Minikube which hypervisor it should use to start the cluster. Therefore in the start command, we mention the hyperkit hypervisor.

🧩 4. Minikube Dashboard

Use the following command to open the minikube dashboard UI in the browser

minikube dashboard

🎯 YAML Configuration File

Every configuration file in K8s has 3 parts:

• Metadata: The first part contains information about the metadata of that component

  

  There is one key called kind mentioned in the configuration file which defines what K8s component we are targeting.

• Status: It will be automatically generated and added by the K8s.

• Specification: where we put every kind of configuration that we want to apply for that component. Attributes of "spec" are specific to the kind of component that we are creating.

  

  Inside Specification, there is another section called Template.

Template

• It has its own "metadata" and "spec" section.

• The configuration mentioned inside the template is applied to a pod

• Template specification specifies which image needs to be used, on which port it should run and its name.

The labels & Selectors

• metadata part contains the label and the specification part contains the selectors.

• In metadata, we give component labels in key-value pairs.

• This label is matched by the selector to create a connection. So this way deployment will know which pods belong to it.

  

🎯 Demo Project

Now that we have enough understanding of the K8s concept, let's deep dive to create a demo project to get a more clear picture.

We will create a demo express application and connect it with the MongoDB database and will see step by step guide on how each K8s component comes into the picture.

🔍 Step 1: Create a MongoDB Deployment

In K8s we do not directly work with the Pods but there is an abstraction layer over a Pod called Deployment with which we will directly work.

In mongo-deployment.yaml file:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: mongodb-deployment
  labels:
    app: mongodb
spec:
  replicas: 1
  selector:
    matchLabels:
      app: mongodb
  template:
    metadata:
      labels:
        app: mongodb
    spec:
      containers:
      - name: mongodb
        image: mongo
        ports:
        - containerPort: 27017
        env:
        - name: MONGO_INITDB_ROOT_USERNAME
          valueFrom:
            secretKeyRef:
              name: mongodb-secret
              key: mongo-root-username
        - name: MONGO_INITDB_ROOT_PASSWORD
          valueFrom: 
            secretKeyRef:
              name: mongodb-secret
              key: mongo-root-password

• In the image, we have specified "mongo", so it will fetch the latest mongo image from the docker hub.

• These require 2 env. variables called MONGO_INITDB_ROOT_USERNAME & MONGO_INITDB_ROOT_PASSWORD . To get these values we will create a Secret from where we will reference that value.

• secretKeyRef.name : specifies the name of the secret (which we have defined in Step 2)

• secretKeyRef.key : specifies the key name which we have declared under the data section in Step 2.

• Please note: Secret must be created before the deployment because this deployment step has dependency over the Secret step.

• Create a deployment using the following command:

    kubectl apply -f mongo-deployment.yaml
  

  

  Use the following command to get all the K8s components:

    kubectl get all
  

kubectl get events

🔍 Step 2: Create Secrets

We need credentials (username or password) to connect to the database.

So we're going to create a Secret that contains the credentials.

In mongo-secret.yaml file:

apiVersion: v1
kind: Secret
metadata:
    name: mongodb-secret
type: Opaque
data:
    mongo-root-username: dXNlcm5hbWU=
    mongo-root-password: cGFzc3dvcmQ=

• Values inside the data are not plain text this should be encrypted in some way. Storing the data in a Secret component doesn't automatically make it secure.

• We can easily generate the base64 encoded for any plain text using the following command:

    echo -n 'plain text' | base64  
  
    // Output: cGxhaW4gdGV4dA==
  

• Secret must be created before the deployment. So let's first create a Secret component using the following command:

    kubectl apply -f mongo-secret.yaml
  

• To get the list of all secrets created:

    kubectl get secret
  

  

🔍 Step 3: Create an Internal service for MongoDB

First, we created a MongoDB pod and to talk to that pod we will need an internal service, which means no external request to that pod is allowed. Only components inside the same cluster can talk to it.

In mongo-service.yaml file:

apiVersion: v1
kind: Service
metadata:
  name: mongodb-service
spec:
  selector:
    app: mongodb
  ports:
    - protocol: TCP
      port: 27017
      targetPort: 27017

• app: mongodb this name should be the same as the label name given in Step 1 to connect to the pod through a label.

• port: service port

• targetPort: containerPort of deployment

    kubectl apply -f mongo-service.yaml
  

  

  

🔍 Step 4: Create an Express deployment

In express-deployment.yaml file:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: mongo-express
  labels:
    app: mongo-express
spec:
  replicas: 1
  selector:
    matchLabels:
      app: mongo-express
  template:
    metadata:
      labels:
        app: mongo-express
    spec:
      containers:
      - name: mongo-express
        image: mongo-express
        ports:
        - containerPort: 8081
        env:
        - name: ME_CONFIG_MONGODB_ADMINUSERNAME
          valueFrom:
            secretKeyRef:
              name: mongodb-secret
              key: mongo-root-username
        - name: ME_CONFIG_MONGODB_ADMINPASSWORD
          valueFrom: 
            secretKeyRef:
              name: mongodb-secret
              key: mongo-root-password
        - name: ME_CONFIG_MONGODB_SERVER
          valueFrom: 
            configMapKeyRef:
              name: mongodb-configmap
              key: database_url

• In the image, we have specified "mongo-express", so it will fetch the latest mongo-express image from the docker hub.

• This image will require a database name to connect for which we will require a MongoDB address or internal service. We will specify the database URL inside config map in Step 5.

• Next, we need credentials for authentication ME_CONFIG_MONGODB_ADMINUSERNAME & ME_CONFIG_MONGODB_ADMINPASSWORD . These are same secrets which we have created in Step 2.

    kubectl apply -f express-deployment.yaml
  

🔍 Step 5: Create Config Map for Express App

First, we will need the database URL of MongoDB, so that our express app can connect to the database.

In Config Map, we'll specify all the centralised & external configuration.

So we will create Config Map that contains the database URL.

In express-configmap.yaml file:

apiVersion: v1
kind: ConfigMap
metadata:
  name: mongodb-configmap
data:
  database_url: mongodb-service

• database_url : it is MongoDB internal service name which we have specify in Step 3 above.

• ConfigMap must already be in the cluster when referencing it in previous step.

    kubectl apply -f express-configmap.yaml
  

  

  

🔍 Step 6: Create an External Service for Express App

We need an external service so that it can be accessed through a browser.

In express-service.yaml file:

apiVersion: v1
kind: Service
metadata:
  name: mongo-express-service
spec:
  selector:
    app: mongo-express
  type: LoadBalancer  
  ports:
    - protocol: TCP
      port: 8081
      targetPort: 8081
      nodePort: 30000

• We have exposed a service port at 8081.

• TargetPort is where the container port is listening.

• To make it external service:

  • add type: LoadBalancer

  • define nodePort where the external IP address is open. This nodePort actually has a range between 30000 - 32767.

      kubectl apply -f express-service.yaml
    

      kubectl get services
    

    

      minikube service mongo-express-service
    

    • This command will assign public IP address to an external service

🎯 Kubectl Basic Commands

✏️ Get Status of K8s Components

• kubectl get nodes : get the status of nodes

• kubectl version: get the latest version

• kubectl get services: get a list of all services

  

  ✏️ Debugging Pods

• kubectl logs [POD_NAME]: shows what the application inside the pod logs.

• kubectl describe pod [POD_NAME]: shows additional information about pods and all the state changes that happen inside the pod.

• kubectl exec -it [POD_NAME] -- bin/bash : start a shell session for containers running in a K8s cluster. It’s a bit like SSH for Kubernetes.

  ✏️ CRUD Operations

• kubectl create deployment [DEPLOYMENT_NAME]: to create a deployment

• kubectl get deployments: to get a list of all deployments

• kubectl edit deployment [DEPLOYMENT_NAME]: to update the deployment

• kubectl delete deployment [DEPLOYMENT_NAME]: to delete deployment

  ✏️ Resource Metrics

• kubectl top pod : Display resource (CPU/memory) usage of pods

• kubectl top node : Display resource (CPU/memory) usage of nodes

  🎯 Wrap Up!!

  That's all for this article. Thank you for your time!! Let's connect to learn and grow together.

  LinkedIn Twitter Instagram

Kubernetes, also known as K8s, is an open-source system for automating the deployment, scaling, and management of containerized applications.

• Open-source container orchestration tool

• Developed by Google

• Helps you manage containerized applications in different deployment environments (like physical machines, virtual machines, or cloud env.)

🔍 The need for a container orchestration tool?

• Trends from monolith to microservices

• Increased usage of containers

• Demand for a proper way of managing thousands of containers

Containers offer the perfect host for small independent applications. After the increased usage of container technologies now managing those multiple containers across multiple environments using scripts and self-made tools can be complex which leads to the need for some container orchestration tool and then Kubernetes comes into the picture.

🔍 What features do K8s offer?

• High Availability or no downtime: application is always accessible by the user.

• Scalability or high Performance (scale out automatically): application loads fast and users have a very high response rate from the application

• Disaster recovery- if infrastructure has some problems like data is lost or the server explodes, a containerized application can be brought back to the latest state after recovery.

🔍 K8s Components

Let's learn about some of the components of K8s:

• Clusters

• Master node & Worker node

• Pods

• Services

• Ingress

• Config map

• Secrets

• Volumes

• Deployment & Replica set

Before jumping over these components directly, let's take a case of some javascript application with a simple database and now let's look at how each component of K8s helps you to deploy our application and what is the role of each of the components.

🎯 Cluster

• K8s lets you deploy containers on a set of nodes called a cluster.

• A cluster is a set of master components that control the system as a whole & a set of worker nodes that run containers.

🎯 Pod

• The smallest unit of the K8s cluster

• It's an abstraction layer over a container and can contain a group of containers

• It creates a running environment or layer on top of the container

• The main reason for this abstraction layer is K8s wants to abstract away the container runtime. So we don't have to directly work with container technology.

• Each Pod is meant to run one application container inside of it. You can also run multiple containers inside one Pod but that's usually the case when there is one main application container and many helpers containers or services that need to be run inside that container.

• Each Pod contains a unique IP address using which they can communicate with each other. This is an internal IP address.

• One important thing about Pod is that they can die very easily and if that happens new Pod is created in its place and a new IP address is assigned to them which may be inconvenient if we are communicating with our database using that IP address because we now have to adjust it every time new Pod restarts. To tackle this problem another component of K8s comes into the picture called Services.

🎯 Services

• It's a static IP address or permanent IP address that can be attached to each Pod.

• A service groups a set of pods together & provides a stable endpoint for them.

• The lifecycle of pods and services is not connected so even if the pod dies, the service and its IP address will stay the same.

  

🎯 Ingress

• Ingress exposes HTTP and HTTPS routes from outside the cluster to services within the cluster.

• The role of Ingress is to maintain the DNS routing configurations.

• This enables you to access your application through a browser. For this, you need to create an external service. External service is a service that opens communication through external sources.

• But we don't want our database to be accessible through public request so for that we will create an internal service.

  

🎯 Config Maps

• Pods communicate with each other using services. For example, our application will have a database endpoint using which we can communicate with our databases but where should we configure this endpoint??

• Config map provides external configuration to your application or some other services that you use and in K8s you just connect it to the Pod so that pod gets the data that configMap contains. So in future, if we change the name of a service or endpoint for that service we just need to update the configMap.

• Configuration may also contain the credentials of the database or any other private information which cannot be stored in a plain text format so for that we will use Secret.

🎯 Secret

• Just like config maps but used to store secret data.

• It's not stored in a plain text format but in a base64 encoded format.

• This may contain things like credentials, passwords, certificates etc. which you don't want other people to have access to.

• We will connect this secret to the pods so that pods can have access to that information.

🎯 Volumes

• We have a database which our application uses and it regenerates some data but if the database pod gets restarted, the data would be lost but we want our data to be persistent for the long term. So to avoid this scenario here comes the role of Volumes.

• It attaches physical storage to a hard drive to your pod and that storage could be either on a local machine meaning the same server node where the pod is running or it could be on the remote storage meaning outside of the K8s cluster maybe cloud storage.

• This is used to overcome the problem of data loss whenever pods get restarted.

• K8s cluster explicitly doesn't manage any data persistence so taking a backup of the data is the responsibility of the user.

🎯 Deployments & Replica Set

Till now our application is running perfectly fine and the user can access it through a browser but what happens if my application pods die or crash or we have to restart the pod because we have built a new container image? This will cause a downtime where a user cannot reach my application. So that is exactly where the advantage of distributed systems and containers comes into the picture.

• Instead of relying on 1 application pod or 1 database pod, we will replicate everything on multiple servers. So we would have another node where a replica or clone of our application would run which will also be connected to the same service.

  Service also acts as a load balancer. It will catch the request and forward it to whichever pod is least busy.

• To create a replica we'll define a blueprint for My-App pod and specify how many replicas of that pod you would like to run. That blueprint is called Deployment.

• In K8s we will not directly work with pods instead we will create deployments where we can specify how many replicas we actually want. You can also scale up or scale down the number of replicas you want.

• In the case of the database pod, we will create its replica also but here is a catch:- We can't replicate a database using a deployment because the database has a state. If we clone or replicate the database they would all need to access the same shared data storage and there you would need some kind of mechanism that manages which pods are currently writing to that storage and which pod is currently reading from that storage to avoid data inconsistencies. This is managed by Stateful Set.

• Deployments for stateLESS Apps.

• Stateful Set for stateFUL Apps or databases.

  

  🔍 Wrap Up!!

  That's all for this article. Thank you for your time!! Let's connect to learn and grow together.

  LinkedIn Twitter Instagram

• Hooks are a new feature addition in React version 16.8 which allows you to use React features without having to write a class.
• Previously you could use state only within class components but with hooks now it is possible to use state without writing a class.
• Hooks don't work inside classes.

🎯 Why Hooks?

• To work with classes you have to understand how this keyword works in javascript. You also need to remember to bind event handlers in class components.
• Classes don't minify very well and make hot reloading very unreliable.
• Hooks help to reuse stateful component logic without changing the component hierarchy.
• Rather than forcing a split based on the lifecycle methods, hooks let you split one component into smaller functions based on what pieces are related.

🎯 Rules of Hooks

• Only call hooks at the "Top Level" of your react functions
• Don't call hooks inside loops, conditions, or nested functions.
• Only call hooks from React functions. Call them from within React functional components and not just any regular javascript function.

Now let's learn about the very first hook- useState hook.

We will try to understand this using a simple example.

In our example, we'll create a simple button that will increment the value of the counter on the onClick event.

🎯 Manage State using Class Component

First, we'll look at how to implement the same using the class component.

• Create a class component
• Create a state variable and initialized it to 0.
• Create a method that is capable of setting this state value.

import React, { Component } from 'react';

class ClassCounter extends Component {

  constructor(props){
    super(props);

    this.state = {
      count: 0
    }
  }

  handleIncrement = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <div>
        <button onClick={this.handleIncrement}>
           Increment Value
        </button>
        <p>{this.state.count}</p>
      </div>
    )
  }
}

export default ClassCounter;

🎯 useState Hook

• useState is a hook that lets you maintain react state to functional components.
• Hooks are just functions so we simply call them.
• This hook accepts an argument defining the initial value of the state property.
• It returns the pair of values. current value of the state property and a method that is capable of updating that state property.

📌 Manage State using Functional Component

Now let's take a look at how to implement the above example using a functional component.

• Create a functional component
• We need a state property initialized to 0.
• We need a method capable of setting that state property value.
• Syntax which we have used below in const [counter, setCounter] = useState(0); is called Array Destructuring
• The variable counter will always contain the current state value and setCounter will accept an argument and set a counter value to that argument.

import React, { useState } from 'react';

export const FunctionalCounter = () => {
  const [counter, setCounter] = useState(0);

  const handleIncrement = () => {
    setCounter(counter + 1);
  }

  return (
    <div>
      <button onClick={handleIncrement}>
         Increment Value
      </button>
      <p>{counter}</p>
    </div>
  )
}

Notice the usage of useState hook in the above code snippet.

• A very first time the component renders a state variable is created and initialized with the default value of 0. The default value is never used on re-renders.
• When you click on the button the setCounter method is called which will add 1 to the current counter value.
• setCounter method will cost the component to re-render.
• After the re-render counter will contain the updated value.

📌 useState with previous state

Now let's take a look at an example where we'll see how to update the state based on the previous state.

Let's say, we want to implement the count value by 5 each time user clicks on the button.

Let's write a code for the same.

import React, { useState } from 'react';

export const FunctionalCounterWithPreviousState = () => {
  const [counter, setCounter] = useState(0);

  const handleIncrement = () => {
    for(let i = 0; i < 5; i++){
      setCounter(counter + 1);
    }
  }

  return (
    <div>
      <button onClick={handleIncrement}>
          Increment Value
      </button>
      <p>{counter}</p>
    </div>
  )
}

When we'll run the above code snippet you will notice that it will not work as expected. But Why??

Here comes the concept of Batch Rendering.

✏️ Batch Rendering

React may batch multiple setState() calls into a single update for performance.

The main idea is that no matter how many setState calls you make inside a React event handler or synchronous lifecycle method, it will be batched into a single update. That is only one single re-render will eventually happen.

This functionality is relevant for both hooks and regular class components, and its purpose is to prevent unnecessary rendering.

As React updates the state Asynchronously, you should not rely on their values for calculating the next state.

So what other way we can use to achieve our target? Now we'll use the second form of the setCounter function.

Basically, instead of passing in a value of the new state variable, we pass in the function that has access to the old state value.

So now we'll update our code as follows:

import React, { useState } from 'react';

export const FunctionalCounterWithPreviousState = () => {
  const [counter, setCounter] = useState(0);

  const handleIncrement = () => {
    for(let i = 0; i < 5; i++){

       // Update the value based on the previous value
      setCounter(prevCounter => prevCounter + 1);
    }
  }

  return (
    <div>
      <button onClick={handleIncrement}>Increment Value</button>
      <p>{counter}</p>
    </div>
  )
}

Now it will work as expected.

📌 useState with Objects

Now we will use an object as a state variable with the useState hook. So instead of storing a variable, we will work with objects this time.

In the below example, we will initialize the state variable with an object with firstName & lastName as a key.

Let's take a look at the code first.

import React, { useState } from 'react';

const HooksWithObject = () => {
  const [name, setName] = useState({firstName: '', lastName: ''});

  return(
    <div>
      <div>
        <label>Enter FirstName: </label>
        <input 
          type='text' 
          value={name.firstName} 
          onChange={e => setName({firstName: e.target.value})} 
        />
      </div>
      <div>
      <label>Enter LastName: </label>
        <input 
          type='text' 
          value={name.lastName} 
          onChange={e => setName({lastName: e.target.value})} 
        />
      </div>
      <p>firstName: {name.firstName}</p>
      <p>lastName: {name.lastName}</p>
    </div>

  )
}

export default HooksWithObject;

In the above code snippet, there are input fields that will update the values of firstName & lastName as a user types in the input fields.

As you notice above, whenever a user updates the lastName input field, the firstName input field gets reset to an empty string and removed from the state variable

• This is happening because useState does not automatically merge and update the object.

• This is the key difference between the setState in Class Component and useState in the functional Component. setState will merge the state whereas useState hook setter function will not merge the state. You can use spread operator to handle this situation.

So now update our code accordingly.

import React, { useState } from 'react';

const HooksWithObject = () => {
  const [name, setName] = useState({firstName: '', lastName: ''});

  return(
    <div>
      <div>
        <label>Enter FirstName: </label>
        <input 
          type='text' 
          value={name.firstName} 
          onChange={e => setName({...name, firstName: e.target.value})} 
        />
      </div>
      <div>
      <label>Enter LastName: </label>
        <input 
          type='text' 
          value={name.lastName} 
          onChange={e => setName({...name, lastName: e.target.value})} 
        />
      </div>
      <p>firstName: {name.firstName}</p>
      <p>lastName: {name.lastName}</p>
    </div>

  )
}

export default HooksWithObject;

In the above code snippet, while setting the name variable on onChange event, we'll first copy every property in the name object and then just overwrite the firstName field with a different value.

Now when we'll check our result. It will work as expected.

🎯 Summary

• The useState hook allows you to maintain a state inside functional components.
• In classes, the state is always an object. With the useState hook, the state doesn't have to be an object. It can be an array, number, boolean or string, etc.
• The useState hook returns an array with 2 elements. The first element is the current value of the state and the second element is a state setter function.
• State setter function will cause the component to re-render.
• In case your new state value depends on the previous state value you can pass a function to the setter function. The setter function will receive the previous state as its argument.
• When dealing with objects or arrays, always make sure to spread your state variable and then call the setter function.

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together.

LinkedIn Twitter Instagram

In this article, we'll discuss how to set up Node JS and Gatsby to pull the data, transform it into usable nodes, and auto-generate pages based on templates.

🔍 Data from Yaml File

We can store our data in a YAML file and then it acts as one of our data sources.

We'll store all our data sources inside the content folder.

In content/records.yaml file:

- name: Gatsby
  description: Static Site Generator

- name: HTML
  description: Static Website

- name: Node JS
  description: Server side rendering

🔍 Source Plugin

• We know gatsby can work with multiple data sources and it can add them all to our graphQL layer, however, to do this for each source that we use we need to install and register a source plugin, and that way gatsby knows how to connect to that data source.
• Source plugins are all registered inside the gatsby config file inside the plugin array.
• plugins also need to be installed into our project using npm, so gatsby can find them as well.

📍gatsby-source-filesystem Plugin

• A gatsby source plugin for sourcing data into your gatsby application from your local filesystem.
• Install it using npm install gatsby-source-filesystem.
• Register them inside the plugins array in the gatsby-config.js file.

module.exports = {
  siteMetadata: {
    title: 'Learn Gatsby',
    description: 'step-by-step guide to learn gatsby',
    author: 'Anuradha Aggarwal',
    lang: 'en',
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `records`,
        path: `${__dirname}/content/`
      }
    },
  ]
}

In the above code snippet, we'll provide the path of the directory which contains our yaml file.

• graphQL treats each file as an individual node. Now we can check in graphiQL that it will create a separate node in the graphQL layer.

• We can have multiple instances of the filesystem source plugin.
• For every different folder that we have, we need a different instance in the gatsby-config.js file.

Now let's see how Gatsby transforms this YAML file.

🔍 Transformer Plugins

We want gatsby to know that this file exists and we want you to process it as a YAML file so that we get a JSON object in return we can parse through GraphQL. That's done using the gatsby-transformer-yaml plugin.

• There are transformer plugins present for almost any type of data.
• The transformer plugin takes a data source & transforms it into something easier to use in our components that we can query in our graphql layer.
• Firstly, install transformer plugin for yaml file using npm install gatsby-transformer-yaml
• Now in gatsby-config.js file, register this plugin.

  plugins: [
    `gatsby-transformer-yaml`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `records`,
        path: `${__dirname}/content/`
      }
    },
  ]
  

• Now in graphiQL, we'll have a new type of content, which contains nodes related to our yaml file as well. Now if you run graphQL query you'll get the exact content that we have stored in our yaml file.

With the help of this plugin, we have full access to the data and we can use it to display on the front-end.

Once gatsby is able to access the data from the YAML file through GraphQL we can work with the data the same way as we have done in the previous post using graphQL queries.

This is one example to show how gatsby works with the data present in a different format. But what if we have data and we want to transform it into a separate page. Most common use case of gatsby is blogging platform.

Now let's see how gatsby works with Markdown files.

🔍Generate Pages from Markdown File

We'll follow the following directory structure for the below code:

📦gatsby-project
 ┣ 📂content
 ┃ ┣ 📜blog.mdx
 ┣ 📂public
 ┣ 📂src
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📜Header.js
 ┃ ┃ ┗ 📜Layout.js
 ┃ ┣ 📂pages
 ┃ ┃ ┣ 📜about.js
 ┃ ┃ ┗ 📜index.js
 ┃ ┣ 📂styles
 ┃ ┗ 📂templates
 ┃ ┃ ┗ 📜Blog.js
 ┣ 📜gatsby-config.js
 ┣ 📜gatsby-node.js
 ┗ 📜package.json

📍Step 1: Create Markdown file

In the first step, we'll create a markdown file inside the content folder.

In content/blog.mdx file, create your markdown file

---
title: My first blog
description: This file is to show how to use markdown in the gatsby site
---

## What is Lorem Ipsum?
Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Leeriest sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Lauds PageMaker including versions of Lorem Ipsum.

## Why do we use it?
It is a long-established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem Ipsum will uncover many websites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humor and the like)

As you notice in the above file we have some data inside triple dashes. This data is known as frontmatter

🪄 Frontmatter

Frontmatter in markdown file represents metadata or extra information about that particular file. It is denoted by the triple dashes at the start and end of the block.

📍Step 2: Register markdown content using source plugin

Now before we'll dynamically pump this data inside our graphQL layer, we need to inform gatsby that these markdown files are present here which will act as one of our data sources. So to do this we will register them inside the gatsby-config.js file using the source plugin as we have done before for yaml files.

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `blogs`,
        path: `${__dirname}/content/`
      }
    }
  ]
}

📍Step 3: Use Transformer plugin for Markdown

Transformer plugins in gatsby take a data source and transform it into something easier to use in our components that we can query in our graphQL layer.

For the markdown file we'll use the gatsby-plugin-mdx plugin:

• First, install it using npm install gatsby-plugin-mdx @mdx-js/mdx@v1 @mdx-js/react@v1
• Register it inside gatsby-config.js file, in plugin array.

  module.exports = {
     plugins: [
        `gatsby-plugin-mdx`
     ]
  }
  

By default, only files with the .mdx file extension are treated as MDX when using the gatsby-source-filesystem. To use .md or other file extensions, you can define an array of file extensions in the gatsby-plugin-mdx section of your gatsby-config.js.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
        defaultLayouts: {
          default: require.resolve("./src/templates/Blog.js"),
        },
      },
    },
  ],
}

Now when we check on graphiQL, it will show our markdown file content embed into the graphQL layer.

As shown in the above image, this plugin comes with the additional feature which gives you the ability to query out tableOfContent or frontmatter for each markdown file which you can further use in your site.

📍Step 4: Create a template for Markdown

Inside the src folder, create a new folder called templates, this will store the template required to display the content of our markdown file.

In src/templates/Blog.js file:

import { MDXRenderer } from "gatsby-plugin-mdx";
import React from "react";
import Layout from "../components/Layout";

const Blog = ({ pageContext }) => {
  const { blogDescription, blogTitle, body } = pageContext;
  return (
    <div>
      <Layout>
        <h1>{blogTitle}</h1>
        <p>{blogDescription}</p>
        <br />
        <MDXRenderer>{body}</MDXRenderer>
      </Layout>
    </div>
  );
};

export default Blog;

pageContext prop has its special meaning. It gives you access to all the required information of your markdown file.

🪄 pageContext

• Using the pageContext props in the template component can come with its performance advantages, of getting in all the data you need at build time; from the createPages API.
• This removes the need to have a GraphQL query in the template component.

🪄 MDXRenderer

• MDXRenderer is a React component that takes compiled MDX content and renders it. You will need to use this if your MDX content is coming from a GraphQL page query or StaticQuery.

📍Step 5: Use gatsby createPage API

We want gatsby to automatically generate pages for each markdown file via NodeJS.

To do this we'll use the file called gatsby-node.js.

• gatsby-node.js file will run at the build time in a node environment so we can run certain functions inside this file to do things like fetch data & then generate pages with that data based on a template file that we have created earlier.

To create a page dynamically we'll use the gatsby createPage API.

🪄 createPage API

Create pages dynamically. This extension point is called only after the initial sourcing and transformation of nodes plus creation of the GraphQL schema are complete so you can query your data in order to create pages.

In gatsby-node.js file:

exports.createPages = async ({ actions, graphql, reporter }) => {
  const result = await graphql(`
    query {
      allMdx {
        nodes {
          body
          slug
          frontmatter {
            title
            description
          }
        }
      }
    }
  `);

  if (result.errors) {
    reporter.panic("failed to create posts ", result.errors);
  }

  const pages = result.data.allMdx.nodes;

  // The context object **is** supplied to MDX templates through the pageContext prop.

  pages.forEach((page) => {
    actions.createPage({
      path: page.slug,
      component: require.resolve("./src/templates/Blog.js"),
      context: {
        pathSlug: page.slug,
        body: page.body,
        blogTitle: page.frontmatter.title,
        blogDescription: page.frontmatter.description
      },
    });
  });
};

In the above code snippet, first we'll make an graphQL query and use the gatsby createPage API to create new page. Inside this we can define:

• component: It refers to the template you want to use for your markdown file.
• context: this object contains all the data you want to pass to the template as a pageContext prop.

Now if you navigate to http://localhost:8000/blog it will show your newly created page from markdown:

Finally we have created our first dynamic page 🎉🎉. But there are lot more we can do with the markdown files. Let's see more cool features of MDX.

📍More about MDX

🪄 What is MDX?

According to Gatsby's Official documentation:

MDX is a markdown for the component era. It lets you write JSX embedded inside markdown. It’s a great combination because it allows you to use markdown’s often terse syntax (such as # heading) for the little things and JSX for more advanced components.

• MDX allows you to use React components alongside Markdown.
• You can also import and reuse your own React components and even other MDX documents.

In your markdown file:

--
title: Example to show how to use React Components inside Markdown
---
import { CustomHeading } from "./components/Headings";

## You can import your own components.
<CustomHeading>This will show my custom heading component</CustomHeading>

To avoid having to import the same component inside of every MDX document, you can add components to an MDXProvider to make them globally available in MDX pages. This pattern is sometimes referred to as shortcodes.

🪄 MDXProvider

• MDXProvider is a React component that allows you to replace the rendering of tags in MDX content.
• You can also expose any custom component to every mdx file using MDXProvider

To use MDXProvider just make changes in your src/components/Layout.js file:

import React from 'react';
import Header from './Header';
import { MDXProvider } from "@mdx-js/react"

export default function Layout({ children }) {

  const CustomHeading = props => <h2 style={{ color: "green" }} {...props} />

  const components = {
    h2: CustomHeading,
  }

  return (
    <div className="layout">
      <Header />
      <div className="content">
        <h1>{title}</h1>
        <p>{description}</p>
        <hr />
        {/* content for each page */}
        <MDXProvider components={components}>{children}</MDXProvider>
      </div>
    </div>
  )
}

Using this, now all the H2 heading inside the mdx file will be updated with our custom heading component.

🔍 Other Useful Resources

• MDXProvider
• Other ways to create dynamic Pages
• Gatsby Node APIs

🔍 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together.

LinkedIn Twitter Instagram

In the previous article, we have learned the basics of Gatsby, let's now learn about the relation of Gatsby and GraphQL.

🔍 What is GraphQL?

• A query language used to query data
• Alternative to using a REST APIs
• It is one of the ways that you can import data into your Gatsby components.
• In GraphQL queries, we do not only specify what we want, but we also specify how we want it structured in return.

If you want to learn more about GraphQL, visit here

🔍 Why does Gatsby use GraphQL?

One of the main features of Gatsby is we can use different data sources for our website e.g. (WordPress, Shopify, Firebase, file System) and Gatsby provides the mechanism using which we can query it and access it the same way from our website using GraphQL queries.

Gatsby basically mesh together all the data sources into a unified GraphQL layer which is also known as Content Mesh.

🔍 GraphiQL

There is a tool provided by Gatsby that makes GraphQL much easier to understand and work with. If you run gatsby develop, you may have noticed that there are actually two URLs to the local server once the process is complete.

• http://localhost:8000/:- It goes to the live site.
• http://localhost:8000/___graphql:- It goes to the GraphiQL, an in-browser IDE, to explore your site's data and schema.

On this GraphiQL interface we can do the following:

• You can explore your entire GraphQL setup on your local server.
• We can craft custom requests and can directly see their results on the right-hand side.

• GraphQL will return JSON objects which later you can parse like any other object in Javascript.
• Use Code Explorer to know how to use these queries inside your code.

• Code Explorer provides an option to see how to use different types of queries in your code.

🔍 Types of GraphQL Queries

There are two different types of GraphQL queries which are used in two different circumstances.

• Page Query
• Static Query

✏️ Page Query

• A page query sits separately from the main export component. Gatsby is going to find this query and it will return the data property inside our component as a prop.
• We can use query variables, which means we can make its query self-dynamic through passing variables to it.
• It only works for pages. We cannot use page queries inside a component.

✏️ Static Query

• It sits inside the component itself.
• It cannot receive a variable as the name static suggests.
• useStaticQuery is a React hook available to use static query as a separate entity inside our components.

Now let's write some code to understand it better!!

🔍 Write GraphQL Query

Now to see how graphQL queries work, let's add some data.

✏️ Add Site Metadata

In the gatsby-config.js file, we'll store our site Metadata.

module.exports = {
  siteMetadata: {
    title: 'Learn Gatsby',
    description: 'step-by-step guide to learn gatsby',
    author: 'Anuradha Aggarwal',
    lang: 'en',
  },
}

We'll look at how to use this metadata via graphQL query in the later part.

From the previous post, we have the Layout.js file in the src/components folder.

import React from 'react';
import Header from './Header';

export default function Layout({ children }) {
  return (
    <div className="layout">
      <Header />
      <div className="content">
        <h1>Welcome to our Gatsby Site :)</h1>
        <p>Gatsby is known as static site generator !!!</p>
        <hr />
        {/* content for each page */}
        {children}
      </div>
    </div>  )
}

And about.js in the src/pages folder.

import React from 'react';
import Layout from '../components/Layout';

export default function About() {
  return (
    <Layout>
      <div>
        <h3>About page</h3>
        <p>description here</p>
      </div>
    </Layout>
  )
}

Now it's time to write some queries.

✏️ Write Page Query

As we know Page Query only works for pages, let's write some inside our about.js file.

Step 1: Import GraphQL

import { graphql } from "gatsby";

Step 2: Query SiteMetadata

export const query = graphql`
  {
    site {
      siteMetadata {
        description
        title
      }
    }
  }
`

Gatsby is going to find this query and it will return the data property inside our component as a prop.

Step 3: Use this query data inside your component

export default function About({ data }) {
  const { title, description } = data.site.siteMetadata;
  return (
    <Layout>
      <div>
        <p>{title}</p>
        <p>{description}</p>
      </div>
    </Layout>
  )
}

Now at the end, our about.js file will look like this:

import React from 'react';
import Layout from '../components/Layout';
import { graphql } from "gatsby";

export default function About({ data }) {
  const { title, description } = data.site.siteMetadata;
  return (
    <Layout>
      <div>
        <p>{title}</p>
        <p>{description}</p>
      </div>
    </Layout>
  )
}

export const query = graphql`
  {
    site {
      siteMetadata {
        description
        title
      }
    }
  }
`

✏️ Write Static Query

Now let's see how to use Static Query.

In Layout.js file:

Step 1: Import GraphQL & useStaticQuery hook

import { graphql, useStaticQuery } from 'gatsby';

Step 2: Query SiteMetadata

const data = useStaticQuery(graphql`
    query SiteInfos {
      site {
        siteMetadata {
          description
          title
        }
      }
    }
  `)

Step 3: Use data in your component

In the end, the Layout.js file will look like this:

import React from 'react';
import Header from './Header';

export default function Layout({ children }) {

  const data = useStaticQuery(graphql`
    query SiteInfos {
      site {
        siteMetadata {
          description
          title
        }
      }
    }
  `)

  const { title, description } = data.site.siteMetadata

  return (
    <div className="layout">
      <Header />
      <div className="content">
        <h1>{title}</h1>
        <p>{description}</p>
        <hr />
        {/* content for each page */}
        {children}
      </div>
    </div>
  )
}

As you see GraphQL is almost the same in both cases, it differs in how to use it inside or outside the components which varies on your use case.

🔍 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together.

LinkedIn Twitter Instagram

Static site generator:- A tool that takes code & content and creates static documents to be hosted and served from the web.

🎯 Content Mesh

• Gatsby uses many different data sources for your website e.g. (WordPress, Shopify, Firebase, file System).
• Gatsby combines all data sources into a unified GraphQL layer by using a source plugin, which means no matter where your data is loaded from, we can query it and access it the same way from our website using GraphQL queries.
• This ability of Gatsby is known as Content Mesh: Different data sources can mesh together into a single GraphQL layer.

🎯 Gatsby CLI

gatsby new <site-name>:- lets you create a new gatsby site.

gatsby develop:- is one of the scripts available in Gatsby CLI and it does two things:-

• It runs the build process to generate the static site and then puts that static site into a new folder called public. It spins up a local dev server & connects you to that public folder.
• Looks for any changes in the files and automatically re-builds the development bundle. You can look at the changes directly to the browser immediately.

One of the cool features of gatsby is you can access your dev environment on other devices on the same network using the command gatsby develop -H 0.0.0.0. It provides you the IP address which you can visit on your other devices. This will be very helpful for mobile testing and testing for different screens.

Sometimes you need to make changes in the build process or some config changes in that case you need to stop the development server.

gatsby clean:- Used to delete the public folder and cache anytime. It clears what was generated during the build process. It doesn't delete any of your changes, it only wipes off the stuff that was generated to preview in the browser.

gatsby build:- compile your application and make it ready for deployment.

You can explore more gatsby-cli commands here.

🎯 Initial Setup

• Install Node JS
• Install Git
• Install gatsby-cli using the command npm install -g gatsby-cli

You can use Gatsby Starter Library, this is a pre-configured package of a Gatsby setup that has either a very basic site or a fully built out site that you can configure to fit your needs.

For now, we'll use the gatsby-starter-hello-world starter package and install it using:

npx gatsby new gatsby-starter-hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

Run the development server using gatsby develop.

🎯 Folder Structure

This is what our folder structure looks like at the end of the project:

📦gatsby-project
 ┣ 📂.cache
 ┣ 📂node_modules
 ┣ 📂public
 ┣ 📂src
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📜Layout.js
 ┃ ┣ 📂images
 ┃ ┣ 📂pages
 ┃ ┃ ┣ 📜404.js
 ┃ ┃ ┣ 📜about.js
 ┃ ┃ ┗ 📜index.js
 ┃ ┣ 📂styles
 ┃ ┗ 📂templates
 ┣ 📂content
 ┃ ┣ 📜about.md
 ┣ 📂static
 ┣ 📜gatsby-browser.js
 ┣ 📜gatsby-config.js
 ┣ 📜gatsby-node.js
 ┣ 📜gatsby-ssr.js
 ┣ 📜package-lock.json
 ┗ 📜package.json

The above diagram represents the folder structure of the simple gatsby project. Let's go through each one of them.

package.json:- This is the core file of the entire build process. In this file, you can see all the dependencies that are added to your project and scripts.

public folder:- When we run gatsby by using the gatsby develop command, it automatically generates the public folder which contains all of the stuff that is being served to the browser and when we deploy our application, this will be the folder that you'll deploy as well after we've run the gatsby build command, As all of the build files will reside in this folder.

📌 Gatsby.js files

gatsby-ssr.js:- SSR stands for Server-Side-Rendering. SSR is where the server renders a web page, then sends it to the browser, instead of letting the browser render the web page. This file will let you alter the content of static HTML files while they are being rendered by the server.

gatsby-node.js:- File that we run in build time in a node environment. You can use it to dynamically create pages, add Graphql Nodes, or respond to events during the build lifecycle.

gatsby-config.js:- This file basically exports an object where we can add plug-in information or site metadata.

gatsby-browser.js:- file where you can respond to events within the browser and can wrap your site in additional components. Inside this file, you can specify any global CSS or fonts you need to import and made them available everywhere in your project.

📌 Pages & Routes

src/pages folder:

• Whenever you create a new file of React component inside the src/pages folder, gatsby looks at the file name and it creates a route to match that file name.
• We can make sub-directories by making a folder inside the src/pages folder.
• Whenever we create index.js file inside any folder, then gatsby creates a base route for that directory.
• To create a custom 404 page just create a component in your site directory at src/pages/404.js.
• The custom 404 page is only visible when we deploy our application and not in developer's mode.

src/components folder:

• All the components you create to pull into pages or templates or use anywhere else, go under the component folder.

📌 Static Assets

static folder:

• Anything you want to be made available as a static asset to the browser can go inside the static folder.
• Gatsby copied all the static assets to the public folder so that it is accessible by the browser.
• Disadvantages: There are some disadvantages to using static assets: Files that are saved as static assets are taken out from the whole gatsby processing workflow. So they are not processed, minimized, or optimized for the web in any way.

📌 Add Styles

src/styles folder:

• We can have a global style common to all the components.
• CSS Modules: Defines a way to scope styles to specific components or pages. So we can create a module, apply it to a specific react component, and as a result, that module will be scoped to that particular component.

📌 Dynamic Pages

src/templates folder:

• We can also use Gatsby to automatically generate pages for us. The templates for that pages will go under the src/templates folder.

📌 Data Sources

content folder:

• There's also a convention where if you create external content, like markdown files that will turn into pages through a template, you place them in a content folder that sits on the root.
• It does not sit inside the src folder because it's not part of the source code, it's a data source.

🎯 Create Static Pages

Now let's create some static pages.

To create a layout of our site, we make a reusable component:

The basic layout will look like this : Header -> Pages Content -> Footer

Create a new file Header.js inside src/components folder.

In the Header.js file:

import React from 'react';
import { Link } from 'gatsby';

export default function Header() {

  return (
    <nav>
      <ul className="links">
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/projects">Projects</Link>
      </ul>
    </nav>
  )
}

link component in React means that all the routing is handled in the browser only & we don't send an extra request for new pages to the server.

Create a new file Layout.js inside src/components folder.

In the Layout.js file:

import React from 'react';
import Header from './Header';

export default function Layout({ children }) {
  return (
    <div className="layout">
      <Header />
      <div className="content">
        <h1>Welcome to our Gatsby Site :)</h1>
        <p>Gatsby is known as static site generator !!!</p>
        <hr />
        {/* content for each page */}
        {children}
      </div>
    </div>  )
}

In React, we can access the content inside of a component through the "children" prop.

Now we can use this component inside our pages. So let's create a new page about.js inside the pages folder.

In the about.js file:

import React from 'react';
import Layout from '../components/Layout';

export default function About() {
  return (
    <Layout>
      <div>
        <h3>About page</h3>
        <p>description here</p>
      </div>
    </Layout>
  )
}

Now if you go to http://localhost:8000/about, this will look like:

There are lot more cool features of Gatsby which we'll explore in the next article.

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together.

LinkedIn Twitter Instagram

• Static Website
• Single Page Applications
• Server-Side Rendering (SSR)
• Static Site Generator

🎯 Static Website

• Just be made of HTML pages and could also include CSS and javascript
• We have to upload HTML pages to CDN to host them on the web and whenever we request those pages in a browser it would return them to us.
• So for every new page, we made a new request to the server.

✅ Advantages

• Good for SEO
• Easy to learn

❌ Disadvantages

• Hard to update/maintain pages (re-writing a lot of the same code on every page).
• New request to the server is made for every page which eventually slows down the website.
• Generally does not contain dynamic data.

🎯 Single Page Application

• Based on the concept of Client-Side Rendering.
• A single-page application is an app that works inside a browser.
• SPAs are structured as a single HTML page that has no preloaded content.
• Content is loaded via Javascript files for the entire application and housed within a single HTML page.
• Only a single server request was made for the initial empty HTML page.
• Everything else (routing, data) is handled by the SPA in the browser.
• Typical React/ Vue applications come under this category.

This type of website basically handles navigation in-page, without loading new pages via HTTP. A SPA website usually loads once, & after that manages all links & forms submission with JS through AJAX request in the background.

✅ Advantages

• There is no extra request to the server for other pages which makes the website bit faster.
• Since SPAs are component-driven so it is easy to update.

❌ Disadvantages

• It is not good for SEO because of load time & the initial request is for a blank HTML page.

🎯 Server-Side Rendering

• HTML pages are built on the server-side after every page request.
• Server gets the data from various sources like databases, aggregates them into template files, and then sends the resulting HTML file back to the browser.
• PHP or Nodejs with templating engines like EJS, jade, hbs comes under this category.

✅ Advantages

• Good for SEO as we get content-rich HTML back from the server on each request.
• Easy to update

❌ Disadvantages

• New request to the server is made for every page.
• Server can take time getting data from various sources & rendering pages that slow down a website a little bit.

🎯 Static Site Generator

• Process that takes templates, components, and data and then generates static HTML pages based on these things not on the server but at build time before we even deploy the application to the web.
• Gatsby with React can be used for Static-Site Generator. Other examples are Next.js or Nuxt.js.
• Inside a Gatsby run a build command on our computer, It takes all of our React components, fetches any data that it needs and combines them, and then generates a static HTML file for each page that we have along with the Javascript bundle too.
• Then, we just deploy all of those HTML pages & Javascript to a CDN to host, so it becomes a bit like a static site at this point where each page has its own ready-made html file.
• So, once we deployed this we'd maybe request one of these pages from the browser and the server would send it right back pretty quickly since there is no Server-side rendering involved. It's all pre-rendered HTML

• Once we have the page in the browser, the javascript bundle in that HTML page (also generated by gatsby) would kick in and the website would behave much like a Single Page Application.

• Routing is handled in the browser which makes the website really quick and no extra requests for other pages are sent to the server.

✅ Advantages

• Better SEO, because our initial request for a page sends back a content-rich pre-rendered HTML.
• Easy to update
• Faster, as no extra request is made to the server.
• Can handle as many different data sources.

❌ Disadvantages

• High build time

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together.

LinkedIn Twitter Instagram

🎯 Steps involved in HTML page rendering:

1. Construction of DOM
2. Construction of CSSOM
3. Construction of Render tree
4. Layout Phase
5. Painting Phase

🎯 Construction of DOM

• Browser receives an HTML document from the server in thebinary stream format, which is basically a text file with a response header Content-Type = text/html; charset=UTF-8.

• When the browser reads the HTML document, whenever it encounters an HTML element, it creates a JS object called a Node. Eventually, all html elements will be converted to a Node.

• After the browser has created nodes from the HTML document, it has to create a "tree-like" structure of these node objects.

Document Object Model is a high-level Web API provided by the browser to efficiently render a webpage & expose it publically for the developers to dynamically manipulate DOM elements for various purposes.

🎯 Construction of CSSOM

• After constructing the DOM, the browser reads CSS from all the sources & constructs a CSSOM (CSS Object Model) - a tree-like structure.

• Each node in this tree contains CSS-style information that will be copied to the DOM element it targets.

• Most of the browser comes with their own stylesheet which is called user-agent stylesheets. It is a default stylesheet used by web browsers. in the absence of any CSS applied, the browser still has to render the content somehow, and the browser uses the user-agent stylesheet for that.

🎯 Construction of Render Tree

• DOM & CSSOM are combined together to form a Render tree that contains the nodes which have to be displayed on the page.

• From the root of the DOM tree, each visible node is traversed and a respective CSSOM rule is applied. Finally, it gives the render tree containing visible nodes with content and styling.

• It is a low-level representation of what will eventually get printed on the screen, it won't contain nodes that do not hold any area in the pixel matrix (like head, meta, link tags).

As you notice above, nodes that contain display: none CSS properties are not part of the render tree.

🎯 Layout Phase

• This phase can be said as a geometry phase, where we calculate the geometry of the nodes.

• In the layout phase, the exact position of the nodes and their size respective to the view-port of the browser is computed. In this way, a box model is generated which knows the exact positions and size. This process is also known as layout or reflow.

• Box model generated in Layout phase:

🎯 Painting Phase

• As we know the visible nodes, their styling, & their geometry, now all this information is used to render the nodes from the render tree to actual pixels on the screen. This process is referred to as Painting. It uses the UI backend layer.

🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together.

LinkedIn Twitter Instagram

📌 DOM Interactions

We can use typescript to interact with the DOM. Working with DOM in typescript is as similar as in javascript. We can still use the same query methods, event listeners & we can still access the same properties of the DOM element. But there are a few key differences to be aware of.

Typescript automatically contains special types for every DOM element. Let's look at the example:

In the above example, typescript assigns special types to the variable based on the DOM element it signifies. This means whenever we use buttonTag variable, typescript knows all of the properties and methods associated with that type.

But what if we access the element using className or ID???

Now in this case, when we hover over the variable it says it is of type Element and do not point out to any specific HTML Element because the class can be applied to any different element in the HTML page, so typescript is not able to recognize its exact type.

So for this, we can use something known as Type Assertions.

📌 Type Assertions

Type assertion allows you to set the type of a value and tell the compiler not to infer it.

So in our case, we can use type assertions using the keyword as to indicate a more specific type:

const header = document.querySelector('.mainHeader') as HTMLDivElement;

Now instead of storing it as Element type, it uses HTMLDivElement type.

• Type assertions are removed by the compiler and won’t affect the runtime behavior of your code.

There is one more method to use Type Assertions using angle-bracket syntax:

const header = <HTMLDivElement>document.querySelector('.mainHeader');

📌 Tuples

A tuple type is another sort of Array type that knows exactly how many elements it contains, and exactly which types it contains at specific positions.

Tuple is another built-in type that is a little bit like an array but with one major difference. In tuple, the types of data in each position are fixed once it's been initialized.

Let's dive into an example for a better understanding that how tuple is different from Array:

In Arrays:

let data = ['javascript', 100];

data[0] = 20;    //Correct
data[1] = 'html';   //Correct

data[0] = true;  //Error: Type 'boolean' is not assignable to type 'string | number'.

As you can see in the above code snippet, data variable can have a mixed type of string | number. And we could reset the first position from type string to number. Which is OK in the case of Arrays. Any position in the above array can be of type string or number.

In Tuples:

//declare what type we expect to be in each position
let data : [string, number];

data[0] = 'javascript';  //Correct
data[1] = 100;  //Correct

data[0] = 20 //Error: Type 'number' is not assignable to type 'string'.

data[2] = 30; //Error: Tuple type '[string, number]' of length '2' has no element at index '2'.

In tuples, once we defined a certain position being a certain type then we cannot change that type in that position.

📌 Wrap Up!!

That's all for this article. We'll explore more new features of typescript in the next post. Thank you for your time!! Let's connect to learn and grow together.

LinkedIn Twitter Instagram

📌 Introduction

• Typescript is superset of Javascript which means it is an extension of Javascript, adding new features and syntax on top of the core language.
• Typescript is a strongly typed, object-oriented & compiled language.
• Typescript is designed to be compiled into fully compatible Javascript, so it works in any browser, any host, and any OS.
• We need typescript compiler to compile it to Javascript code because browsers do not understand typescript.
• Typescript strongly encouraged static-typing which means it will validate all the assertions before the code executes. It allows you to do a type check during development which leads to the cleaner code and less errors in the browsers.

If you are familiar with Javascript, then you know that javascript is a dynamic language:

// In Javascript

const logger = (msg) => console.log(msg);

let marks = 20;

logger(marks);   // output: 20

marks = 'twenty';

logger(marks);  // output: twenty

In the above code as you notice first we assign a value of type number to variable marks and then reassign it value of type string to the same variable.

This is possible in javascript because it is weekly-typed language which means the type of variable is figured by JS at runtime & can be change from one type to another.

But this is not the case with typescript.

Let's get familiar with some unique feature which typescript provides :-

📌 Type Inference

Typescript uses inference or it infers the type based on the value we assign to it.

let age = 20;

age = 'twenty';  // ERROR
age = 40;  //CORRECT

In the above code snippet, when we try to assign a value of type "string" to variable age, it will cause error. But why???

In Typescript, we can change the value of variables but not the type.

When we first assign a value to variable age, we don't have to specially mention the type of the variable, typescript infer its type as number, which cannot be change later.

🧩 Functions

• We can also declare what type of a value we are expecting to be passed into the function as an arguments.

const area = (diameter: number) => {
    return diameter * Math.PI
}

area(2); //Correct
area('two'); // ERROR

🧩 Arrays

let marks = [100, 200, 300, 400, 500];

// marks.push('abc'); //ERROR

In the above code snippet, typescript infers the type of array marks as "number", hence we cannot insert a value of type "string" into it.

There is another case:

let mixed = ['xyz', 0, 3];

mixed[1] = 'abc';  //Correct
mixed[0] = 5;  //Correct
mixed[3] = true; //ERROR

In above code, typescript infers the type of array "mixed" as number or string, so we can insert the values of these types only, so in above case value of type boolean is not acceptable.

🧩 Objects

• Once we define the object we cannot assign additional properties to it later on.

let student = {
    name : 'xyz',
    marks: 30
}

student.marks = 100;
student.marks = '30' //ERROR

//Cannot assign new property to an object
student.age = 10 //ERROR

• Once we declare an object then it has to have a same structure, the same type with the same set of properties which cannot be changed later on except the values.

📌 Explicit Types

• Typescript uses inference to know the type of the variable but we can also explicitly define the types using the following syntax:

// Explicitly defining the types of variables
let character: string;
let totalMarks: number;
let isloggedIn: boolean;

totalMarks = '200'   //ERROR

🧩 Arrays

// this array will contain elements of type string
let studentList: string[ ] 

// this array contains element of type number & also initialising it with empty array
let studentMarksList: number[ ] = [ ]

🧩 Objects

//Method 1
let bucketList : Object; 

bucketList = {
    name: 'apple',
    price: 30
}

//Method 2
let bucketList2: {
    name: string,
    price: number
}

📌 Union Types

In typescript, union type allows us to define a variable with multiple type.

In case you want to explicitly define an array which can contain elements of type string or number, then the syntax for the same would be:

let mixedList: (string | number)[] = [];

mixedList.push('abc');
mixedList.push(30);
// mixedList.push(true); //ERROR

Following the same rule for other variables as well

let uid : string|number;
uid = 'acc';
uid = 10;
// uid = false; //ERROR

📌 Dynamic Types

There are times when we are not sure of the exact type of specific variable. In this scenario typescript provides special type: any. This allows you to assign "any" value to that variable.

let list : any;

list = 10;
list = 'abc';

let countList : any[] = [];
countList.push(10);
countList.push('xyz');

📌 Functions in Typescript

• In Typescript we can either use an arrow functions or a regular functions.

let greet: Function
greet = () => {
    console.log("hello world");
}

const add = (a:number, b: number) =>{
    console.log("sum = ", a + b);
}

add(2,3);

• you can define optional parameter inside a function using the syntax:

const subtract = (x: number, y: number, z?: string|number) =>{
    console.log("difference-> ", x-y);
    console.log("optional parameter-> ", z );
}

subtract(10, 5);
subtract(20, 10, 30);
subtract(100,50, 'abc');

Always put your required parameters at first and then put the optional parameters at the end.

• define default value of a parameter inside a function :

const multiply = (x: number = 10) =>{
    console.log("default value parameter-> ", x );
}

multiply(); // 10
multiply(20); //20

• When a function returns something, typescript will infer the return type automatically.

const divide = (x: number, y:number)=>{
    return x/y;
}

//Typescript automatically infer the type of result as number
const result = divide(20,10);

• You can also explicitly define the return type of function by using the syntax:

const msg = ():string =>{
    return 'hello world';
}

const greeting = msg();

• function in Typescript will return a void value when function doesn't return something. void is completely different from undefined in javascript.

// Function Signature
let calculateFn: (x: number) => void 

calculateFn = (num: number) => {
    console.log("num-> ", num)
}

calculateFn(10);

📌 Type Aliases

We can initially defined the type which can be reusable later on with the keyword type.

type stringOrNumber = string | number;
const myPredefinedType: stringOrNumber = 10;

type personRecord = {
    name: string,
    marks: stringOrNumber
}

let obj : personRecord;
obj = {
    name: 'anu',
    marks: '100'
}

In the above code snippet, we have define two types stringOrNumber & personRecord, which are reused later on.

📌 Wrap Up!!

That's all for this article. We'll explore more new features of typescript in the next post. Thank you for your time!! Let's connect to learn and grow together.

LinkedIn Twitter Instagram

What is BEM ?

• BEM divides the layout into 3 main parts: - Block - Element - Modifier

• It's a CSS naming convention for writing cleaner and more readable CSS classes. BEM also aims to write independent CSS blocks to reuse them later in your project.

• BEM is ideal for teams of developers on larger projects where designers and developers consistently name components for easier communication between the team members.

• BEM syntax usually looks like this:

.block__element--modifier

Let's explore this in more detail:

Block

Encapsulates a standalone entity that is meaningful on its own. It is usually a bigger component of a webpage. for example header, card, div, etc.

<div class= "card">
. . .
</div>

Element

It is a part of a block and has no standalone meaning. Any element is semantically tied to its block. It is represented using [block-name](double underscore)[element-name] like card__header.

<div class= "card">
    <div class= "card__header">
         . . .
    </div>

    <div class= "card__body">
         . . . 
    </div>
</div>

In the above example, card__header & card__body represents the Elements which resides inside the Block card.

Modifiers

It represents the flags on blocks or elements. Use them to change appearance, behavior, or state.

A modifier is an extension that specifies some change in the style of the block or the element it is applied to.

A modifier is indicated by using double dashes after the class name which allows you to overwrite the styles for a specific type of block, or an element.

<button class="btn btn--active"> Click Me </button>
<button class="btn btn--disabled"> Clicked </button>

In the above code snippet, btn--active & btn--disabled represents the Modifiers.

Corresponding CSS code would be:

.card { ... }
.card__header { ... }
.card__body { ... }

.btn { ... }
.btn--active { ... }
.btn--disabled { ... }

In case you are using some CSS preprocessor, you can modify your CSS file in the following way:

.card {
    &__header { . . . }
    &__body { . . . }
}

.btn {
    &--active { . . . }
    &--disabled { . . . }
}

BEM makes our CSS easier to read, helps to write clean code, and also saves a lot of time to decide the class name.

References

• http://getbem.com/naming/

• https://9elements.com/bem-cheat-sheet/

Wrap Up!!

Thank you for your time!! Let's connect to learn and grow together.

LinkedIn Twitter

In this article we'll cover the following concepts in detail:

• Why we need redux?
• What is Redux?
• Steps to create a React-redux application
  • Step 1: Create a User Component
  • Step 2: Create a Store
  • Step 3: Create a Reducer
  • Step 4: Share Redux Store with Components
  • Step 5: Add an Async Function Middleware using Redux Thunk
  • Step 6: Build an Action Creator
  • Step 7: Connect redux store to components

Let's get started!! 🚀🚀

Why Redux?

Before we jump to more details of Redux first try to understand why we actually need it?

In a complex application with many components, if you want to share a state among the several components, then one approach you can think of is using props.

But props doesn't solve our problem completely as it only enables you to send data from a parent component to a child component using the top-down approach and not vice-versa. That means any change in the state that occurred in the child component does not impact the parent component's state.

Also, another problem that props failed to solve is to share the state among the components with no parent-child hierarchy.

So, to overcome all the above problems and to synchronize the state across the components Redux comes into the picture. Using this approach we store all the state globally and all other components can access it.

Redux is an open-source JavaScript library for managing the application state.

What is Redux?

• Redux is basically used for state management.
• It can be used with all javascript frameworks & libraries like React, angular, etc.

Main Elements of Redux includes:-

• Store: If you are working on a large application, the state is separated from the React components into its own store. The store is the global component that stores the current state and it is an immutable object.
• Action: State in the store is not changed directly, but with different actions.
• Reducer: It is used to define the impact of the action on the state of the application.
• Subscribe: It is used to create a callback function the store calls when its state is changed.

Redux Principles:

• The global state of your application is stored as an object inside a single store.
• The only way to change the state is to dispatch an action.
• Changes are made with pure reducer functions.

Let's explore each one of them in detail by using a simple example:

We'll follow the following Folder structure:

📦src
 ┣ 📂actions
 ┃ ┣ 📜types.js
 ┃ ┗ 📜users.js
 ┣ 📂components
 ┃ ┗ 📂Users
 ┃ ┃ ┣ 📜index.js
 ┃ ┃ ┗ 📜user.css
 ┣ 📂reducers
 ┃ ┣ 📜index.js
 ┃ ┗ 📜users.js
 ┣ 📂store
 ┃ ┗ 📜index.js
 ┣ 📜App.js
 ┗ 📜index.js

You can find the final code in my github repo

Now we will create an application that fetches user data using REST APIs and display it using Redux.

In the end, our application will look like this:

Create a React application and install redux using npm install react-redux --save.

Step 1: Create a User Component

In src/components/Users/index.js file:

import React, { useEffect, useState } from 'react';
import './user.css';

export default function Users() {

    const [userDetails, setUserDetails] = useState([]);

    const handleButtonClick = () => {
        // make a call to Action Creator
    }

    return (
        <div className="container">

            <button className="btn" value="click me" onClick={handleButtonClick}>
                 Fetch Data
            </button>

            <table>
                <tbody>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th>Website</th>
                    </tr>
                    {
                        userDetails && userDetails.map((item, key) => {
                            return (
                                <tr>
                                    <td>{item.id}</td>
                                    <td>{item.name}</td>
                                    <td>{item.phone}</td>
                                    <td>{item.email}</td>
                                    <td>{item.website}</td>
                                </tr>
                            )
                        })
                    }
                </tbody>
            </table>
        </div>
    )
}

In the above code, we'll make an API call to fetch our data using REST API whenever a user clicks on the button and display the data in table format.

But before making an API call let's set up our store first.

Step 2: Create a Store

we'll create a Redux store in src/store/index.js file:

import { createStore } from "redux";
import rootReducer from "../reducers";

const preloadedState = {};

const store = createStore(
    rootReducer,
    preloadedState 
);

export default store;

• The Redux core library has a createStore API that will create the store.
• We'll pass our rootReducer that we'll create in the next step as an argument.
• createStore can also accept a preloadedState value as its second argument. You could use this to add initial data when the store is created.

Points to remember:

• The store basically brings together the state, actions, and reducers that make up your app.
• You can only have a single store in a Redux application.
• Every Redux store has a single root reducer function.

Step 3: Create a Reducer

• Reducers basically tell us how to update the state based on the action performed.
• It must be pure functions & should not produce any side effects.
• It must be composed of immutable objects. If there is a change in the state, the old object is not changed, but it is replaced with a new, changed object.

Let's create our reducer in src/reducers/user.js:

import { USER_DETAILS } from '../actions/types';

const initialState = {
  userDetails: {}
}

export default function (state = initialState, action) {

  console.log("Step 4: Inside User Reducer after action creator dispatches an action");
  switch (action.type) {
    case USER_DETAILS:
      return {
        ...state,
        userDetails: action.payload,
      };
    default:
      return state;
  }
}

It is a function that is given the current state and an action as a parameter it returns a new state.

Now we have created one reducer but as our application becomes more complex we may need to introduce more reducers.

So in this case, we'll create the main root Reducer which will combine all other reducers used in our application.

In src/reducers/index.js file:

import { combineReducers } from "redux";
import userReducer from "./users";

export default combineReducers({
    userReducer: userReducer,
   //other reducers
});

we can create the actual reducer for our application by combining the two or many existing reducers with the combineReducers function.

The combineReducer works in such a way that every action gets handled in every part of the combined reducer. Typically only one reducer is interested in any given action, but there are situations where multiple reducers change their respective parts of the state based on the same action.

Step 4: Share Redux Store with Components

As we have initially created our store, the next step is to make it available to all the components present in our application.

In src/App.js file:

import React from 'react';
import store from './store';
import { Provider } from 'react-redux';
import Users from './components/Users';

function App() {
  return (
    <Provider store={store}>
      <Users/>
      </Provider>
  );
}

export default App;

By using this way. all the components can access the store.

Step 5: Add an Async Function Middleware using Redux Thunk

After setting up the store, now we need to make an API call to fetch our data but before this, we will add middleware to our store which enables us to create an asynchronous action.

Redux Thunk

This library is a so-called redux-middleware, which must be initialized along with the initialization of the store.

Because of this, it is possible to define action-creators so that they return a function having the dispatch method of redux-store as its parameter.

As a result of this, one can make asynchronous action-creators, which first wait for some operations to finish, after which they then dispatch the real action.

To introduce redux-thunk into our application first install it using npm install --save redux-thunk.

Now in src/store/index.js file:

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "../reducers";

const preloadedState = {};

const middleware = [thunk];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
    rootReducer,
    preloadedState,
    composeEnhancers(
        applyMiddleware(...middleware)
    )
);

export default store;

As you noticed we introduce many new terms in the above code. Let's try to explore each one of them one by one.

compose

compose is an example of higher-order functions. It takes bunch of functions as arguments and returns a new function that is the composition of all these functions.

• It is used when you want to pass multiple store-enhancers to the store.
• It composes single-argument functions from right to left. The rightmost function can take multiple arguments as it provides the signature for the resulting composite function. for example: compose(f, g, h) is identical to doing (...args) => f(g(h(...args))).

store enhancers

• They are higher-order functions that add some extra functionality to the store. The only store enhancer which is supplied with redux by default is applyMiddleware.

applyMiddleware

• Creates a store enhancer that applies middleware to the dispatch method of the Redux store. This is handy for a variety of tasks, such as expressing asynchronous actions in a concise manner or logging every action payload.
• Because middleware is potentially asynchronous, this should be the first store enhancer in the composition chain.

We'll see the use of dispatch in the next step.

Step 6: Build an Action Creator

Now it's time to make an action creator which fetches data using REST APIs.

Action creators are a pure function which creates action.

Actions are plain JS objects that have a type field and can contain additional data. It creates an event that describes something that happened in the application.

We'll declare all the type field in a separate file src/actions/types.js:

export const USER_DETAILS = 'USER_DETAILS';

To build an Action creator:-

In src/actions/user.js file:

import axios from "axios";
import { USER_DETAILS } from './types';

export const getUserDetails = () => async (dispatch) => {

    console.log("Step 2: Inside Action Creator to make an API call");
    const res = await axios.get('https://jsonplaceholder.typicode.com/users');

    console.log("Step 3: Dispatch an Action to update the state");
    dispatch({
        type: USER_DETAILS,
        payload: res
    })
}

In the above code snippet, we make an API call, and as soon as we get our response we dispatch the action so we can change the state.

The store now uses the reducer to handle actions, which are dispatched or 'sent' to the store with its dispatch method.

Step 7: Connect redux store to components

We have finally done with the store setup. We are one step away so just follow up 🤓🤓.

In src/components/Users/index.js file:

import React, { useEffect, useState } from 'react';
import { getUserDetails } from '../../actions/users';
import { connect } from "react-redux";
import './user.css';

function Users({ getUserDetails, userReducer }) {

    const [userDetails, setUserDetails] = useState([]);

    const handleButtonClick = () => {

        //make a call to the Action creator
        console.log("Step 1: Make a call to Action-creator from Users Component");
        getUserDetails();
    }

    useEffect(() => {

        // Update the UI as soon as we get our response through API call
        console.log("Step 5: Inside UseEffect of User Component to update the UI")
        setUserDetails(userReducer.userDetails.data);
    }, [userReducer.userDetails])

    return (
        <div className="container">
          .....
        </div>
    )
}

const mapStateToProps = (state) => ({
    userReducer: state.userReducer
});

const mapDispatchToProps = {
    getUserDetails
}

export default connect(mapStateToProps, mapDispatchToProps)(Users);

In the above code snippet, we share the redux store with components with the help of connect.

Higher-order components are a function that accepts a "regular" component as its parameter and returns a new "regular" component as its return value.

connect

• connect method provided by react-redux is an example of Higher-order components.

• connect method is used for transforming the "regular" React component so that the state of the Redux store can be "mapped" into the component's props.

• It accepts two parameters: mapStateToProps and mapDispatchToProps.

mapStateToProps

It is a function that can be used for defining the props of the connected component that are based on the state of the Redux store.

mapDispatchToProps

• It is a JS object of action-creators functions passed to the connected components as props.
• The functions passed in mapDispatchToProps must be action creators, i.e. functions that returns Redux actions.

As you noticed how we can pass our action creators and redux state as a parameter to the Users component.

On button click, we invoke action-creator which makes an API call and update the redux state. In useEffect we will monitor the change in redux state and update the UI with response data.

Finally, our React application with Redux is ready!!! 😎😎

We can use the Redux Devtools to test and debug how Redux states are changing.

You can find the final code in my github repo

Wrap Up!!

Thank you for your time!! Let's connect to learn and grow together.

LinkedIn Twitter Instagram