Here's a clear comparison between Class Components and Functional Components in React:
Functional Components are preferred in modern React:
React team recommends hooks
Cleaner, shorter syntax
Better performance patterns
Easier to test and reuse logic
Components of MERN Stack
React.js – Handles the frontend: displays UI and sends user requests (e.g., form submission).
Express.js – Receives requests from React via HTTP (usually using fetch or axios), handles routes.
Node.js – Runs the server and integrates Express.
MongoDB – Stores and retrieves data requested by Express, which is then sent back to React.
Form enhancement and validation
A form can be enhanced by styling, having placeholders, validation of input and submitting the form only when all inputs are in order.<!DOCTYPE html>
<html>
<head>
<title>Simple Form</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<h3>Simple Form</h3>
<form id="myForm">
Name: <input type="text" id="name" placeholder=”type name”><br>
<span id="nameError" class="error"></span><br>
Email: <input type="text" id="email" placeholder=”type email”><br>
<span id="emailError" class="error"></span><br>
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault(); // stop form from submitting
// Clear previous errors
document.getElementById('nameError').textContent = ' ';
document.getElementById('emailError').textContent = ' ';
// Get values
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
let valid = true;
// Check name
if (name.trim() === ' ') {
document.getElementById('nameError').textContent = 'Name is required';
valid = false;
}
// Basic email check (just '@' and '.')
if (email.indexOf('@') === -1 || email.indexOf('.') === -1) {
document.getElementById('emailError').textContent = 'Invalid email';
valid = false;
}
if (valid) {
alert('Form submitted');
}
});
</script>
</body>
</html>
What is Event Delegation and how does it work?
Event delegation is a technique where a single event listener is added to a parent element instead of each child element individually. It takes advantage of event bubbling in the DOM.
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
// Get the parent element
const list = document.getElementById('myList');
// Attach a single click listener to the parent
list.addEventListener('click', function(event) {
// Check if a list item (li) was clicked
if (event.target && event.target.nodeName === 'LI') {
alert('You clicked: ' + event.target.textContent);
}
});
We’ll build:
<form>
<label></label>
<ul>
<li></li>
<li></li>
</ul>
</form>
JavaScript Code:
const form = document.createElement('form');
const label = document.createElement('label');
const ul = document.createElement('ul');
const li1 = document.createElement('li');
const li2 = document.createElement('li');
// Build the structure
ul.appendChild(li1);
ul.appendChild(li2);
form.appendChild(label);
form.appendChild(ul);
// Attach to the page (e.g., body)
document.body.appendChild(form);
How Does This Relate to React?
In React, React.createElement() is a virtual version of this DOM API.
For example:
React.createElement('form', null,
React.createElement('label', null),
React.createElement('ul', null,
React.createElement('li', null),
React.createElement('li', null)
)
)
React uses this behind the scenes to build a Virtual DOM, which is then efficiently synced with the real DOM.
