Node + NEXT.js Archives - Cody Paste

Bootstrap / HTML → Next.js (React JSX) Differences

Admin — Tue, 20 Jan 2026 06:54:38 +0000

🧾 Bootstrap / HTML → Next.js (React JSX) Differences

🔁 1️⃣ `class` → `className`

HTML / Bootstrap

Next.js / React

📌 Reason: class JS ka reserved word hai

🔁 2️⃣ `for` → `htmlFor`

🔁 3️⃣ `onclick` → `onClick`

❌ () nahi lagate (auto run ho jayega)

🔁 4️⃣ Inline CSS string → Object

📌 camelCase + double {}

🔁 5️⃣ `style` value → camelCase

🔁 6️⃣ `checked`, `selected` → boolean

🔁 7️⃣ `value` → state controlled

🔁 8️⃣ `href` → `Link`

🚀 Fast navigation, no reload

🔁 9️⃣ `img` → `Image` (recommended)

🔁 🔟 JS directly → `useEffect`

🔁 1️⃣1️⃣ `document / window` direct ❌

✅ Correct:

🔁 1️⃣2️⃣ `if else` HTML ❌ → JSX ternary

🔁 1️⃣3️⃣ Loop (`for`) → `map()`

🔁 1️⃣4️⃣ `data-*` attributes (same)

✅ Bootstrap data attributes same hi rehte hain

🔁 1️⃣5️⃣ Self closing tags

🔁 1️⃣6️⃣ `readonly` → `readOnly`

🔁 1️⃣7️⃣ `tabindex` → `tabIndex`

🔁 1️⃣8️⃣ Comments

🔁 1️⃣9️⃣ `dangerouslySetInnerHTML`

__html: html }} />

⚠️ XSS risk

🔁 2️⃣0️⃣ Bootstrap icons / JS plugins

CSS → normal import
JS → useEffect only

🧠 One-look Cheatsheet (exam style)

HTML	Next.js
class	className
for	htmlFor
onclick	onClick
style=””	style={{}}
a href	Link
img	Image
script	useEffect
document	useRef

🧠 Golden line (notes me likh lo)

“HTML jaisa dikhta hai, par JSX JavaScript hai”

The post Bootstrap / HTML → Next.js (React JSX) Differences appeared first on Cody Paste.

React + Next.js – COMPLETE HOOKS & IMPORTANT CONCEPTS (NOTES)

Admin — Tue, 20 Jan 2026 06:24:23 +0000

🔥 React Core Hooks (Must know)

HOOK	Power	Detail
useState	Yaad rakhna	Component ke andar value store & update (counter, toggle, form, modal)
useEffect	Time ke baad kaam	Render ke baad code run (API, bootstrap JS, events)
useContext	Global baat	Global state share (user, cart, theme)
useReducer	Rule-based state	Complex state logic (cart, multi-actions)
useRef	Cheez pakadna	DOM reference, timer, previous value
useMemo	Dimag bachana	Heavy calculation optimize
useCallback	Function freeze	Unnecessary re-render se bachav

🟢 Next.js Specific Hooks (VERY IMPORTANT)

HOOK	Power	Detail
“use client”	Browser me chalana	Hooks & browser APIs allow karta hai
useParams	URL data	Dynamic route value nikalna
useRouter	Navigation	Programmatic redirect (`push`, `replace`)
useSearchParams	Query string	`?page=1&sort=price` jaise params
usePathname	Current URL	Active menu highlight

🟡 Special Rendering Files (Next.js Concepts)

File	Power	Detail
layout.tsx	Common layout	Header / footer wrapper
page.tsx	Route	URL banata hai
loading.tsx	Loader	Page load ke beech UI
error.tsx	Error UI	Page crash fallback
not-found.tsx	404	Custom not found page

🔵 Data & Rendering Concepts (Important)

Concept	Matlab
Server Component	Default, fast, SEO
Client Component	Interactive UI
SSR	Server Side Rendering
CSR	Client Side Rendering
Hydration	Server HTML → React
Props	Parent → Child data

🟣 Navigation & UI Utilities

Term	Use
Link	Fast navigation
Image	Optimized images
Metadata	SEO (title, description)

🧠 Custom Hook (Advanced but IMPORTANT)

Term	Detail
Custom Hook	Apna hook banana (`useSomething`) to reuse logic

Example:

The post React + Next.js – COMPLETE HOOKS & IMPORTANT CONCEPTS (NOTES) appeared first on Cody Paste.

NODE.JS + MySQL CONNECTION

Admin — Tue, 13 Jan 2026 06:26:37 +0000

1️⃣ MySQL Server Check (XAMPP)

XAMPP Control Panel open karo
MySQL → Start (Running hona chahiye ✅)

phpMyAdmin open:

2️⃣ Database & Table Create

Database:

Sample Table:

👉 Ye table CRUD ke liye use hogi.

3️⃣ DB Config Folder

Path confirm:

Is folder ke andar file banao 👇

📄 src/db/db.js

🧠 CI4 mapping:

4️⃣ DB Connection Test (IMPORTANT)

📄 src/app.js me upar add karo:

⚠️ Path dhyaan se:

5️⃣ Server Restart

Terminal me:

Expected Output:

👉 Matlab:

Node server running ✅
MySQL connected ✅

The post NODE.JS + MySQL CONNECTION appeared first on Cody Paste.

NODE.JS BASIC SETUP – (BEGINNER)

Admin — Tue, 13 Jan 2026 06:01:40 +0000

1️⃣ Node.js & npm Installation Check

Command Prompt / Terminal:

Expected Output:

👉 Agar version aa raha hai → Node & npm installed ✅

2️⃣ Project Folder Location

Node project kahin bhi ho sakta hai (htdocs zaroori nahi)

Example:

Node ko folder location se koi farak nahi padta.

3️⃣ Project Open in VS Code

VS Code → File → Open Folder
Select:

Terminal open:

Ctrl +


Terminal path check:






PS E:\node-project\node-shop>




4️⃣ Node Project Initialize






npm init -y



👉 Ye package.json banata hai
(CI4 ke composer.json jaisa)

5️⃣ Required Packages Install






npm install express mysql2 dotenv cors

npm install -D nodemon



Packages use:


express → framework


mysql2 → MySQL connection


dotenv → env config


cors → API access


nodemon → auto server restart (dev)



6️⃣ Folder Structure (CI4 style)






node-shop/

 ├─ src/

 │  ├─ controllers/   → Logic (CI4 Controllers)

 │  ├─ routes/        → Routes (CI4 Routes.php)

 │  ├─ db/            → Database config

 │  └─ app.js         → Entry point

 ├─ .env

 ├─ package.json

 └─ node_modules/




7️⃣ app.js (First Node Server)
📄 src/app.js

const express = require('express');

const app = express();
app.use(express.json());
app.get('/', (req, res) => {

  res.send('Node server chal raha hai bhai 😎');

});

const PORT = 3000; app.listen(PORT, () => { console.log(Server running on http://localhost:${PORT}`); });

8️⃣ package.json Scripts Setup

📄 package.json me scripts section:

👉 npm run dev = development mode
👉 npm start = normal mode

9️⃣ Server Run Command

Expected Terminal Output:

🔟 Browser Test

Open browser:

Output:

👉 Matlab:

Node working ✅
Express working ✅
Setup complete ✅

🧠 CI4 → Node Mindset Mapping (Quick)

CI4	Node
Apache + index.php	Node server + app.js
Routes.php	routes/*.js
Controllers	controllers/*.js
php spark serve	npm run dev

🎯 Current Status

✔ Node installed
✔ npm working
✔ Project setup
✔ Express server running

🔜 NEXT TOPIC (Future Notes)

MySQL connection (XAMPP)
CRUD (GET / POST / PUT / DELETE)
Admin panel + User website
JWT login
E-commerce flow

The post NODE.JS BASIC SETUP – (BEGINNER) appeared first on Cody Paste.

Node + NEXT.js Archives - Cody Paste

Bootstrap / HTML → Next.js (React JSX) Differences

🧾 Bootstrap / HTML → Next.js (React JSX) Differences

🔁 1️⃣ class → className

HTML / Bootstrap

Next.js / React

🔁 2️⃣ for → htmlFor

🔁 3️⃣ onclick → onClick

🔁 4️⃣ Inline CSS string → Object

🔁 5️⃣ style value → camelCase

🔁 6️⃣ checked, selected → boolean

🔁 7️⃣ value → state controlled

🔁 8️⃣ href → Link

🔁 9️⃣ img → Image (recommended)

🔁 🔟 JS directly → useEffect

🔁 1️⃣1️⃣ document / window direct ❌

🔁 1️⃣2️⃣ if else HTML ❌ → JSX ternary

🔁 1️⃣3️⃣ Loop (for) → map()

🔁 1️⃣4️⃣ data-* attributes (same)

🔁 1️⃣5️⃣ Self closing tags

🔁 1️⃣6️⃣ readonly → readOnly

🔁 1️⃣7️⃣ tabindex → tabIndex

🔁 1️⃣8️⃣ Comments

🔁 1️⃣9️⃣ dangerouslySetInnerHTML

🔁 2️⃣0️⃣ Bootstrap icons / JS plugins

🧠 One-look Cheatsheet (exam style)

🧠 Golden line (notes me likh lo)

React + Next.js – COMPLETE HOOKS & IMPORTANT CONCEPTS (NOTES)

🔥 React Core Hooks (Must know)

🟢 Next.js Specific Hooks (VERY IMPORTANT)

🟡 Special Rendering Files (Next.js Concepts)

🔵 Data & Rendering Concepts (Important)

🟣 Navigation & UI Utilities

🧠 Custom Hook (Advanced but IMPORTANT)

NODE.JS + MySQL CONNECTION

1️⃣ MySQL Server Check (XAMPP)

2️⃣ Database & Table Create

Database:

Sample Table:

3️⃣ DB Config Folder

4️⃣ DB Connection Test (IMPORTANT)

5️⃣ Server Restart

Expected Output:

NODE.JS BASIC SETUP – (BEGINNER)

1️⃣ Node.js & npm Installation Check

Command Prompt / Terminal:

Expected Output:

2️⃣ Project Folder Location

3️⃣ Project Open in VS Code

4️⃣ Node Project Initialize

5️⃣ Required Packages Install

Packages use:

6️⃣ Folder Structure (CI4 style)

7️⃣ app.js (First Node Server)

8️⃣ package.json Scripts Setup

9️⃣ Server Run Command

Expected Terminal Output:

🔟 Browser Test

Output:

🧠 CI4 → Node Mindset Mapping (Quick)

🎯 Current Status

🔜 NEXT TOPIC (Future Notes)

🔁 1️⃣ `class` → `className`

🔁 2️⃣ `for` → `htmlFor`

🔁 3️⃣ `onclick` → `onClick`

🔁 5️⃣ `style` value → camelCase

🔁 6️⃣ `checked`, `selected` → boolean

🔁 7️⃣ `value` → state controlled

🔁 8️⃣ `href` → `Link`

🔁 9️⃣ `img` → `Image` (recommended)

🔁 🔟 JS directly → `useEffect`

🔁 1️⃣1️⃣ `document / window` direct ❌

🔁 1️⃣2️⃣ `if else` HTML ❌ → JSX ternary

🔁 1️⃣3️⃣ Loop (`for`) → `map()`

🔁 1️⃣4️⃣ `data-*` attributes (same)

🔁 1️⃣6️⃣ `readonly` → `readOnly`

🔁 1️⃣7️⃣ `tabindex` → `tabIndex`

🔁 1️⃣9️⃣ `dangerouslySetInnerHTML`