ReactJS(React):
-------
*ReactJS (React) is a popular JavaScript library for building user interfaces,
*Especially for single-page web applications (SPAs).
*It was developed by Facebook(now Meta)Software Engineer Jordan Walke.
React.JS History:-
-----------------
*Initial release to the Public (version 0.3.0) was in July 2013.
*Latest version of React.JS is 19.2.
*React.JS was first used in 2011 for Facebook's Newsfeed feature.
Features:-
--------
*React is a front-end JavaScript library.
*React is also known as React.js or ReactJS.
*React is a tool for building UI components.
*Reusable UI Components(Components based Architecture)
*use Virtual DOM(without loading page change contents)
Note:
state --- Data
props --- Data from parent to child
JSX --- JavaScript XML (HTML+Javascript+XML)
React Hooks --- only functions not use in class
Render --- Content change in Browser
Advantages:
----------
*Fast and efficient UI updates (Diffing Algorithm--minimum changes)
*Reusable components
*Easy to maintain large applications
*Large developer community
*Rich ecosystem of libraries
*Suitable for responsive and interactive web applications
ReactJS is commonly used for:
---------------------------
*E-commerce websites
*Social media applications
*Dashboards
*Single-page applications
*Online learning platforms
*Web portals
*Interactive forms and interfaces
*ReactJS helps developers build fast, interactive, and reusable user interfaces using JavaScript components.
How to create ReactJS and Run:-
-----------------------
step1: Install Node.js(select chocolatey(npm(Node Package Manager) ,VSStudio))
step2: (open Command Prompt and check Version)
node -v
npm -v
step2: create a React Project
1. open Command Prompt(Win+r---cmd)
2. npm create vite@latest my-react-app
3. Choose:
a. Framework: React
b. Variant: JavaScript
c. Linter: ESLint (javascript code)
4. Then:
a. cd my-react-app
b. npm install
step3: Start React
1. npm run dev
2. You will see something similar to:
Local: http://localhost:5173/
3. Open that address in your browser.
----------------------
(open already existing Reactjs):-
----------------------
Step1: Open command prompt
Step2: dir (check your react project)
Step3 : cd path-to-your-react-project
step4 : npm install
step5 : npm run dev
1. You will see something similar to:
Local: http://localhost:5173/
2. Open that address in your browser.
************************************************
JSX:-
---
*JSX stands for JavaScript XML.
*JSX allows us to write HTML in React.
*JSX makes it easier to write and add HTML in React.
step1 : Open App.jsx and type the following code(src folder)
-----
syntax for App.jsx:
--------------------
function App() {
return (
);
}
export default App;
Ex1:
App.jsx:-
-------
function App() {
return (
<div>
<marquee><h1>Welcome to My React Program</h1></marquee>
<p>My first React application</p>
</div>
);
}
export default App;
Step2:
-----
main.jsx:-
-------
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)
Step3:
-----
index.html:-
----------
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>my-react-app</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Step4: Open that address in your browser.
http://localhost:5173/
----------------------------------------
React Hooks
-----------
-Hooks allow functions to have access to state and other React features without using classes.
-Hooks are functions that let you "hook into" React state and lifecycle features from functional components.
Syntax:
------
const function_name=()=>{
....
....
};
----------------
Ex1: display message using Button click
function App() {
const showMessage = () => {
alert("Hello! This is a message.");
};
return <button onClick={showMessage}>Show Message</button>;
}
export default App;
---------------
Ex2: simple addition
function App() {
const add = () => {
const a = 10;
const b = 20;
const c = a + b;
alert("Addition is: " + c);
};
return (
<div>
<button onClick={add}>Check</button>
<h2>Addition</h2>
<p>Click the button to see the result.</p>
</div>
);
}
export default App;
-----------------------------------------
Ex3: Addition of two numbers using textbox
import { useState } from "react";
function App() {
const [num1, setNum1] = useState("");
const [num2, setNum2] = useState("");
const [sum, setSum] = useState(null);
const handleAdd = () => {
setSum(Number(num1) + Number(num2));
};
return (
<div>
<h2>Add Two Numbers</h2>
<input
type="number"
value={num1}
onChange={(e) => setNum1(e.target.value)}
placeholder="Enter first number"
/>
<input
type="number"
value={num2}
onChange={(e) => setNum2(e.target.value)}
placeholder="Enter second number"
/>
<button onClick={handleAdd}>Add</button>
{sum !== null && <h3>Result: {sum}</h3>}
</div>
);
}
export default App;
-----------------------
Ex3: Registeration Form using React
import { useState } from "react";
function RegistrationForm() {
const [formData, setFormData] = useState({
name: "",
email: "",
password: "",
age: "",
});
const [submittedData, setSubmittedData] = useState(null);
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
});
};
const handleSubmit = (e) => {
e.preventDefault();
setSubmittedData(formData);
};
return (
<div>
<h2>Registration Form</h2>
<form onSubmit={handleSubmit}>
<label>Name: </label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
/>
<br />
<br />
<label>Email: </label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
/>
<br />
<br />
<label>Password: </label>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
/>
<br />
<br />
<label>Age: </label>
<input
type="number"
name="age"
value={formData.age}
onChange={handleChange}
/>
<br />
<br />
<button type="submit">Register</button>
</form>
{submittedData && (
<div>
<h2>Registration Details</h2>
<p><strong>Name:</strong> {submittedData.name}</p>
<p><strong>Email:</strong> {submittedData.email}</p>
<p><strong>Password:</strong> {submittedData.password}</p>
<p><strong>Age:</strong> {submittedData.age}</p>
</div>
)}
</div>
);
}
export default RegistrationForm;
-----------------------------------------
#simple register form and display
import React, { useState } from "react";
import "./App.css";
function App() {
const [formData, setFormData] = useState({
name: "",
password: "",
gender: "",
hobbies: [],
city: "",
address: "",
});
const [submittedData, setSubmittedData] = useState(null);
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({
...formData,
[name]: value,
});
};
const handleHobbyChange = (e) => {
const { value, checked } = e.target;
if (checked) {
setFormData({
...formData,
hobbies: [...formData.hobbies, value],
});
} else {
setFormData({
...formData,
hobbies: formData.hobbies.filter((hobby) => hobby !== value),
});
}
};
const handleSubmit = (e) => {
e.preventDefault();
setSubmittedData(formData);
};
return (
<div className="container">
<div className="form-box">
<h2>Registration Form</h2>
<form onSubmit={handleSubmit}>
<label>Name</label>
<input
type="text"
name="name"
placeholder="Enter your name"
value={formData.name}
onChange={handleChange}
required
/>
<label>Password</label>
<input
type="password"
name="password"
placeholder="Enter password"
value={formData.password}
onChange={handleChange}
required
/>
<label>Gender</label>
<div className="options">
<label>
<input
type="radio"
name="gender"
value="Male"
onChange={handleChange}
required
/>
Male
</label>
<label>
<input
type="radio"
name="gender"
value="Female"
onChange={handleChange}
/>
Female
</label>
</div>
<label>Hobbies</label>
<div className="options">
<label>
<input
type="checkbox"
value="Reading"
onChange={handleHobbyChange}
/>
Reading
</label>
<label>
<input
type="checkbox"
value="Music"
onChange={handleHobbyChange}
/>
Music
</label>
<label>
<input
type="checkbox"
value="Sports"
onChange={handleHobbyChange}
/>
Sports
</label>
</div>
<label>City</label>
<select
name="city"
value={formData.city}
onChange={handleChange}
required
>
<option value="">Select City</option>
<option value="Coimbatore">Coimbatore</option>
<option value="Chennai">Chennai</option>
<option value="Madurai">Madurai</option>
<option value="Salem">Salem</option>
<option value="Trichy">Trichy</option>
</select>
<label>Address</label>
<textarea
name="address"
placeholder="Enter your address"
value={formData.address}
onChange={handleChange}
required
></textarea>
<button type="submit">Register</button>
</form>
</div>
{submittedData && (
<div className="display-box">
<h2>Registration Details</h2>
<p>
<strong>Name:</strong> {submittedData.name}
</p>
<p>
<strong>Password:</strong> {submittedData.password}
</p>
<p>
<strong>Gender:</strong> {submittedData.gender}
</p>
<p>
<strong>Hobbies:</strong>{" "}
{submittedData.hobbies.length > 0
? submittedData.hobbies.join(", ")
: "None"}
</p>
<p>
<strong>City:</strong> {submittedData.city}
</p>
<p>
<strong>Address:</strong> {submittedData.address}
</p>
</div>
)}
</div>
);
}
export default App;
------------------------
#register form in table format
import React, { useState } from "react";
import "./App.css";
function App() {
const [formData, setFormData] = useState({
name: "",
password: "",
gender: "",
hobbies: [],
city: "",
address: "",
});
const [data, setData] = useState([]);
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
});
};
const handleHobbies = (e) => {
const { value, checked } = e.target;
if (checked) {
setFormData({
...formData,
hobbies: [...formData.hobbies, value],
});
} else {
setFormData({
...formData,
hobbies: formData.hobbies.filter(
(hobby) => hobby !== value
),
});
}
};
const handleSubmit = (e) => {
e.preventDefault();
setData([
...data,
{
...formData,
hobbies: formData.hobbies.join(", "),
},
]);
setFormData({
name: "",
password: "",
gender: "",
hobbies: [],
city: "",
address: "",
});
};
return (
<div className="container">
<h1>Registration Form</h1>
<form onSubmit={handleSubmit}>
<table className="form-table">
<tbody>
<tr>
<td>Name</td>
<td>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="Enter Name"
required
/>
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
placeholder="Enter Password"
required
/>
</td>
</tr>
<tr>
<td>Gender</td>
<td>
<input
type="radio"
name="gender"
value="Male"
checked={formData.gender === "Male"}
onChange={handleChange}
/>
Male
<input
type="radio"
name="gender"
value="Female"
checked={formData.gender === "Female"}
onChange={handleChange}
/>
Female
</td>
</tr>
<tr>
<td>Hobbies</td>
<td>
<input
type="checkbox"
value="Reading"
checked={formData.hobbies.includes("Reading")}
onChange={handleHobbies}
/>
Reading
<input
type="checkbox"
value="Music"
checked={formData.hobbies.includes("Music")}
onChange={handleHobbies}
/>
Music
<input
type="checkbox"
value="Sports"
checked={formData.hobbies.includes("Sports")}
onChange={handleHobbies}
/>
Sports
</td>
</tr>
<tr>
<td>City</td>
<td>
<select
name="city"
value={formData.city}
onChange={handleChange}
required
>
<option value="">Select City</option>
<option value="Coimbatore">Coimbatore</option>
<option value="Chennai">Chennai</option>
<option value="Madurai">Madurai</option>
<option value="Salem">Salem</option>
<option value="Trichy">Trichy</option>
</select>
</td>
</tr>
<tr>
<td>Address</td>
<td>
<textarea
name="address"
value={formData.address}
onChange={handleChange}
placeholder="Enter Address"
required
></textarea>
</td>
</tr>
<tr>
<td colSpan="2">
<button type="submit">
Register
</button>
</td>
</tr>
</tbody>
</table>
</form>
{/* Display Data */}
{data.length > 0 && (
<div className="result">
<h2>Registration Details</h2>
<table className="data-table">
<thead>
<tr>
<th>Name</th>
<th>Password</th>
<th>Gender</th>
<th>Hobbies</th>
<th>City</th>
<th>Address</th>
</tr>
</thead>
<tbody>
{data.map((item, index) => (
<tr key={index}>
<td>{item.name}</td>
<td>{item.password}</td>
<td>{item.gender}</td>
<td>{item.hobbies}</td>
<td>{item.city}</td>
<td>{item.address}</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
);
}
export default App;
--------------------------
*************************************
Database connectivity
---------------------
-Connect between Frontend and backend
Backend--------------------------------------------Frontend
(Node.js + Express POST API + MySQL) (ReactJS)
-ReactJS cannot directly connect to a database like MySQL, MongoDB, or PostgreSQL
-Instead, you need a backend API (Node.js/Express, Python/Django, PHP, etc.) that connects to the database securely,
Ex:
React.js → Node.js/Express API → MySQL
Project Structure:
-----------------
1)
my-app/
├── frontend/ # React
└── backend/ # Node.js + Express + MySQL
2)
backend/
├── server.js
├── db.js
├── .env
└── package.json
3)
frontend/
├── src/
│ ├── App.jsx
│ └── main.jsx
├── package.json
└── ...
step1:
mkdir my-app
cd my-app
npm create vite@latest frontend -- --template react
cd frontend
npm install
(exit)
step2:
mkdir backend
cd backend
npm init -y
npm install express mysql2 cors dotenv
npm install --save-dev nodemon
Note:
express — creates the API server
mysql2 — connects Node.js to MySQL
cors — allows React to call the backend
dotenv — keeps database credentials in .env
nodemon — automatically restarts the server
step3: Create the Express server(Create backend/server.js)
const express = require("express");
const mysql = require("mysql2");
const cors = require("cors");
const app = express();
app.use(cors());
app.use(express.json());
const db = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database: "pranav"
});
db.connect((err) => {
if (err) {
console.error("MySQL connection failed:", err);
return;
}
console.log("Connected to MySQL");
});
app.post("/users", (req, res) => {
const { roll, name, city } = req.body;
const sql = `
INSERT INTO register (roll, name, city)
VALUES (?, ?, ?)
`;
db.query(sql, [roll, name, city], (err, result) => {
if (err) {
console.error(err);
return res.status(500).json({
message: "Failed to insert user"
});
}
res.status(201).json({
message: "User inserted successfully",
id: result.insertId
});
});
});
app.listen(5000, () => {
console.log("Server running on http://localhost:5000");
});
step4: (Run node server)
node server.js (DOS Prompt)
----------------Backend code end-------
step5: Create the React form(frontend/src/App.jsx)
import { useState } from "react";
function App() {
const [formData, setFormData] = useState({
roll: "",
name: "",
city: ""
});
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await fetch("http://localhost:5000/users", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(formData)
});
const data = await response.json();
if (response.ok) {
alert("User inserted successfully!");
setFormData({
roll: "",
name: "",
city: ""
});
} else {
alert(data.message);
}
} catch (error) {
console.error(error);
alert("Something went wrong");
}
};
return (
<div>
<h1>Register</h1>
<form onSubmit={handleSubmit}>
<div>
<label>Roll:</label>
<input type="text"
name="roll"
value={formData.roll}
onChange={handleChange}
/>
</div>
<br />
<div>
<label>Name:</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
/>
</div>
<br />
<div>
<label>City:</label>
<input
type="text"
name="city"
value={formData.city}
onChange={handleChange}
/>
</div>
<br />
<button type="submit">
Register
</button>
</form>
</div>
);
}
export default App;
step6:(Run React) - In the frontend directory
npm run dev
step7:Open the URL shown by Vite, usually:
http://localhost:5173
Note:
React Form
↓
fetch()
↓
POST http://localhost:5000/users
↓
Express API
↓
MySQL INSERT
↓
users table
***************************
