DEV Community: Aniket Raikwar

Webpack: The Web Module Bundler

Aniket Raikwar — Sat, 02 Mar 2024 10:20:05 +0000

Introduction :

Webpack is a tool that helps us to organize and bundle all our website's files (like JavaScript, CSS, images, etc.) into one or a few files.

In simpler terms, Webpack is like a magic box that 
takes all our web development ingredients 
(.hbs, .cjs .html, .css, .js, .png, .jpg, etc) 
and turns them into a delicious cake 🍰
that browsers can easily consume.

Webpack is just allowed us to modularize our code as much as we want the way we like it to be, and finally webpack allows us to just push all of the code into one single file and that file is going to do everything.

We don't have to worry about the things like:

When should we load this module first, second or third?
Import and export statement of writing in modern JS and Common JS.
How SASS can be compile?

Webpack take care of everything for us.

Setup Guide:

Step 1:
We need to install Node.js, which includes npm (Node Package Manager).
Download & Install it.

Step 2:
If we have to used Webpack from scratch then just create one folder and open it into a code editor.

Step 3:
Open Terminal, and run the below command, for creating the package.json

npm init -y

Step 4:
Now, we need to install two packages that is webpack and webpack-cli
In Terminal, run the below command for installing this packages.

npm install webpack webpack-cli --save-dev

Step 5:
After Installing, create one file with a name:

webpack.config.js

This file is responsible for running the webpack services, and we can modified it according to our needs.

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  module: {
    rules: [
      {
        test: "/.css$/i",
        use: ["style-loader", "css-loader"],
      },
      {
        test: "/.(js)$/",
        use: "babel-loader",
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  plugins: [new HtmlWebpackPlugin()],
};

Let's try to understand the code line by line which we have wrote in above file 👆.

1. entry: "index.js" :
This means, "index.js" is a entry point and it serve as a container for all the javascript code written across the application.
For Example: In React, "index.js" file is the root file means it a parent component which contain all the child components.

2. module (rules) :
Module can set the rules, this means In our application we can used different packages and libraries which is not belonging our browser, now we need to make sure that each and everything which we wrote in our code, browser can be understood easily, so loader played the main role for finding the things and applying the specific loader on it.

Here, we are using "style-loader" and "css-loader", so whenever webpack find any css file, it applied this two loader one by one on it to process the styling part for the browser.

Now, not all browser support the Modern JS, so we can used "babel-loader", it just find the JS file and convert all the modern syntax code into common js code syntax, so any browser can easily grab and support the JS code.

3. output :
Okay, whatever the processed we did till now, we need to show them, otherwise it all waste. So, webpack just create a "dist" folder and inside that also create "bundle.js" file which contain all the JS code of the application but in common-js format.

4. plugins :
We used HtmlWebpackPlugin, this simply create a new html file "index.html" inside the "dist" folder and also integrate the "bundle.js" file in it. So, this html file is responsible for rendering all the code and showing the result on the browser.

Step 6:
Now, Once webpack configuration is done, we need to make a little changes in package.json file.
Here, inside the "scripts" object:

"scripts": {
    "build": "webpack",
}

Just add this build line.

Step 7:
Now, whenever we run "npm run build" command in a terminal what actually happened behind the scenes is:
NodeJs will run the "webpack" command which is "webpack-cli", and now it will find the webpack configuration file and execute all the code line by line,
So, it got the "index.js" file first and trying to execute them, then if they find any "css" file it try to run the loader to make it available for browser then is there any "modern JS" code, then run the "babel-loader" so it will convert code into "common js" and after all it just create "dist" folder for the final result 🤗.

Thats all about Webpack Basic, there are lots of feature of webpack, You can check here: https://webpack.js.org/

Zustand - The State Management Library for React & Next JS

Aniket Raikwar — Sat, 13 Jan 2024 11:09:32 +0000

Overview

State Management is a crucial aspect of building robust and scalable React & NextJS application. As the Project grow in complexity then handling the state effectively becomes more challenging for developers. That's why the Developer has find one solution for managing all the state globally. There are some library such as Redux and Redux Toolkit but it is more complicated for beginner to understanding the concept of Redux and they really don't know how it’s actually going to work under the hood.

In this blog, we'll explore Zustand, a lightweight and efficient state management tool designed for React and NextJS.

What is State in React?

In React, the state is treated as a variable for example in JavaScript for storing and updating the data we need variables like let, var and const, it exactly same for React but we called it State. But in deep-down the State refers to an object that represent the data values.

Why we not used `var`, `let` and `const` in React for managing and updating the data?

Because React has a concept of VDOM (Virtual Document Object Model) and whenever the variable like var, let and const is updated, still React is not responsible for re-render the application and this is default behaviour of React. Re-rendering only happens when the State value is updated or changed. That’s why we used State instead of this JavaScript variables.

How to Initialize State in React

We can initialize state in a component using the useState hook in functional components or by using the state property in class components. Here's a basic example using functional components and the useState hook:

Here, In the above example the count variable is part of the component's state, and it can be updated using the setCount function.
Remember one thing that state should be treated as immutable in React, meaning you should not modify it directly. Instead, always use the provided functions (like setCount in the below example) to update the state.

What is State Management?

In React, every component has it's own local state and sometime we need to pass that data into another component, If two component has relation of parent-child then we can easily pass that state data using props, but if there is no relation between that two component then there is no direct way to pass that data. Below image show the example of data passing using props.

Here, I have created one more component that name is OtherComponent.js which simply display the count.

And we import the OtherComponent.js in App.js and passing the count data value using props, So now, OtherComponent.js will also get access of count state.

Suppose, If OtherComponent.js is not a child component of App.js and it will used in somewhere in the application, then how can we pass that data into that component?
For that, React comes with the Global State Management Solution. In this case, some state has been created in global level, so any component can easily get the have access to that state, and whenever the state is changed or update, it will directly re-render that page where state is used. Below image show How the State is actually manage in global level.

Other Options for Managing State

In React there are so many option to manage the State in Global Level. If the application is smaller then React has their own feature to provide the state management and that is a Context API (useContext Hook).

Understanding Zustand

Zustand is a small, fast, and scalable state management library that leverages hooks for managing global state. It is very easy to use and not that much complicated, so beginner also comfortable while using Zustand.

*Let's try to implement Zustand with me 😎: *

First install zustand in our project.

npm install zustand

then we need to create one file countStore.js where our state and their method will be initialize.

Zustand provide the create function for creating the store and that store can be used as a custom hook.

In this example, the useCountStore hook is used to create a global state with a count variable and corresponding increment and decrement actions.

Now, this count state and their actions can be used in any component throughout the whole application.

In OtherComponent.js We don't need to pass the count state as a props, we can directly get that state using useCountStore Hook.

Now, there are several ways to getting the state in our component below are some example:

But I will suggest to used the second one and the last one, Because in the first one, we are using destructure approach for importing all the state and their method, so even if they are not used in their respective component, but updated in any other component still React re-render the components where they are imported and initialized and that will cause affect the performance of the application.

There are lots thing that can be used in advanced level, but we are end our blog here. I hope you will loved it 🥰.