DEV Community: Samir Pokhrel

Integrating eSewa Payment in a MERN Stack Web Application(part 2)

Samir Pokhrel — Wed, 28 Aug 2024 12:22:32 +0000

In the final part of our eSewa payment integration tutorial, we’ll cover three crucial steps:serving configuration files from .env , setting up a MongoDB database to store transactions and verifying responses from the payment gateway. But first, let’s recap what we’ve accomplished so far:

In the first part of the tutorial, we:

Set Up a MERN Stack Application: We initialized a new MERN stack project, set up a Node.js and Express backend, and created a React frontend. This foundational setup allowed us to build a robust application for integrating payment features.

Initiated Payment Integration: We implemented basic payment integration by configuring routes in our backend to handle payment requests and redirect users to the eSewa payment gateway.

You can check out Part 1 following this link.

Let's begin...

Serving Configuration Files from .env

To manage sensitive information such as API keys and secrets, it’s essential to use environment variables stored in a .env file. This approach keeps your configuration secure and prevents sensitive data from being hard-coded into your application.

Step-by-Step:

1.Create a .env File:
In the root of your project directory, create a file named .env. This file will store your environment variables.

echo > .env

2.Add Configuration Variables:
Open the .env file and add your configuration variables. For eSewa, you you will require:

PORT=3000
MONGO_URI=mongodb://127.0.0.1:27017/mydatabase
MERCHANT_ID=EPAYTEST
SUCCESS_URL=http://localhost:5173/payment-success
FAILURE_URL=http://localhost:5173/payment-failure
ESEWAPAYMENT_URL=https://rc-epay.esewa.com.np/api/epay/main/v2/form
SECRET=8gBm/:&EnhH.1/q
ESEWAPAYMENT_STATUS_CHECK_URL=https://uat.esewa.com.np/api/epay/transaction/status/

3.Load Environment Variables in Your Application:
Use the dotenv package to load these variables. Ensure dotenv is installed:

npm install dotenv

4.At the beginning of your app.js file, load the environment variables:

require('dotenv').config();

5.Access the environment variables in your code using process.env. For example:

process.env.PORT

Setting up a MongoDB database to store transactions

To track and manage transactions, you need to set up MongoDB to store transaction records. This setup allows you to maintain a history of payments and manage order states effectively.

Step-by-Step:

This blog post assumes that the MongoDB Community Server and MongoDB Compass is already installed and running on your machine. If not, please install it from the MongoDB official website before proceeding.
MongoDB Community Server

1.Install Mongoose package: Install Mongoose for MongoDB object modeling:

npm install mongoose

2.Configure the MongoDB Database:
Create a config folder in the root of the project(server) directory and navigate into the folder and create a file db.config.js

mkdir config
cd config
echo > db.config.js

3.Set Up the MongoDB Connection:
Use Mongoose to connect to your MongoDB instance. This instance could be a local MongoDB server or a cloud-based MongoDB Atlas server.
Here, we will use the local MongoDB server for the sake of simplicity.

db.config.js

//later we will serve 'mongodb_connection_url' from .env  
const { connect } = require("mongoose");
const connectDB = () => {
  try {
    connect('mongodb://127.0.0.1:27017/mydatabase').then((res) => {
      console.log("MongoDB connected successfully");
    });
  } catch (error) {
    console.error("MongoDB connection error:", error);
  }
};

module.exports = connectDB;

4.Import the db.config.js on the app.js file

const connectDB = require("./config/db.config");
connectDB()

5.Create a Mongoose Model:
Define a Mongoose model for transactions. Create a file named Transaction.model.js in your models directory:

//navigate to the root of the directory
mkdir models
cd models
echo > Transaction.model.js

Define the Schema

const mongoose = require("mongoose");

// Define the Transaction schema
const transactionSchema = new mongoose.Schema(
  {

    product_id: {
      type: String, 
      required: true,
    },
    amount: {
      type: Number,
      required: true,
      min: 0, // Amount should not be negative
    },

    status: {
      type: String,
      required: true,
      enum: ["PENDING", "COMPLETE", "FAILED", "REFUNDED"], // Example statuses
      default: "PENDING",
    },

  },
  {
    timestamps: true, // Adds createdAt and updatedAt fields automatically
  }
);

// Create the Transaction model from the schema
const Transaction = mongoose.model("Transaction", transactionSchema);

// Export the model
module.exports = Transaction;

6.Save Transactions: In your payment route, save transaction details to MongoDB. Update the /initiate-payment route:

app.post("/initiate-payment", async (req, res) => {
  const { amount, productId } = req.body;

  let paymentData = {
    amount,
    failure_url: process.env.FAILURE_URL,
    product_delivery_charge: "0",
    product_service_charge: "0",
    product_code: process.env.MERCHANT_ID,
    signed_field_names: "total_amount,transaction_uuid,product_code",
    success_url: process.env.SUCCESS_URL,
    tax_amount: "0",
    total_amount: amount,
    transaction_uuid: productId,
  };

  const data = `total_amount=${paymentData.total_amount},transaction_uuid=${paymentData.transaction_uuid},product_code=${paymentData.product_code}`;

  const signature = generateHmacSha256Hash(data, process.env.SECRET);

  paymentData = { ...paymentData, signature };
  try {
    const payment = await axios.post(process.env.ESEWAPAYMENT_URL, null, {
      params: paymentData,
    });
    const reqPayment = JSON.parse(safeStringify(payment));
    if (reqPayment.status === 200) {
      const transaction = new Transaction({
        product_id: productId,
        amount: amount,

      });
      await transaction.save();

      return res.send({
        url: reqPayment.request.res.responseUrl,
      });
    }
  } catch (error) {
    res.send(error);
  }
});

Verifying Responses from the Payment Gateway

It’s essential to verify the responses from the payment gateway to ensure that transactions are legitimate and to update your transaction records accordingly.

Step-by-Step:
1.Verify payment transaction (/payment-status): :
Implement routes to handle payment responses from eSewa.

// Route to handle payment status update
app.post("/payment-status", async (req, res) => {
  const { product_id } = req.body; // Extract data from request body
  try {
    // Find the transaction by its id
    const transaction = await Transaction.findOne({ product_id });

    if (!transaction) {
      return res.status(400).json({ message: "Transaction not found" });
    }

    const paymentData = {
      product_code: process.env.MERCHANT_ID,
      total_amount: transaction.amount,
      transaction_uuid: transaction.product_id,
    };

    const response = await axios.get(
      process.env.ESEWAPAYMENT_STATUS_CHECK_URL,
      {
        params: paymentData,
      }
    );
    const paymentStatusCheck = JSON.parse(safeStringify(response));
    if (paymentStatusCheck.status === 200) {
      // Update the transaction status
      transaction.status = paymentStatusCheck.data.status;
      await transaction.save();
      res
        .status(200)
        .json({ message: "Transaction status updated successfully" });
    }
  } catch (error) {
    console.error("Error updating transaction status:", error);
    res.status(500).json({ message: "Server error", error: error.message });
  }
});

app.js file after update look like this:

const dotenv = require("dotenv");
const express = require("express");
const bodyParser = require("body-parser");
const axios = require("axios");
const cors = require("cors");
const { generateHmacSha256Hash, safeStringify } = require("./utils");

const Transaction = require("./model/TransactionModel");
const connectDB = require("./config/db.config");

// Load environment variables from .env file
dotenv.config();

const app = express();
const PORT = process.env.PORT || 3000;
connectDB();

const corsOptions = {
  origin: ["http://localhost:5173"],
};

app.use(cors(corsOptions));

// Middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// Route to initiate payment
app.post("/initiate-payment", async (req, res) => {
  const { amount, productId } = req.body;

  let paymentData = {
    amount,
    failure_url: process.env.FAILURE_URL,
    product_delivery_charge: "0",
    product_service_charge: "0",
    product_code: process.env.MERCHANT_ID,
    signed_field_names: "total_amount,transaction_uuid,product_code",
    success_url: process.env.SUCCESS_URL,
    tax_amount: "0",
    total_amount: amount,
    transaction_uuid: productId,
  };

  const data = `total_amount=${paymentData.total_amount},transaction_uuid=${paymentData.transaction_uuid},product_code=${paymentData.product_code}`;

  const signature = generateHmacSha256Hash(data, process.env.SECRET);

  paymentData = { ...paymentData, signature };
  try {
    const payment = await axios.post(process.env.ESEWAPAYMENT_URL, null, {
      params: paymentData,
    });
    const reqPayment = JSON.parse(safeStringify(payment));
    if (reqPayment.status === 200) {
      const transaction = new Transaction({
        product_id: productId,
        amount: amount,

      });
      await transaction.save();

      return res.send({
        url: reqPayment.request.res.responseUrl,
      });
    }
  } catch (error) {
    res.send(error);
  }
});

// Route to handle payment status update
app.post("/payment-status", async (req, res) => {
  const { product_id } = req.body; // Extract data from request body
  try {
    // Find the transaction by its signature
    const transaction = await Transaction.findOne({ product_id });

    if (!transaction) {
      return res.status(400).json({ message: "Transaction not found" });
    }

    const paymentData = {
      product_code: "EPAYTEST",
      total_amount: transaction.amount,
      transaction_uuid: transaction.product_id,
    };

    const response = await axios.get(
      process.env.ESEWAPAYMENT_STATUS_CHECK_URL,
      {
        params: paymentData,
      }
    );
    const paymentStatusCheck = JSON.parse(safeStringify(response));
    if (paymentStatusCheck.status === 200) {
      // Update the transaction status
      transaction.status = paymentStatusCheck.data.status;
      await transaction.save();
      res
        .status(200)
        .json({ message: "Transaction status updated successfully" });
    }
  } catch (error) {
    console.error("Error updating transaction status:", error);
    res.status(500).json({ message: "Server error", error: error.message });
  }
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Finally, lets update the Success.jsx page in the front-end to verify the payment status.

import React, { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import axios from "axios";

const Success = () => {
  const [isSuccess, setIsSuccess] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const navigate = useNavigate();
  const location = useLocation();

  // Create a new URLSearchParams object using the search string from location
  const queryParams = new URLSearchParams(location.search);
  const token = queryParams.get("data");

  // Decode the JWT without verifying the signature
  const decoded = base64Decode(token);

  const verifyPaymentAndUpdateStatus = async () => {
    try {
      const response = await axios.post(
        "http://localhost:3000/payment-status",
        {
          product_id: decoded.transaction_uuid,
        }
      );
      if (response.status === 200) {
        setIsLoading(false);
        setIsSuccess(true);
      }
    } catch (error) {
      setIsLoading(false);
      console.error("Error initiating payment:", error);
    }
  };
  useEffect(() => {
    verifyPaymentAndUpdateStatus();
  }, []);

  if (isLoading && !isSuccess) return <>Loading...</>;
  if (!isLoading && !isSuccess)
    return (
      <>
        <h1>Oops!..Error occurred on confirming payment</h1>
        <h2>We will resolve it soon.</h2>
        <button onClick={() => navigate("/")} className="go-home-button">
          Go to Homepage
        </button>
      </>
    );

  return (
    <div>
      <h1>Payment Successful!</h1>
      <p>Thank you for your payment. Your transaction was successful.</p>
      <button onClick={() => navigate("/")} className="go-home-button">
        Go to Homepage
      </button>
    </div>
  );
};

export default Success;
//using the utility fucntion in the same page for simplicity
//you can create a separate directory and serve it 
function base64Decode(base64) {
  // Convert Base64Url to standard Base64
  const standardBase64 = base64.replace(/-/g, "+").replace(/_/g, "/");
  // Decode Base64 to UTF-8 string
  const decoded = atob(standardBase64);
  return JSON.parse(decoded);
}

Conclusion

In this final part of our tutorial, we have ensured that our eSewa payment integration is complete and secure. By serving configuration files from .env, setting up MongoDB to store transactions, and verifying payment responses, we have laid a strong foundation for a reliable payment system in your MERN stack application.

Feel free to explore further enhancements and integrations, and as always, stay tuned for more tutorials. Happy coding!

Integrating eSewa Payment in a MERN Stack Web Application (part 1)

Samir Pokhrel — Sat, 24 Aug 2024 13:23:03 +0000

Integrating a payment gateway is an essential feature for any web application that deals with financial transactions. In this blog post, we'll walk through the process of integrating the eSewa payment gateway into a MERN stack web application. eSewa is a popular digital payment platform in Nepal that allows secure online transactions.

Overview of the MERN Stack

The MERN stack is a robust combination of technologies used to build full-stack web applications. It comprises:
MongoDB: A NoSQL database for storing application data.
Express.js: A minimal web application framework for Node.js.
React.js: A JavaScript library for building interactive user interfaces.
Node.js: A JavaScript runtime that executes JavaScript code on the server side.

Setting Up the Project

To get started, we'll set up a basic MERN stack application. If you already have a MERN application, you can skip ahead to the eSewa Integration section.
Step 1: Initialize the Backend with Express.js
Create a New Directory and Initialize NPM:

mkdir esewa-payment-integration
cd esewa-payment-integration
mkdir server
cd server
npm init -y

Install Necessary Packages:

npm install express cors body-parser axios

Set Up Express Server:

Create a file named app.js in the root directory:

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const bodyParser = require("body-parser");

const app = express();
const PORT = 3000;

app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/', (req, res) => {
  res.send('eSewa Payment Integration');
});
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

Step 2: Initialize the Frontend with React

Set Up React App:

Navigate back to the root directory(esewa-payment-integration) and create a new React app:

npm create vite client --template react
cd client
npm install axios react-router-dom

Set Up Basic Routing:

Edit src/App.jsx to set up basic routing:

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Failure from "./components/Failure";
import PaymentForm from "./components/PaymentForm";
import Success from "./components/Success";

function App() {
  return (
    <Router>
        <div className="App">
          <Routes>
            <Route path="/" element={<PaymentForm />} />
            <Route path="/payment-success" element={<Success />} />
            <Route path="/payment-failure" element={<Failure />} />
          </Routes>
        </div>
      </Router>
    );
}

export default App;

Create Payment, Success, Failure Components and CSS:

In the src/components folder, create and PaymentForm.jsx:
PaymentForm.jsx:

import React, { useState } from "react";
import axios from "axios";

const PaymentComponent = () => {
  const [amount, setAmount] = useState("");

  const handlePayment = async (e) => {
    e.preventDefault();

  };

  return (
    <div>
      <h1>eSewa Payment Integration</h1>

      <div className="form-container" onSubmit={handlePayment}>
        <form className="styled-form">
          <div className="form-group">
            <label htmlFor="Amount">Amount:</label>
            <input
              type="number"
              value={amount}
              onChange={(e) => setAmount(e.target.value)}
              required
              placeholder="Enter amount"
            />
          </div>

          <button type="submit" className="submit-button">
            Pay with eSewa
          </button>
        </form>
      </div>
    </div>
  );
};

export default PaymentComponent;

. Success.jsx :

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

const Success = () => {
  const navigate = useNavigate();
  return (
    <div>
      <h1>Payment Successful!</h1>
      <p>Thank you for your payment. Your transaction was successful.</p>
      <button onClick={() => navigate("/")} className="go-home-button">
        Go to Homepage
      </button>
    </div>
  );
};

export default Success;

. Failure.jsx :

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

const Failure = () => {
  const navigate = useNavigate();
  return (
    <div>
      <h1>Payment Failed!</h1>
      <p>There was an issue with your payment. Please try again.</p>
      <button onClick={() => navigate("/")} className="go-home-button">
        Go to Homepage
      </button>
    </div>
  );
};

export default Failure;

. index.css

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

/* Hide spinner for Chrome, Safari, Edge, and Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hide spinner for Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* FormComponent.css */

.form-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  /* background-color: #f9f9f9; */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.styled-form {
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
{
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

.submit-button {
  padding: 10px 15px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.submit-button:hover {
  background-color: #0056b3;
}

.go-home-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.go-home-button:hover {
  background-color: #0056b3;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}

Creating eSewa Payment Gateway route

Now, let's create the eSewa payment endpoint functionality into our application.
Step 3: Implement Payment Endpoint in Express
Add a payment route to app.js:

// eSewa Configuration //Later we will serve it from .env 
const esewaConfig = {
  merchantId: "EPAYTEST", // Replace with your eSewa Merchant ID
  successUrl: "http://localhost:5173/payment-success", //Replace with front-end success route page
  failureUrl: "http://localhost:5173/payment-failure", //Replace with front-end failure route page
  esewaPaymentUrl: "https://rc-epay.esewa.com.np/api/epay/main/v2/form",
  secret: "8gBm/:&EnhH.1/q",
};

// Route to initiate payment
app.post("/initiate-payment", async (req, res) => {
  const { amount, productId } = req.body;

  let paymentData = {
    amount,
    failure_url: esewaConfig.failureUrl,
    product_delivery_charge: "0",
    product_service_charge: "0",
    product_code: esewaConfig.merchantId,
    signed_field_names: "total_amount,transaction_uuid,product_code",
    success_url: esewaConfig.successUrl,
    tax_amount: "0",
    total_amount: amount,
    transaction_uuid: productId,
  };

  const data = `total_amount=${paymentData.total_amount},transaction_uuid=${paymentData.transaction_uuid},product_code=${paymentData.product_code}`;

  const signature = generateHmacSha256Hash(data, esewaConfig.secret); 

  paymentData = { ...paymentData, signature };
  try {
    const payment = await axios.post(esewaConfig.esewaPaymentUrl, null, {
      params: paymentData,
    });
    const reqPayment = JSON.parse(safeStringify(payment));
    if (reqPayment.status === 200) {
      return res.send({
        url: reqPayment.request.res.responseUrl,
      });
    }
  } catch (error) {
    res.send(error);
  }
});

const crypto = require("crypto");

/**
 * Generates a Base64-encoded HMAC SHA256 hash.
 *
 * @param {string} data - The data to be hashed.
 * @param {string} secret - The secret key used for hashing.
 * @returns {string} The Base64-encoded HMAC SHA256 hash.
 */
function generateHmacSha256Hash(data, secret) {
  if (!data || !secret) {
    throw new Error("Both data and secret are required to generate a hash.");
  }

  // Create HMAC SHA256 hash and encode it in Base64
  const hash = crypto
    .createHmac("sha256", secret)
    .update(data)
    .digest("base64");

  return hash;
}

function safeStringify(obj) {
  const cache = new Set();
  const jsonString = JSON.stringify(obj, (key, value) => {
    if (typeof value === "object" && value !== null) {
      if (cache.has(value)) {
        return; // Discard circular reference
      }
      cache.add(value);
    }
    return value;
  });
  return jsonString;
}

module.exports = { generateHmacSha256Hash, safeStringify };

Running the Application

Before running the node server include the nodemon package to watch the server everytime the file changes.

npm install nodemon --save-dev

//Update the package.json
{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "dev": "nodemon app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^1.7.5",
    "body-parser": "^1.20.2",
    "cors": "^2.8.5",
    "express": "^4.19.2"
  },
  "devDependencies": {
    "nodemon": "^3.1.4"
  }
}

2.** Run the node server **

npm run dev

Integrating eSewa Payment api on frontend

let's update the PaymentForm.jsx

import React, { useState } from "react";
import axios from "axios";
import { generateUniqueId } from "../utils/generateUniqueId";

const PaymentComponent = () => {
  const [amount, setAmount] = useState("");

  const handlePayment = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post(
        "http://localhost:3000/initiate-payment", //server payment route
        {
          amount,
          productId: generateUniqueId(),
        }
      );

      window.location.href = response.data.url;
    } catch (error) {
      console.error("Error initiating payment:", error);
    }
  };

  return (
    <div>
      <h1>eSewa Payment Integration</h1>

      <div className="form-container" onSubmit={handlePayment}>
        <form className="styled-form">
          <div className="form-group">
            <label htmlFor="Amount">Amount:</label>
            <input
              type="number"
              value={amount}
              onChange={(e) => setAmount(e.target.value)}
              required
              placeholder="Enter amount"
            />
          </div>

          <button type="submit" className="submit-button">
            Pay with eSewa
          </button>
        </form>
      </div>
    </div>
  );
};

export default PaymentComponent;

Create utils folder on the root of the project and generate a file generateUniqueId.js for generating unique id for product

export function generateUniqueId() {
  return `id-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
}

Conclusion

In Part 1 of this tutorial series, we set up a basic MERN stack application and integrated the eSewa payment gateway. In the next part, we will explore advanced features such as handling payment status callbacks, storing transaction data in MongoDB, serving config from .env file and improving security measures.
Stay tuned for Part 2 where we'll dive deeper into handling payment confirmations and improving the overall user experience!

Getting Started with React: A Beginner’s Guide

Samir Pokhrel — Sat, 24 Aug 2024 05:47:28 +0000

React is a powerful JavaScript library for building user interfaces, particularly single-page applications requiring a fast, interactive experience. Developed and maintained by Facebook, React has become a popular choice among developers due to its component-based architecture, reusable code, and the ability to manage the state of an application efficiently.

If you’re new to React, this guide will help you understand the basics and get started on your first React application.

What is React?

React is a JavaScript library used to create user interfaces (UIs) by breaking them down into components. A component in React is a reusable piece of code that defines how a section of the UI should look and behave. Components can be nested, managed, and handled independently, making complex UIs more manageable.

React uses a virtual DOM (Document Object Model) to enhance performance. The virtual DOM is a lightweight copy of the actual DOM. When a component’s state changes, React updates the virtual DOM first, compares it with a previous version, and only updates the actual DOM with the differences. This process, called reconciliation, makes React applications fast and efficient.

Key Concepts in React

Components: The building blocks of a React application. They can be class-based or functional. Functional components are simple JavaScript functions, while class components are ES6 classes that extend from React.Component.
JSX (JavaScript XML): A syntax extension for JavaScript that looks similar to HTML and is used in React to describe what the UI should look like. JSX makes it easier to write and add HTML in React.
State: An object that holds some information that may change over the component’s lifecycle. State is managed within the component (using useState in functional components or this.state in class components) and can influence what gets rendered.
Props (Properties): Read-only attributes passed from parent to child components. Props allow you to pass data and event handlers to child components, making components reusable and modular.
Lifecycle Methods: Special methods in class components that run at specific points in a component’s life (e.g., mounting, updating, unmounting). Functional components can use React Hooks like useEffect to mimic these lifecycle methods.
Hooks: Functions that let you “hook into” React state and lifecycle features from functional components. Some popular hooks are useState, useEffect, useContext, and useReducer.

Getting Started with React

To get started with React, you need to set up a development environment. Here’s how:

Step 1: Install Node.js and npm

React relies on Node.js, a JavaScript runtime, and npm (Node Package Manager) to manage dependencies. You can download and install Node.js from nodejs.org. npm is included with Node.js.

To check if you have Node.js and npm installed, run the following commands in your terminal:

node -v
npm -v

If these commands return version numbers, you’re good to go.

Step 2: Set Up a React Application Using Create React App

Create React App is an officially supported tool to create a single-page React application. It sets up your development environment so you can use the latest JavaScript features and provides a nice developer experience.

To create a new React application, run the following commands:

npx create-react-app my-app
cd my-app
npm start

npx create-react-app my-app sets up a new React project named "my-app" with all necessary configurations.
cd my-app moves into the project directory.
npm start runs the app in development mode and opens it in your default browser.
You should see a React welcome page in your browser, confirming that your setup is correct.

Step 3: Understand the Project Structure

Here’s a quick overview of the files and folders created by Create React App:

/public: Contains the index.html file, the entry point of your React application.
/src: Contains the JavaScript code for your application. The main files here are:
index.js: The JavaScript entry point, which renders the React application into the DOM.
App.js: The main component of your application.
You’ll mostly work inside the src folder, creating new components, managing state, and handling events.

Step 4: Create Your First Component

Let’s create a simple component to display a welcome message. Open the App.jsx file and modify it:

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Welcome to React!</h1>
      <p>This is your first React component.</p>
    </div>
  );
}
export default App;

This code defines a functional component called App that returns some JSX. Save the file and check your browser. You should see your welcome message.

Step 5: Add More Components

To understand how components work, let’s add another component. Create a new file named Greeting.jsx in the src folder and add the following code:

import React from 'react';

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

export default Greeting;

Now, modify App.jsx to include the Greeting component:

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

function App() {
  return (
    <div className="App">
      <h1>Welcome to React!</h1>
      <p>This is your first React component.</p>
      <Greeting name="John" />
    </div>
  );
}

export default App;

Save both files and check your browser. You should now see “Hello, John!” beneath your welcome message.

Step 6: Use State and Handle Events

Let’s add a button that changes the greeting message when clicked. Modify the Greeting component to use state:

import React, { useState } from 'react';

function Greeting(props) {
  const [message, setMessage] = useState('Hello');
  const handleClick = () => {
    setMessage('Hi');
  };
  return (
    <div>
      <h2>{message}, {props.name}!</h2>
      <button onClick={handleClick}>Change Greeting</button>
    </div>
  );
}

export default Greeting;

This code introduces a message state with a default value of "Hello." When the button is clicked, the handleClick function updates the state to "Hi," causing the component to re-render with the new message.

Conclusion

Congratulations! You’ve just built your first React application and learned the basics of React components, state management, and event handling. From here, you can explore more advanced concepts like context, routing, and Redux for state management.

React’s flexibility and simplicity make it a powerful tool for building modern web applications. Keep experimenting, building, and learning, and soon you’ll be creating complex, interactive UIs with ease.

Happy coding!