DEV Community: Shahid Alam

Use puppeteer with Node to create PDFs!

Shahid Alam — Fri, 06 Dec 2024 09:24:12 +0000

How to Create a PDF Generator Using Puppeteer and Node.js

Generating dynamic PDFs is a common requirement in web development. Whether it's for invoices, reports, or resumes, creating a robust PDF generator is an essential skill for developers. In this article, I'll walk you through building a PDF generator using Node.js and Puppeteer, a powerful headless browser library.

As an example, I used this same method to build my CV Maker Project, which takes user input and dynamically generates a PDF. You can see the live demo of the project here: Live Demo.

This guide is written in plain, beginner-friendly language. If any part feels unclear, feel free to leave a comment, and I’ll address it as soon as possible.

Prerequisites

Before we begin, ensure you have the following:

Node.js installed on your machine.
A basic Node.js project skeleton set up.
Puppeteer installed as a dependency in your project:

  npm install puppeteer

If you’d like to reference the complete source code for this tutorial, check out my GitHub repository.

Step 1: Create a POST Endpoint for Receiving Data

First, create an endpoint where the client can send data to generate a PDF. For this, we’ll define a simple POST route in our index.js (or equivalent main server file).

app.post("/data", async (req: Request, res: Response) => {
    let postData = req.body.data; // Storing the data sent from the client
});

This endpoint will receive the data that needs to be included in the PDF.

Step 2: Create a Controller File

To keep the code organized, create a folder named controllers in your project directory. Inside this folder, create a file named PdfController.js.

The controller file is where we’ll write the logic for generating the PDF. This keeps our code modular and makes it easier to maintain.

Step 3: Write Logic for PDF Generation

In PdfController.js, add the following code to generate a PDF using Puppeteer:

export default (async function (postData) {
    try {
        const browser = await puppeteer.launch({
            headless: true,
            args: ["--no-sandbox", "--disable-gpu"],
        });

        const page = await browser.newPage();
        const content = `<html><body><h1>${postData}</h1></body></html>`;

        await page.setContent(content);
        await page.emulateMediaType('screen');
        await page.pdf({
            path: 'resume.pdf',
            format: 'A4',
            printBackground: true,
        });

        console.log('PDF created');
        await browser.close();
    } catch (err) {
        console.error('Error:', err);
    }
});

Here’s what this code does:

Launches a Puppeteer browser instance in headless mode.
Opens a new page and sets the content using the data provided by the user.
Converts the page content into a PDF and saves it as resume.pdf.
Closes the browser to free up resources.

Step 4: Use the `PdfController` Function in the POST Endpoint

Now, connect the PdfController function to the POST endpoint in index.js:

import PdfController from "./controllers/controller.js";

app.post("/data", async (req: Request, res: Response) => {
    let postData = req.body.data; // Storing the data sent from the client
    await PdfController(postData);
});

This ensures that whenever the /data endpoint is called, the logic for generating the PDF will be executed.

Step 5: Verify the PDF Generation

At this point, you can test the endpoint using Postman or any other HTTP client. When you send a POST request with the relevant text data, a PDF named resume.pdf will be created in the project’s root directory.

Step 6: Send the PDF Back to the Client

To send the generated PDF back to the client as a response, install the fs-extra package:

npm install fs-extra

Then update the POST endpoint as follows:

import PdfController from "./controllers/controller.js";
const fs = require("fs-extra");

app.post("/data", async (req: Request, res: Response) => {
    let postData = req.body.data; // Storing data sent from the client
    await PdfController(postData);

    // Read the generated PDF file
    const file = fs.createReadStream("./resume.pdf");
    const stat = fs.statSync("./resume.pdf");

    // Set response headers for the file
    res.setHeader("Content-Length", stat.size);
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader("Content-Disposition", "attachment; filename=resume.pdf");

    // Send the file back to the client
    file.pipe(res);
    console.log('PDF download sent');
});

This code sends the resume.pdf file as a downloadable attachment to the client.

Conclusion

And that’s it! 🎉 You’ve built a complete PDF generator using Node.js and Puppeteer. This setup dynamically generates PDFs based on user input and sends them back as downloadable files.

Here’s what you achieved:

Set up a Node.js server with a POST endpoint.
Used Puppeteer to generate PDFs dynamically.
Sent the generated PDF back to the client.

Bonus

If you’d like to generate well-structured and formatted PDFs (e.g., resumes or invoices with tables and styles), let me know in the comments. I’d love to write another tutorial for advanced use cases.

Also, feel free to check out the complete project code. It’s well-documented and beginner-friendly.

Have a nice day!

Node.js 20.6.0: Say Goodbye to 'dotenv'

Shahid Alam — Sat, 09 Sep 2023 05:55:22 +0000

Unveiling Node.js 20.6.0

If you're a Node.js developer, you're probably familiar with the 'dotenv' package. It's been a trusty companion for managing environment variables in your Node.js applications. However, with the recent release of Node.js version 20.6.0, managing environment variables just got a whole lot easier, and the need for 'dotenv' is becoming a thing of the past.

What's New in Node.js 20.6.0?

Node.js is constantly evolving, and version 20.6.0 brings some exciting updates. One of the most notable changes is the built-in support for .env files. This means you no longer need to rely on external packages like 'dotenv' to handle your environment variables. Node.js itself can now seamlessly load them from a .env file.

Why Is This a Big Deal?

🔒Enhanced Security: Now you don't have to depend on third-party packages for importing and using .env variables in your code eliminating the risk of any kind of vulnerability.

🌐Streamlined Workflow: With built-in .env file support, your development workflow becomes more straightforward. You don't need to install and configure 'dotenv' or any other third-party packages. Node.js takes care of it for you, reducing the complexity of your project setup(and lighter!).

💼Cleaner and More Maintainable Code: Hardcoding environment variables into your code can make it messy and hard to maintain. It's also a hassle to change them when needed. By using .env files, you keep your codebase clean and make it easier to update configurations as your project evolves.

How to Use .env Files in Node.js 20.6.0

Using .env files in Node.js 20.6.0 is straightforward:

Create a .env File: Start by creating a .env file in the root directory of your project. In this file, you can define your environment variables, each with its corresponding value. For example:

API_KEY=mysecretkey
DATABASE_URL=mongodb://localhost/mydb
DEBUG=true

Run Your Application: To load the environment variables from your .env file, simply run your Node.js application with the --env-file flag, like this:

node --env-file .env

So, why wait? Upgrade to Node.js 20.6.0 and start enjoying the benefits of a cleaner, more secure, and streamlined development process. Your Node.js projects will thank you!

Happy coding! 🚀

How To Use Redux Toolkit with React - The Easy Way

Shahid Alam — Thu, 16 Mar 2023 16:21:59 +0000

Redux seemed way too complicated (skippable)

Redux a popular tool that's often mentioned in tech Discord groups and numerous job posts. In fact, nowadays if you're familiar with React, it's practically a given that you should also know Redux.

When I decided to learn Redux, I quickly realized that setting it up could be a bit of a headache. I spent hours watching 15-minute-long videos that attempted to explain what a reducer, store, and Redux actually are. But the more I watched, the more confused I became.

After reading a variety of articles, I finally managed to set up a Redux store and begin to understand it. However, I realized that it would be helpful to simplify the process of learning Redux for others. That's why I'm writing this post - to provide a clear and straightforward explanation of Redux Toolkit that anyone can use in their application. If you have any feedback or notice any errors in my code, please don't hesitate to leave a comment below. I'll be sure to address it as soon as possible.

Note - in case you are overwhelmed with my explanation, feel free to copy paste them and then go through the explanation. Be sure to use console.log whenever you want to!

Step 1 - Installing Redux and Redux Toolkit

Simply copy paste and install the following to your React application.

npm install redux @reduxjs/toolkit

Step 2 - Creating a Store

what is store? what is action? what is dispatch?
Store is what it sounds like - a store of reducers and states which can be used throughout the application without the hassle of being passed as props.

For example - if you are building a social media app, you would like the details of the user to be accessed in any component. You can simply do this by "calling" the details in that particular page or component(like setting, profile page,etc.) from the store file.

Now, you would like to manipulate the value of this state according to the user's actions. For example when the user logs out, you want to empty the "user" state/object (let's call this function removeUser). Or populate it with data when user logs in (let's call this function addUser). These are two different functions for two different scenarios for the same object. These types of functions are called Reducers.

Go to your src folder of your React project and create a folder called "redux". In it, create a file called store.jsx (or js if you have created your project using create-react-app) and paste the following code.

src/redux/store.jsx

//configureStore will help us set up our store
import { configureStore } from '@reduxjs/toolkit';

//we are exporting the store by default
//if you want, you can also assign it to a variable and then export it
export default configureStore({
    reducer: {}, //all our reducer functions will go here
});

Step 3 - Making our store available throughout the application

Go to index.jsx, index.tsx or main.tsx and paste the following. Depending on whether you have created your react app using create-react-app or vite or any other building tool, this may vary.

We import the Provider wrapper here that helps "distribute" the store we created throughout the application. Then, we pass the store object we created (after importing it of course) as props to it so that it knows which file to be made available globally.
src/App.jsx or src/main.jsx


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import store from './redux/store'; // importing the store we created
import { Provider } from 'react-redux';

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <App />
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
);

Step 4 - Creating a Slice

Slice file contains a state variable and different functions(reducers) for that particular state, that will become a part of the redux store we previously created. Think of them as files that keep states separately from one another.

For analogy - think of them as rooms of your house. Bedroom - there is bed, your regular furniture and your wardrobe. These are all "states" inside a "slice"(room). You perform various functions(reducers) here - sleep, lay down, cry because your life sucks or simply lay down and watch a movie or two.

src/redux/userSlice.jsx

import { createSlice } from '@reduxjs/toolkit';
//import PayloadAction in case you're using Typescript
import type { PayloadAction } from '@reduxjs/toolkit';

export const userSlice = createSlice({
    name : "userInfo",
    initialState : {},
    reducers:{
//in case of typescript - 
//adding the type of payload action(data) we need to pass to this reducer (function). 
        addUser:(state:any,action:PayloadAction<string>)=>{
         const data = {
                email: action.payload.email,
                password: action.payload.password,
            };
//pushing the login data to the state object in this slice
    state.push(data);
        }
    }
})

//keep adding the reducers' names to make them available globally
export const {addUser} = userSlice.actions;

export default userSlice.reducer;

we import the reducers that we exported in the slice and add it to our store

src/redux/store.jsx

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './userSlice';


export default configureStore({
    reducer: {
// the "user" key will be used to identify the slice we are dealing with
//in case of multiple slices, we can create different keys for different reducers(of those relevant slices)
        user : userReducer,
    },
});

Step 4 - Accessing and updating the state inside our slice file/files

Go to the file where you want to add the login data to your store. For this example, we are going to send the email id and password to our userSlice state using useDispatch hook. This hook will allow us to "push" or send our data to the slice state using its reducer(in this case - addUser).

import { useDispatch } from 'react-redux';
import { addUser } from "../../redux/userSlice";

function Login() {
  const dispatch = useDispatch();

  const handleLogin = () => {
    // Perform login logic here, e.g. send login request to server using fetch or axios

    // Assuming login is successful, add user to state
    const user = { email: "johndoe@example.com", passowrd: "passwordlol" };
    dispatch(addUser(user));
  }

  return (
    <div>
      <h1>Login Form</h1>
      {/* Login form here */}
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

Now when the user clicks on the Login button, the store will execute the reducer addUser and add the information as a action.payload object to the user state we created in userSlice. You can check the code in step 4 for what we did to the data sent to the slice.

Now, how can we access the data? We simply use the useSelector hook. This hook allows us to access the slices and the states inside them.

dashboard.tsx

import React from 'react';
import { useSelector } from 'react-redux';


const ExampleComponent = () => {
  // This hook allows us to extract data from the Redux store state
//notice how we are using the key for accessing the userSlice state given in the store
  const email = useSelector((state) => state.user.data.email);

  return (
    <div>
      <h1>Hello {email}!</h1>
    </div>
  );
};

export default ExampleComponent;

Aaaand that's it! Now all you have to do is add more reducers and import useDisptach or useSelector hook to use the states in the store throughout the application. Easy right?

Feel free to copy paste the code to speed up your development. Let me know in case you encounter any error or if you have any feedback for this article.

See you next time!

Blockchain and smart contracts basics in 2 minutes - part 2

Shahid Alam — Fri, 28 Oct 2022 14:00:42 +0000

Another part?

yes. There were some terms that I thought were very important which I missed in my previous post. If you haven't checked out my previous post, it's okay. As long as you have at least knowledge of what blockchain is, you won't feel loss. However, if it's your first time, please read the part 1 first. Let's go!

Mainnet and TestNet

Mainnet is the blockchain network on which most “real world” applications and transactions take place. It is here that real money(in the form of crypto) is transacted.
Testnet is the blockchain that behaves like mainnet except there is no real money involved, and it is mainly used for deploying test projects and doing test transactions. You can send and receive fake money on it, but you cannot transfer it to mainnet.

Gas

Every time a transaction is made, a node will have to solve a complex mathematical problem to approve it. The measurement of computational power required to approve the transaction is called gas. This depends on the complexity of the problem, demand and supply capacity of the network at the time of the transaction.

To make a transaction happen on a blockchain, the nodes or miners will charge a small fee for running the blockchain. The fees depend on the amount of gas required for the transaction. The more gas used, the more fees you’ll have to pay. On top of it, some coins(or crypto) are also “burnt”. This means during the transaction, some ether/coin/crypto is lost forever. This is done to decrease the supply of the crypto and increase its price.

How blockchain works

A blockchain is a chain of blocks.

Each block has the following data:

Block number
Nonce - the solution to the problem
The actual data we want to deploy - usually contains a list of transactions.
It's hash
Previous block’s hash - the hash of the block before it Hash

When the data, block number and nonce is put through a “hash algorithm”, a string of fixed length is created that helps us identify the data.

When miners try to verify this block, they will try to figure out the nonce of the block again and again until they get it right for the above hash.

Why blockchain is immutable

If any one block in a blockchain changes any value, its hash will also change (since the hashing algorithm will change it based on data). This breaks the chain, since all the blocks after it will have its previous hash.

Image Source

Now in a distributed blockchain, each node, containing a copy of the blockchain that acts as a ledger of transactions, is connected with one another(peer-to-peer). Now, if any data is altered in any of the copy of the blockchain, that whole record will become invalid and the node will be thrown out of the network and denied mining rewards. This is why blockchains are “immutable”. This is similar to keeping, say, 30 copies of ledgers(or record of transactions) among your friends. If any one friend tries to be smart and alter any data for his greed, he will be caught as his data does not tally with others.

If you change data in one block, the entire copy of the blockchain gets invalidated. And even if you somehow are able to change the hash of each and every block in the (copy)blockchain, which is an extreme computation heavy task, that node will still be invalid since the hashes will not match with the hashes of block of its peers (nodes).

Keys

Keys are a string of characters that is used for verifying a transaction.
There are 2 types of keys:
Private - these are our “passwords” that should be kept secret. This is used for signing or confirming a transaction.
Public key - this key is generated from the private key itself that is used for verifying any transaction. This can be displayed in public. This acts as an "ID" that lets you connect your wallet on different website/dApps.

Blockchain and smart contracts basics in 2 minutes

Shahid Alam — Sun, 23 Oct 2022 16:37:15 +0000

This article aims to give you the necessary "bare minimum" knowledge to get started in web3. These are enough if you are just starting out your journey in web3
Let's get started! Blockchain and smart contract basics in less than 2 minutes. Go!

What is blockchain?

It's a "book" or ledger that is kept by everyone who run the blockchain. These people/machines are known as nodes and every node has a copy of the ledger to verify any transfer of assets. That's it. No one person owns the blockchain.

Blockchain is the tech behind bitcoin that allows people to do peer-to-peer (one person to another) transactions without any company in between.

Since no other company or person is between people when transacting (like credit card companies or e-wallets), it was seen as a huge improvement that allowed privacy (since no one can see who sent who), great security (powered by miners by solving complex mathematical problems) and no reliance on third party (like your bank or credit card companies).

What is a Smart Contract?

Smart contracts are a set of instructions executed in a decentralized way between parties. It’s an agreement, contract or a set of instructions that is deployed on a decentralized network.

Bitcoin also has this feature, however it is not optimized for it. Ethereum is a better candidate.

For smart contract to work and replace the traditional use cases and contracts, we need to push data to it using an external system. However, it cannot get data from the real world directly(like getting cricket scores or weather reports). This is known as the “Oracle Problem”.

Oracles are devices or systems that help feed data to smart contracts from the real world(“off-chain”). For the blockchain to be decentralized, we cannot work with only one oracle. We need a decentralized oracle network (such as Chainlink) as well. This combination of off-chain data with the on-chain logic gives rise to Hybrid Smart Contracts. They help smart contracts to execute a contract with the help of external data by Oracle.

What is the value of smart contract?

Smart contracts create “Trust Minimized Agreements”. They create unbreakable promises or agreements. This helps in speed and transparency. For example, when you buy something online, they promise to deliver the product to you. When you deposit money in your bank account, the bank promises to keep the money safe and in turn you promise to pay the fees they charge.

Sometimes, the people who we put our trust in for work, break them and in most cases, get away with it. This is where smart contracts come into the picture.

Now, there are already systems that solve or prevent these problems in our society, like courts. However, frauds do happen, trusts are broken, and the terms are not met. And as already mentioned, in some cases, they get away with it or take YEARS to make justice happen. Examples - the recession of 1980s when banks refuse withdrawal of its own customers’ funds, the demonetization of some Indian currency notes that caused a lot of controversies and death of a lot of people due denied access to their own money, insurance companies refusing claims because of “hospital partnership agreements” when you really need it.

Here, you trust the BRAND and hope that they do as they have promised.

The traditional alternative is to go to another entity that provides the same service and hope to not get scammed or screwed over.

In contrast, smart contracts are :
Immutable
Executes automatically
transparent (anyone can see the terms of agreements)

This makes sure that not one central entity can alter the terms in his/her favor. In this case, we trust the MATH and CODE that only has a “single truth” and will execute on fulfillment of the promise ONLY.

Benefits of smart contract

Decentralized - no entity or single person controls the network. The blockchain is run by individuals/machines who are also known as “node operators”. It is the combination of the node operators and the algorithms they run that make the network decentralized.
Transparency & flexibility - anyone, even you, can see everything on the chain. This allows the public to review the terms and confirm if they are being ripped off or mislead.
Speed & efficiency - sending or receiving money happens within minutes (and sometimes seconds!) where traditional methods such as wire transfer overseas take several days to complete. Hacking the blockchain is nearly impossible since to tamper a simple contract, the hacker will need to change the ledger (or history of transactions) on thousands of nodes. Personal opinion - this works great for someone sending money internationally. For domestic, I think UPI is a better alternative.
Removes third-party reliance.
Trust minimized agreements - It's less trust, more truth reliant.

Applications of smart contract so far

DeFi - decentralized finance that removes the reliance on banks and financial institutions to keep our money safe and engage in financial activities.
DAO- Decentralized Autonomous Organization are groups/ organizations that are governed by a set of instructions or smart contracts. They have no central leadership and are governed by the set of instructions and code written in smart contracts.
NFTs - Non-Fungible Tokens are pieces of arts (not the ugly apes, please) that are like special collectable cards or Pokémon toys you used to buy because they were limited.

Check out part 2 here!

useNavigate,Navigate and useLocation in React Router v6

Shahid Alam — Sun, 07 Aug 2022 15:33:02 +0000

What is useLocation?

useLocation is hook that allows us to get the current location(or URL) of the web app.



const currentLocation = useLocation()
console.log(currentLocation)

What is useNavigate?

useNavigate is a hook that allows to create a function that'll help a user navigate to a particular page (based on an action). You can customize it to redirect the user to the login page or user Dashboard.



import React from "react";
import { useNavigate } from "react-router-dom";

const Home = () => {
  const navigate = useNavigate();

  return (
    <div>
      <h2>Visit my profile</h2>
      <button
        onClick={() => {
          console.log("redirecting.....");
          navigate("/profile");
        }}
      >
        My Profile
      </button>
    </div>
  );
};

export default Home;

Now what if you want to go back to the Home page without clicking the browser "Back" button? We provide a button.



import React from "react";
import { useNavigate } from "react-router-dom";

const Profile = () => {
  const navigate = useNavigate();

  return (
    <div>
      <h2>You are awesome!</h2>
      <button
        onClick={() => {
          console.log("redirecting.....");
          navigate(-1);
        }}
      >
        Home
      </button>
    </div>
  );
};

export default Home;

What is Navigate?

Navigate is basically useNavigate() converted into a React component. This makes it easy to implement in our React apps.

props it takes -

state - optional -> stores state and can be used to store the location of the current or previous page
replace - optional -> helps in redirecting to the location specified in the state.



 return (
    <BrowserRouter>
      <Container maxWidth="lg">
        <Navbar />
        <Routes>
          <Route exact path="/"  element ={<Home/>} />
          <Route path="/auth"  element={<Auth/>} />
          <Route path="/posts" exact element={<Home/>} />
{/*
the Navigate component redirects the user to posts section on getting rendered.
This happend IF the user is logged in(user object is present).
*/}
          <Route path="/auth" exact element={() => (!user ? <Auth /> : <Navigate to="/posts" />)} />
        </Routes>
      </Container>
    </BrowserRouter>
  )
};

Context API in human language

Shahid Alam — Fri, 15 Jul 2022 08:08:31 +0000

What is Context API?

Think of it as a container in which you keep all your states, variables and whatnot. Then, later you can simply import whatever variable or state you need from it thus, saving you writing long lines of code.

Want a dumb down version?

Imagine yourself back in high school.
Don't panic! you're just imagining it(it was hard, I know).
A teacher is marking the answer sheets for an examination, noting the marks on a paper sheet.

When the teacher is ready to declare the results, he goes to the house of each student and tell them the marks/grades scored. You lived the farthest, so he tells your friend to pass down your grade to you. This friend will have to pass down your grade to other friends who live near your house and it keeps going on until the grade reaches you.

See how inefficient it is? Instead of just posting the results online or on the notice board, we just increased the time taken for the result to get and the complexities for the teacher and your friends.
Now imagine 1000 students who study in this school. Doesn't look good for our dear teacher now, does it?

You can think of the first method as the method by which we pass data as props to different components and second method as using the Context API of React. It is acceptable if you're working on small projects(a small group of students) but it becomes more complex as your project gets bigger and bigger(around 1000 or more).

Using Context API

Step 1 First, we create a context file inside a new folder called context . We're gonna name it Store.jsx.

This will be the place where all your variables and state reside. For testing purpose, we'll want to make user and userLoading states available to all our components in our app.

Step 2

Next, we create a StoreProvider component. Think of these components as transportation of sort which helps transport the store we created in our previous steps to the whole app.

We use the createContext hook to create a context(what we discussed above). Whatever we put inside the Provider component .i.e the children of Provider, should have access to the Store.

Using the useContext hook, we tell the context API which store should be available globally.

Step 3

Lastly, we create a useStore component which will allow us to "pull" the required states/variables from our Store

Here, we use the useContext hook and specify which context component we want to use (which we import from context provider component)

Step 4
Now you can use the states, objects, blah blah anywhere in your app! Just import useStore and use object destructuring to "pull" the required value from the store we created.

Conclusion

Context API is great for your application if you want to reduce code in each component and keep track of reusable variables and states in one place. There is another tool for managing and storing states in an app but that's something for another day.

See ya!

What the heck is State in React?

Shahid Alam — Wed, 13 Jul 2022 13:10:56 +0000

Introduction

After building numerous projects using only HTML, CSS and Javascript, you find yourself ready to tackle the most popular front-end framework - React.js

There are literally more than 100s of job postings daily for good React developers. So you have a pretty good reason to move from static pages.

And you are met with your first challenge - State.

Explanation

So what is state exactly?

An oversimplification will be - a variable that re-renders(reloads without refreshing) the parent component. That's all it is.

In class component :

In functional component :

And as any other variable, you are free to add whatever you want in it. Some examples in functional component. (they are applicable in class component as well) :

Changing values of state

Unlike variables where we can directly change the value by reassigning, we change values in set using a function called setState and NOT by re-assigning like a variable.

In class component:

In functional component :

Changing specific values in state

Whenever you initialize a state with an object, most of the time you might want to change a specific value only and not the whole object. How do we achieve it?

We do it by copying the previous data from the state and modify the value using the property name.

Here, I'm using functional component (same can be done in a class component) :

Conclusion

So that is what state is in React and how you can go about initializing, changing and using it.

States are very helpful and "control" the component.

I often share react related content on my twitter so be sure to check it out!

What is a class in JavaScript?

Shahid Alam — Tue, 13 Jul 2021 13:09:29 +0000

Stuck in tutorial hell

You may have come across this word "classes" which is often referred as a blueprint of different objects. we can create "instances" of it using the new keyword. but sometimes you don't really get what exactly is class even after reading several articles and getting trapped in tutorial hell.

Fret not. i'll try to explain it as easy as possible.

Think of classes as a stamp, like above.

Imagine you have to sign some documents for verification.
Now imagine there are 400 pages of documents on which your signature is needed(400 similar objects are needed). It'll take a lot of time if you do them one by one(keep declaring new objects with similar properties).

So, what do you do to save time and effort? You use a stamp(class) which will already have your name(object properties/functions/values) on it. Now you can simply use the stamp to validate different documents(create objects with same properties) much faster.

in code we do:

class Sign(){ // creating a class / stamp
      constructor(signature){ // engraving your signature on the stamp
            this.sign = signature; // assigning the signature to a property this.sign which will hold the value

                            }
         get thesign(){
            return this.sign
         }

}


const mySign = new Sign("cj")
console.log(mySign.sign) // cj
console.log(mySign.thesign) // cj

Conclusion

I've tried my best to explain classes in JavaScript. If you find anything that's incorrect, please let me know. Thank you for reading!

DEV Community: Shahid Alam

Use puppeteer with Node to create PDFs!

How to Create a PDF Generator Using Puppeteer and Node.js

Prerequisites

Step 1: Create a POST Endpoint for Receiving Data

Step 2: Create a Controller File

Step 3: Write Logic for PDF Generation

Step 4: Use the PdfController Function in the POST Endpoint

Step 5: Verify the PDF Generation

Step 6: Send the PDF Back to the Client

Conclusion

Bonus

Node.js 20.6.0: Say Goodbye to 'dotenv'

Unveiling Node.js 20.6.0

What's New in Node.js 20.6.0?

Why Is This a Big Deal?

How to Use .env Files in Node.js 20.6.0

How To Use Redux Toolkit with React - The Easy Way

Redux seemed way too complicated (skippable)

Step 1 - Installing Redux and Redux Toolkit

Step 2 - Creating a Store

Step 3 - Making our store available throughout the application

Step 4 - Creating a Slice

Step 4 - Accessing and updating the state inside our slice file/files

Blockchain and smart contracts basics in 2 minutes - part 2

Another part?

Mainnet and TestNet

Gas

How blockchain works

Why blockchain is immutable

Keys

Blockchain and smart contracts basics in 2 minutes

What is blockchain?

What is a Smart Contract?

What is the value of smart contract?

Benefits of smart contract

Applications of smart contract so far

useNavigate,Navigate and useLocation in React Router v6

What is useLocation?

What is useNavigate?

What is Navigate?

Context API in human language

What is Context API?

Want a dumb down version?

Using Context API

Conclusion

What the heck is State in React?

Introduction

Explanation

Changing values of state

Changing specific values in state

Conclusion

What is a class in JavaScript?

Stuck in tutorial hell

Conclusion

Step 4: Use the `PdfController` Function in the POST Endpoint