Jahab: ReactJS

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(

<App />

</StrictMode>,

)

Step3:

-----

index.html:-

----------

<!doctype html>

<head>

<title>my-react-app</title>

</head>

<body>

</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"

{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({

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>

<input

type="text"

name="name"

value={formData.name}

onChange={handleChange}

<br />

<label>Email: </label>

<input

type="email"

name="email"

value={formData.email}

onChange={handleChange}

<br />

<label>Password: </label>

<input

type="password"

name="password"

value={formData.password}

onChange={handleChange}

<br />

<input

type="number"

name="age"

value={formData.age}

onChange={handleChange}

<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({

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 (

<h2>Registration Form</h2>

<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>

<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>

<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>

<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 && (

<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({

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({

password: "",

gender: "",

hobbies: [],

city: "",

address: "",

});

};

return (

<h1>Registration Form</h1>

<tbody>

<tr>

<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>

<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>

</button>

</td>

</tr>

</tbody>

</table>

</form>

{/* Display Data */}

{data.length > 0 && (

<h2>Registration Details</h2>

<thead>

<tr>

<th>Password</th>

<th>Gender</th>

<th>Hobbies</th>

<th>Address</th>

</tr>

</thead>

<tbody>

{data.map((item, index) => (

<td>{item.password}</td>

<td>{item.gender}</td>

<td>{item.hobbies}</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:

-----------------

my-app/

├── frontend/ # React

└── backend/ # Node.js + Express + MySQL

backend/

├── server.js

├── db.js

├── .env

└── package.json

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: "",

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: "",

city: ""

});

} else {

alert(data.message);

}

} catch (error) {

console.error(error);

alert("Something went wrong");

}

};

return (

<div>

<h1>Register</h1>

<div>

<input type="text"

name="roll"

value={formData.roll}

onChange={handleChange}

</div>

<br />

<div>

<input

type="text"

name="name"

value={formData.name}

onChange={handleChange}

</div>

<br />

<div>

<input

type="text"

name="city"

value={formData.city}

onChange={handleChange}

</div>

<br />

</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

***************************

Jahab

Wednesday, 12 August 2026

ReactJS

No comments:

Post a Comment

ReactJS

Report Abuse