Posts

Showing posts from January, 2026

Experiment 10: ReactJS – Render HTML, JSX, Components – function & Class

  Write a program to render HTML to a web page. Create a React Application Open Command Prompt / Terminal and run: npx create-react-app myapp cd myapp npm start Browser opens automatically at: http://localhost:3000 React is successfully installed! myapp  ├── node_modules  ├── public  │    └── index.html  ├── src  │    ├── App.js  │    ├── index.js  │    └── App.css  └── package.json index.html <!DOCTYPE html> <html> <head>   <title>ReactJS – Render HTML</title>   <!-- React CDN -->   <script src="https://unpkg.com/react@18/umd/react.development.js"></script>   <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>   <!-- Babel -->   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body>   <h2>ReactJS Experimen...
Post a Comment
Read more

INTRODUCTION TO REACT.JS

BASIC INTRODUCTION TO REACT.JS React.js is a popular JavaScript library used to build user interfaces, especially for web applications. It was developed by Facebook and is widely used to create fast, interactive, and dynamic web pages. Instead of updating the entire web page, React updates only the parts of the screen that change, which makes applications feel quicker and smoother. React works by breaking the user interface into small, reusable pieces called components. Each component controls its own structure and behavior, making the code easier to understand and manage. React uses a syntax called JSX, which looks like HTML but is written inside JavaScript, helping developers design and control the interface in one place. React.js is widely adopted because it is flexible, easy to learn, and supported by a large community. It can be used to build simple websites as well as large, complex applications. With strong tool support and compatibility with modern web technologies, React has b...
Post a Comment
Read more

Experiment 9: ExpressJS – Database, RESTful APIs

Write a program to connect MongoDB database using Mangoose and perform CRUD operations. run the following commands in command prompt in your project folder npm  install --save mongoose@6.0 npm install --save pug npm install --save body-parser npm install --save multer server.js var express = require ( 'express' ); var bodyParser = require ( 'body-parser' ); var mongoose = require ( 'mongoose' );   // Import mongoose var multer = require ( 'multer' ); var upload = multer (); var app = express (); // Connect to MongoDB (Replace <your_connection_string> with your actual MongoDB URI) mongoose . connect ( 'mongodb://127.0.0.1:27017/library1' , { useNewUrlParser : true , useUnifiedTopology : true })     . then (() => console . log ( 'Connected to MongoDB' ))     . catch ( err => console . error ( 'MongoDB connection error:' , err )); // Define Mongoose Schema var personSchema = new mongoose . Sche...
Post a Comment
Read more

Experiment 8: ExpressJS – Cookies, Sessions, Authentication

Write a program for session management using cookies and sessions. npm init -y npm install express cookie-parser express-session app.js const express = require("express"); const cookieParser = require("cookie-parser"); const session = require("express-session"); const app = express(); // Middleware app.use(cookieParser()); app.use(express.urlencoded({ extended: true })); // Session middleware app.use(   session({     secret: "mySecretKey",     resave: false,     saveUninitialized: true,     cookie: { maxAge: 60000 } // 1 minute   }) ); // Home page app.get("/", (req, res) => {   res.send(`     <h2>Session Management Demo</h2>     <a href="/set-cookie">Set Cookie</a><br><br>     <a href="/get-cookie">Get Cookie</a><br><br>     <a href="/set-session">Set Session</a><br><br>     <a href="/get-sessi...
Post a Comment
Read more

Experiment 7: ExpressJS – Templating, Form Data

  Write a program using templating engine. Templating Engine in Express.js A templating engine allows us to generate dynamic HTML pages by combining static HTML with server-side data . Instead of writing multiple static HTML files, templates enable reusability and dynamic content rendering. In Express.js , templating engines help separate: Business logic (JavaScript in server) Presentation logic (HTML view) This follows the MVC (Model–View–Controller) concept, where: Model → data View → template (EJS, Pug, Handlebars) Controller → Express routes Why use a templating engine? Dynamic content rendering Code reusability (layouts, partials) Cleaner and maintainable code Easy data binding between server and UI Common templating engines used with Express.js Engine Description EJS HTML-like syntax, easy to learn Pug Indentation-based, concise Handlebars Logic-less templates Install Packages npm init -y npm install express ejs Folder structure tem...
Post a Comment
Read more