April 18, 2026

React & Node.js Programs

🔷 1. React Counter App (Functional Component)

✅ Question:

Create a counter app using functional components in React.

💻 Solution:

import React, { useState } from "react";

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

  return (
    <div style={{ textAlign: "center" }}>
      <h2>Counter App</h2>
      <h3>{count}</h3>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

export default Counter;

🧠 Explanation:

useState is used to manage state
Buttons update count dynamically
Functional component approach (modern React)

🔷 2. Node.js File Operations (Read & Write)

✅ Question:

Create a Node.js application to perform read and write operations.

💻 Solution:

const fs = require("fs");

// Write File
fs.writeFileSync("test.txt", "Hello from Node.js");

// Read File
const data = fs.readFileSync("test.txt", "utf-8");

console.log(data);

🧠 Explanation:

writeFileSync() creates/writes file
readFileSync() reads file content
Synchronous operations used for simplicity

🔷 3. React Toggle Visibility

✅ Question:

Develop a program to toggle the visibility of content using state in React.

💻 Solution:

import React, { useState } from "react";

function Toggle() {
  const [show, setShow] = useState(true);

  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle</button>
      {show && <p>This content is visible</p>}
    </div>
  );
}

export default Toggle;

🧠 Explanation:

Boolean state controls visibility
Conditional rendering using &&

🔷 4. Change Background Color

✅ Question:

Change background color on button click using state in React.

💻 Solution:

import React, { useState } from "react";

function BgColor() {
  const [color, setColor] = useState("white");

  return (
    <div style={{ backgroundColor: color, height: "100vh" }}>
      <button onClick={() => setColor("lightblue")}>Change Color</button>
    </div>
  );
}

export default BgColor;

🧠 Explanation:

State controls CSS dynamically
Inline styling used

🔷 5. React Product Card (Props)

✅ Question:

Create a product card component using props.

💻 Solution:

import React from "react";

function ProductCard({ productName, price, imageUrl }) {
  return (
    <div style={{ border: "1px solid #ccc", padding: "10px" }}>
      <img src={imageUrl} alt={productName} width="100" />
      <h3>{productName}</h3>
      <p>Price: ₹{price}</p>
    </div>
  );
}

export default ProductCard;

🧠 Explanation:

Props used for dynamic data
Reusable component

🔷 6. React Todo Item Component

✅ Question:

Build a todo item component using props.

💻 Solution:

import React from "react";

function TodoItem({ task, completed, onToggle }) {
  return (
    <div>
      <input type="checkbox" checked={completed} onChange={onToggle} />
      <span style={{ textDecoration: completed ? "line-through" : "none" }}>
        {task}
      </span>
    </div>
  );
}

export default TodoItem;

🧠 Explanation:

Controlled checkbox
Conditional styling

🔷 7. User Profiles List

✅ Question:

Display a list of user profiles using props.

💻 Solution:

import React from "react";

function Profiles({ profiles }) {
  return (
    <div>
      {profiles.map((user, index) => (
        <div key={index}>
          <h4>{user.name}</h4>
          <p>{user.email}</p>
        </div>
      ))}
    </div>
  );
}

export default Profiles;

🧠 Explanation:

Uses map() for rendering lists
Props pass array data

🔷 8. React List Rendering using map()

✅ Question:

Render list of items using map function.

💻 Solution:

import React from "react";

function List() {
  const items = ["Apple", "Banana", "Mango"];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default List;

🧠 Explanation:

map() iterates array
Each item rendered dynamically

🔷 9. Node.js File Operations (Read & Append)

✅ Question:

Create a Node.js application to perform read and append operations.

💻 Solution:

const fs = require("fs");

// Append Data
fs.appendFileSync("test.txt", "\nAppended Text");

// Read File
const data = fs.readFileSync("test.txt", "utf-8");

console.log(data);

🧠 Explanation:

appendFileSync() adds data
File content preserved

Viva Questions

🔷 React (Core Concepts)

1. What is React?

React is a JavaScript library used for building user interfaces, especially single-page applications. It allows developers to create reusable UI components and efficiently update the DOM using a virtual DOM mechanism. React improves performance and code maintainability.

2. What is Virtual DOM?

Virtual DOM is a lightweight copy of the actual DOM. React updates the virtual DOM first, compares it with the previous version, and only updates changed elements in the real DOM. This improves performance and reduces unnecessary rendering.

3. What are components in React?

Components are reusable pieces of UI in React. They can be functional or class-based and help in breaking down complex UIs into manageable parts. Each component can maintain its own state and receive props.

4. What is JSX?

JSX stands for JavaScript XML and allows writing HTML-like syntax inside JavaScript. It makes UI code more readable and expressive. JSX is compiled into JavaScript using tools like Babel.

5. What are props in React?

Props (properties) are used to pass data from one component to another. They are read-only and help make components reusable and dynamic. Props allow parent components to communicate with child components.

6. What is state in React?

State is a built-in object used to manage dynamic data in a component. It allows components to update and re-render when data changes. Unlike props, state is mutable and managed within the component.

7. Difference between props and state?

Props are passed from parent to child and are immutable, while state is managed within the component and can change over time. Props are used for configuration, whereas state handles dynamic data.

8. What is useState hook?

useState is a React hook that allows functional components to manage state. It returns a state variable and a function to update it. It replaces class-based state management.

9. What is conditional rendering?

Conditional rendering means displaying UI elements based on certain conditions. It is achieved using operators like &&, ternary (? :), or if statements. It helps create dynamic interfaces.

10. What is list rendering?

List rendering is displaying multiple elements using arrays and the map() function. Each item must have a unique key to help React identify changes efficiently.

🔷 Advanced React Concepts

11. What is component lifecycle?

Component lifecycle refers to different stages of a component: mounting, updating, and unmounting. These stages allow execution of code at specific times using lifecycle methods or hooks.

12. What is Redux?

Redux is a state management library used to manage global state in applications. It uses concepts like store, actions, and reducers to maintain predictable state changes.

13. What is React Router?

React Router is used for navigation in React applications. It allows switching between components without reloading the page, enabling single-page applications.

14. What is AJAX?

AJAX allows asynchronous communication with a server without reloading the page. It is used to fetch or send data dynamically in web applications.

15. What is form handling in React?

Form handling involves managing user input using controlled components. State is used to store input values, and event handlers update state accordingly.

🔷 Node.js Concepts

16. What is Node.js?

Node.js is a runtime environment that allows JavaScript to run on the server side. It is built on Chrome’s V8 engine and uses an event-driven, non-blocking model.

17. What are features of Node.js?

Node.js is asynchronous, event-driven, single-threaded, and highly scalable. It is fast due to V8 engine and suitable for real-time applications.

18. What is event loop?

Event loop is a mechanism that handles asynchronous operations in Node.js. It continuously checks the call stack and callback queue to execute tasks efficiently.

19. What is non-blocking I/O?

Non-blocking I/O means operations do not block execution. Node.js continues executing other tasks while waiting for I/O operations to complete.

20. What is module in Node.js?

A module is a reusable block of code. Node.js uses modules to organize applications, and they can be core, local, or third-party modules.

🔷 Node.js Modules

21. What is require()?

require() is used to import modules in Node.js. It allows accessing functions and variables defined in other files.

22. What is module.exports?

module.exports is used to export functions or objects from a module so that they can be used in other files.

23. Types of modules in Node.js?

There are three types: core modules (built-in), local modules (user-defined), and third-party modules (installed via npm).

24. What is Buffer?

Buffer is used to handle binary data directly. It is useful for file operations, streams, and network communication.

25. What is file system module?

The fs module allows reading, writing, updating, and deleting files. It supports both synchronous and asynchronous operations.

🔷 NPM (Node Package Manager)

26. What is NPM?

NPM is a package manager for Node.js used to install, update, and manage dependencies. It has a large repository of packages.

27. What is package.json?

package.json is a configuration file that stores project metadata, dependencies, scripts, and version information.

28. Difference between global and local installation?

Local installation installs packages in a project folder, while global installation installs them system-wide for command-line use.

29. What is dependency?

A dependency is a package required by a project to function properly. It is listed in package.json.

30. What is devDependency?

devDependencies are packages used only during development, such as testing tools and build tools.

31. How to update packages?

Packages can be updated using npm update or installing a newer version using npm install package@latest.

🔷 Web & HTTP Module

32. What is HTTP module?

HTTP module is used to create web servers in Node.js. It handles requests and sends responses.

33. What is request and response?

Request is sent by the client, and response is returned by the server. They form the basis of web communication.

34. What is REST API?

REST API is an architectural style used for communication between client and server using HTTP methods like GET, POST, PUT, DELETE.

🔷 Frontend (Bootstrap, Flexbox, Grid)

35. What is mobile-first design?

Mobile-first design means designing for mobile devices first and then scaling up for larger screens. It improves performance and usability.

36. What is Bootstrap?

Bootstrap is a CSS framework used to design responsive websites quickly. It provides pre-built components and grid system.

37. What is grid system in Bootstrap?

Bootstrap grid system divides the page into 12 columns, allowing responsive layouts across devices.

38. What is Flexbox?

Flexbox is a layout model used for one-dimensional layouts. It helps align and distribute space among elements.

39. What is CSS Grid?

CSS Grid is a two-dimensional layout system for designing complex layouts using rows and columns.

40. Difference between Flexbox and Grid?

Flexbox is one-dimensional (row/column), while Grid is two-dimensional (rows and columns). Grid is used for complex layouts.

🔷 Advanced Concepts

41. What are breakpoints?

Breakpoints are screen sizes where layout changes using media queries. They help make responsive designs.

42. What is responsive design?

Responsive design ensures a website adapts to different screen sizes. It improves user experience across devices.

43. What is event handling in React?

Event handling allows responding to user actions like clicks and inputs. It is done using event listeners in JSX.

44. What is component reusability?

Reusability means using the same component multiple times with different data. It reduces code duplication.

45. What is API integration?

API integration allows applications to communicate with external services to fetch or send data.

46. What is JSON?

JSON is a lightweight data format used for data exchange between client and server.

47. What is middleware in Node.js?

Middleware functions execute during request-response cycle. They can modify request or response.

48. What is Express.js?

Express.js is a web framework for Node.js that simplifies server creation and routing.

49. What is routing?

Routing defines how an application responds to client requests based on URL and method.

50. What is CRUD?

CRUD stands for Create, Read, Update, Delete operations used to manage data in applications.

51. What is full stack development?

Full stack development involves both frontend and backend development. It includes UI, server, database, and APIs.