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

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

🔁 1️⃣ class → className

HTML / Bootstrap

<div class="container mt-3"></div>

Next.js / React

<div className="container mt-3"></div>

📌 Reason: class JS ka reserved word hai

🔁 2️⃣ for → htmlFor

<label for="email">Email</label>
<label htmlFor="email">Email</label>

🔁 3️⃣ onclick → onClick

<button onclick="openModal()">Click</button>
<button onClick={openModal}>Click</button>

❌ () nahi lagate (auto run ho jayega)

🔁 4️⃣ Inline CSS string → Object

<div style="color:red; margin-top:10px"></div>
<div style={{ color: "red", marginTop: "10px" }}></div>

📌 camelCase + double {}

🔁 5️⃣ style value → camelCase

background-color
backgroundColor

🔁 6️⃣ checked, selected → boolean

<input type="checkbox" checked>
<input type="checkbox" checked={true} />

🔁 7️⃣ value → state controlled

<input value="Vipul">
<input value={name} onChange={e => setName(e.target.value)} />

🔁 8️⃣ href → Link

<a href="/about">About</a>
import Link from "next/link";

<Link href="/about">About</Link>

🚀 Fast navigation, no reload

🔁 9️⃣ img → Image (recommended)

<img src="/logo.png" />
import Image from "next/image";

<Image src="/logo.png" width={100} height={40} alt="logo" />

🔁 🔟 JS directly → useEffect

<script src="bootstrap.js"></script>
useEffect(() => {
import("bootstrap/dist/js/bootstrap.bundle.min.js");
}, []);

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

document.getElementById("id");

✅ Correct:

useRef()

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

<div>condition ? show : hide</div>
{isOpen ? <Modal /> : null}

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

<li>Item</li>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}

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

<button data-bs-toggle="modal"></button>
<button data-bs-toggle="modal"></button>

✅ Bootstrap data attributes same hi rehte hain

🔁 1️⃣5️⃣ Self closing tags

<input>
<input />

🔁 1️⃣6️⃣ readonly → readOnly

<input readonly>
<input readOnly />

🔁 1️⃣7️⃣ tabindex → tabIndex

<div tabindex="0"></div>
<div tabIndex={0}></div>

🔁 1️⃣8️⃣ Comments

<!-- comment -->
{/* comment */}

🔁 1️⃣9️⃣ dangerouslySetInnerHTML

<div>HTML</div>
<div 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”

Leave a Reply

Your email address will not be published. Required fields are marked *