<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Cody Paste</title>
	<atom:link href="https://www.codypaste.com/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.codypaste.com/</link>
	<description>THE WEB PLAYGROUND</description>
	<lastBuildDate>Tue, 20 Jan 2026 06:54:38 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>

<image>
	<url>https://www.codypaste.com/wp-content/uploads/2022/12/cropped-codypaste-32x32.png</url>
	<title>Cody Paste</title>
	<link>https://www.codypaste.com/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Bootstrap / HTML → Next.js (React JSX) Differences</title>
		<link>https://www.codypaste.com/bootstrap-html-%e2%86%92-next-js-react-jsx-differences/</link>
					<comments>https://www.codypaste.com/bootstrap-html-%e2%86%92-next-js-react-jsx-differences/?noamp=mobile#respond</comments>
		
		<dc:creator><![CDATA[Admin]]></dc:creator>
		<pubDate>Tue, 20 Jan 2026 06:54:38 +0000</pubDate>
				<category><![CDATA[Node + NEXT.js]]></category>
		<guid isPermaLink="false">https://www.codypaste.com/?p=1291</guid>

					<description><![CDATA[<p>🧾 Bootstrap / HTML → Next.js (React JSX) Differences 🔁 1️⃣ class → className HTML / Bootstrap &#60;div class="container mt-3"&#62;&#60;/div&#62; Next.js / React &#60;div className="container mt-3"&#62;&#60;/div&#62; 📌 Reason: class JS ka reserved word hai 🔁 2️⃣ for → htmlFor &#60;label for="email"&#62;Email&#60;/label&#62; &#60;label htmlFor="email"&#62;Email&#60;/label&#62; 🔁 3️⃣ onclick → onClick &#60;button onclick="openModal()"&#62;Click&#60;/button&#62; &#60;button onClick={openModal}&#62;Click&#60;/button&#62; ❌ () nahi &#8230; </p>
<p class="link-more"><a href="https://www.codypaste.com/bootstrap-html-%e2%86%92-next-js-react-jsx-differences/" class="more-link">read more<span class="screen-reader-text"> "Bootstrap / HTML → Next.js (React JSX) Differences"</span></a></p>
<p>The post <a href="https://www.codypaste.com/bootstrap-html-%e2%86%92-next-js-react-jsx-differences/">Bootstrap / HTML → Next.js (React JSX) Differences</a> appeared first on <a href="https://www.codypaste.com">Cody Paste</a>.</p>
]]></description>
										<content:encoded><![CDATA[<h1 data-start="231" data-end="286">🧾 Bootstrap / HTML → Next.js (React JSX) Differences</h1>
<h2 data-start="288" data-end="319">🔁 1️⃣ <code data-start="298" data-end="305">class</code> → <code data-start="308" data-end="319">className</code></h2>
<h3 data-start="321" data-end="341">HTML / Bootstrap</h3>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container mt-3"</span>&gt;<span class="hljs-tag">&lt;/<span class="hljs-name">div</span></span>&gt;<br />
</code></div>
</div>
<h3 data-start="390" data-end="409">Next.js / React</h3>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-jsx">&lt;div className=<span class="hljs-string">"container mt-3"</span>&gt;&lt;/div&gt;<br />
</code></div>
</div>
<p data-start="461" data-end="503">📌 Reason: <code data-start="472" data-end="479">class</code> JS ka reserved word hai</p>
<hr data-start="505" data-end="508" />
<h2 data-start="510" data-end="537">🔁 2️⃣ <code data-start="520" data-end="525">for</code> → <code data-start="528" data-end="537">htmlFor</code></h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span class="hljs-tag">&lt;<span class="hljs-name">label</span></span> <span class="hljs-attr">for</span>=<span class="hljs-string">"email"</span>&gt;Email<span class="hljs-tag">&lt;/<span class="hljs-name">label</span></span>&gt;<br />
</code></div>
</div>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-jsx">&lt;label htmlFor=<span class="hljs-string">"email"</span>&gt;<span class="hljs-title class_">Email</span>&lt;/label&gt;<br />
</code></div>
</div>
<hr data-start="634" data-end="637" />
<h2 data-start="639" data-end="670">🔁 3️⃣ <code data-start="649" data-end="658">onclick</code> → <code data-start="661" data-end="670">onClick</code></h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span class="hljs-tag">&lt;<span class="hljs-name">button</span></span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"openModal()"</span>&gt;Click<span class="hljs-tag">&lt;/<span class="hljs-name">button</span></span>&gt;<br />
</code></div>
</div>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-jsx">&lt;button onClick={openModal}&gt;<span class="hljs-title class_">Click</span>&lt;/button&gt;<br />
</code></div>
</div>
<p data-start="785" data-end="824">❌ <code data-start="787" data-end="791">()</code> nahi lagate (auto run ho jayega)</p>
<hr data-start="826" data-end="829" />
<h2 data-start="831" data-end="867">🔁 4️⃣ Inline CSS string → Object</h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span></span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color:red; margin-top:10px"</span>&gt;<span class="hljs-tag">&lt;/<span class="hljs-name">div</span></span>&gt;<br />
</code></div>
</div>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-jsx">&lt;div style={{ <span class="hljs-attr">color</span>: <span class="hljs-string">"red"</span>, <span class="hljs-attr">marginTop</span>: <span class="hljs-string">"10px"</span> }}&gt;&lt;/div&gt;<br />
</code></div>
</div>
<p data-start="997" data-end="1023">📌 camelCase + double <code data-start="1019" data-end="1023">{}</code></p>
<hr data-start="1025" data-end="1028" />
<h2 data-start="1030" data-end="1065">🔁 5️⃣ <code data-start="1040" data-end="1047">style</code> value → camelCase</h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html">background-color<br />
</code></div>
</div>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-js">backgroundColor<br />
</code></div>
</div>
<hr data-start="1124" data-end="1127" />
<h2 data-start="1129" data-end="1170">🔁 6️⃣ <code data-start="1139" data-end="1148">checked</code>, <code data-start="1150" data-end="1160">selected</code> → boolean</h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span class="hljs-tag">&lt;<span class="hljs-name">input</span></span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">checked</span>&gt;<br />
</code></div>
</div>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-jsx">&lt;input type=<span class="hljs-string">"checkbox"</span> checked={<span class="hljs-literal">true</span>} /&gt;<br />
</code></div>
</div>
<hr data-start="1270" data-end="1273" />
<h2 data-start="1275" data-end="1311">🔁 7️⃣ <code data-start="1285" data-end="1292">value</code> → state controlled</h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span class="hljs-tag">&lt;<span class="hljs-name">input</span></span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Vipul"</span>&gt;<br />
</code></div>
</div>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-jsx">&lt;input value={name} onChange={<span class="hljs-function"><span class="hljs-params">e</span></span> =&gt; <span class="hljs-title function_">setName</span>(e.<span class="hljs-property">target</span>.<span class="hljs-property">value</span>)} /&gt;<br />
</code></div>
</div>
<hr data-start="1423" data-end="1426" />
<h2 data-start="1428" data-end="1453">🔁 8️⃣ <code data-start="1438" data-end="1444">href</code> → <code data-start="1447" data-end="1453">Link</code></h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span class="hljs-tag">&lt;<span class="hljs-name">a</span></span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/about"</span>&gt;About<span class="hljs-tag">&lt;/<span class="hljs-name">a</span></span>&gt;<br />
</code></div>
</div>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-jsx"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Link</span> <span class="hljs-keyword">from</span> <span class="hljs-string">"next/link"</span>;</p>
<p><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Link</span></span></span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/about"</span>&gt;About<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span></span>&gt;<br />
</code></div>
</div>
<p data-start="1571" data-end="1600">🚀 Fast navigation, no reload</p>
<hr data-start="1602" data-end="1605" />
<h2 data-start="1607" data-end="1646">🔁 9️⃣ <code data-start="1617" data-end="1622">img</code> → <code data-start="1625" data-end="1632">Image</code> (recommended)</h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span class="hljs-tag">&lt;<span class="hljs-name">img</span></span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/logo.png"</span> /&gt;<br />
</code></div>
</div>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-jsx"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Image</span> <span class="hljs-keyword">from</span> <span class="hljs-string">"next/image"</span>;</p>
<p><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Image</span></span></span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/logo.png"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">{100}</span> <span class="hljs-attr">height</span>=<span class="hljs-string">{40}</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"logo"</span> /&gt;<br />
</code></div>
</div>
<hr data-start="1791" data-end="1794" />
<h2 data-start="1796" data-end="1830">🔁 🔟 JS directly → <code data-start="1819" data-end="1830">useEffect</code></h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span></span> <span class="hljs-attr">src</span>=<span class="hljs-string">"bootstrap.js"</span>&gt;<span class="hljs-tag">&lt;/<span class="hljs-name">script</span></span>&gt;<br />
</code></div>
</div>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-jsx"><span class="hljs-title function_">useEffect</span>(<span class="hljs-function">() =&gt;</span> {<br />
  <span class="hljs-keyword">import</span>(<span class="hljs-string">"bootstrap/dist/js/bootstrap.bundle.min.js"</span>);<br />
}, []);<br />
</code></div>
</div>
<hr data-start="1975" data-end="1978" />
<h2 data-start="1980" data-end="2021">🔁 1️⃣1️⃣ <code data-start="1993" data-end="2012">document / window</code> direct ❌</h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-js"><span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"id"</span>);<br />
</code></div>
</div>
<p data-start="2065" data-end="2075">✅ Correct:</p>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-jsx"><span class="hljs-title function_">useRef</span>()<br />
</code></div>
</div>
<hr data-start="2097" data-end="2100" />
<h2 data-start="2102" data-end="2145">🔁 1️⃣2️⃣ <code data-start="2115" data-end="2124">if else</code> HTML ❌ → JSX ternary</h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span></span>&gt;condition ? show : hide<span class="hljs-tag">&lt;/<span class="hljs-name">div</span></span>&gt;<br />
</code></div>
</div>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-jsx">{isOpen ? <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Modal</span></span></span> /&gt; : <span class="hljs-literal">null</span>}<br />
</code></div>
</div>
<hr data-start="2235" data-end="2238" />
<h2 data-start="2240" data-end="2275">🔁 1️⃣3️⃣ Loop (<code data-start="2259" data-end="2264">for</code>) → <code data-start="2268" data-end="2275">map()</code></h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span class="hljs-tag">&lt;<span class="hljs-name">li</span></span>&gt;Item<span class="hljs-tag">&lt;/<span class="hljs-name">li</span></span>&gt;<br />
</code></div>
</div>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-jsx">{items.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">item</span></span> =&gt; (<br />
  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">li</span></span></span> <span class="hljs-attr">key</span>=<span class="hljs-string">{item.id}</span>&gt;{item.name}<span class="hljs-tag">&lt;/<span class="hljs-name">li</span></span>&gt;<br />
))}<br />
</code></div>
</div>
<hr data-start="2378" data-end="2381" />
<h2 data-start="2383" data-end="2422">🔁 1️⃣4️⃣ <code data-start="2396" data-end="2404">data-*</code> attributes (same)</h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span class="hljs-tag">&lt;<span class="hljs-name">button</span></span> <span class="hljs-attr">data-bs-toggle</span>=<span class="hljs-string">"modal"</span>&gt;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span></span>&gt;<br />
</code></div>
</div>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-jsx">&lt;button data-bs-toggle=<span class="hljs-string">"modal"</span>&gt;&lt;/button&gt;<br />
</code></div>
</div>
<p data-start="2531" data-end="2577">✅ Bootstrap data attributes same hi rehte hain</p>
<hr data-start="2579" data-end="2582" />
<h2 data-start="2584" data-end="2614">🔁 1️⃣5️⃣ Self closing tags</h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span class="hljs-tag">&lt;<span class="hljs-name">input</span></span>&gt;<br />
</code></div>
</div>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-jsx">&lt;input /&gt;<br />
</code></div>
</div>
<hr data-start="2659" data-end="2662" />
<h2 data-start="2664" data-end="2700">🔁 1️⃣6️⃣ <code data-start="2677" data-end="2687">readonly</code> → <code data-start="2690" data-end="2700">readOnly</code></h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span class="hljs-tag">&lt;<span class="hljs-name">input</span></span> <span class="hljs-attr">readonly</span>&gt;<br />
</code></div>
</div>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-jsx">&lt;input readOnly /&gt;<br />
</code></div>
</div>
<hr data-start="2763" data-end="2766" />
<h2 data-start="2768" data-end="2804">🔁 1️⃣7️⃣ <code data-start="2781" data-end="2791">tabindex</code> → <code data-start="2794" data-end="2804">tabIndex</code></h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span></span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span>&gt;<span class="hljs-tag">&lt;/<span class="hljs-name">div</span></span>&gt;<br />
</code></div>
</div>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-jsx">&lt;div tabIndex={<span class="hljs-number">0</span>}&gt;&lt;/div&gt;<br />
</code></div>
</div>
<hr data-start="2881" data-end="2884" />
<h2 data-start="2886" data-end="2907">🔁 1️⃣8️⃣ Comments</h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span class="hljs-comment">&lt;!-- comment --&gt;</span><br />
</code></div>
</div>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-jsx">{<span class="hljs-comment">/* comment */</span>}<br />
</code></div>
</div>
<hr data-start="2967" data-end="2970" />
<h2 data-start="2972" data-end="3010">🔁 1️⃣9️⃣ <code data-start="2985" data-end="3010">dangerouslySetInnerHTML</code></h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span></span>&gt;HTML<span class="hljs-tag">&lt;/<span class="hljs-name">div</span></span>&gt;<br />
</code></div>
</div>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-jsx">&lt;div dangerouslySetInnerHTML={{ <span class="hljs-attr">__html</span>: html }} /&gt;<br />
</code></div>
</div>
<p data-start="3104" data-end="3115">⚠️ XSS risk</p>
<hr data-start="3117" data-end="3120" />
<h2 data-start="3122" data-end="3163">🔁 2️⃣0️⃣ Bootstrap icons / JS plugins</h2>
<ul data-start="3165" data-end="3210">
<li data-start="3165" data-end="3186">
<p data-start="3167" data-end="3186">CSS → normal import</p>
</li>
<li data-start="3187" data-end="3210">
<p data-start="3189" data-end="3210">JS → <code data-start="3194" data-end="3205">useEffect</code> only</p>
</li>
</ul>
<hr data-start="3212" data-end="3215" />
<h1 data-start="3217" data-end="3254">🧠 One-look Cheatsheet (exam style)</h1>
<div class="TyagGW_tableContainer">
<div class="group TyagGW_tableWrapper flex flex-col-reverse w-fit" tabindex="-1">
<table class="w-fit min-w-(--thread-content-width)" data-start="3256" data-end="3453">
<thead data-start="3256" data-end="3274">
<tr data-start="3256" data-end="3274">
<th data-start="3256" data-end="3263" data-col-size="sm">HTML</th>
<th data-start="3263" data-end="3274" data-col-size="sm">Next.js</th>
</tr>
</thead>
<tbody data-start="3287" data-end="3453">
<tr data-start="3287" data-end="3308">
<td data-start="3287" data-end="3295" data-col-size="sm">class</td>
<td data-start="3295" data-end="3308" data-col-size="sm">className</td>
</tr>
<tr data-start="3309" data-end="3326">
<td data-start="3309" data-end="3315" data-col-size="sm">for</td>
<td data-start="3315" data-end="3326" data-col-size="sm">htmlFor</td>
</tr>
<tr data-start="3327" data-end="3348">
<td data-start="3327" data-end="3337" data-col-size="sm">onclick</td>
<td data-start="3337" data-end="3348" data-col-size="sm">onClick</td>
</tr>
<tr data-start="3349" data-end="3374">
<td data-start="3349" data-end="3360" data-col-size="sm">style=&#8221;&#8221;</td>
<td data-start="3360" data-end="3374" data-col-size="sm">style={{}}</td>
</tr>
<tr data-start="3375" data-end="3392">
<td data-start="3375" data-end="3384" data-col-size="sm">a href</td>
<td data-start="3384" data-end="3392" data-col-size="sm">Link</td>
</tr>
<tr data-start="3393" data-end="3408">
<td data-start="3393" data-end="3399" data-col-size="sm">img</td>
<td data-start="3399" data-end="3408" data-col-size="sm">Image</td>
</tr>
<tr data-start="3409" data-end="3431">
<td data-start="3409" data-end="3418" data-col-size="sm">script</td>
<td data-start="3418" data-end="3431" data-col-size="sm">useEffect</td>
</tr>
<tr data-start="3432" data-end="3453">
<td data-start="3432" data-end="3443" data-col-size="sm">document</td>
<td data-start="3443" data-end="3453" data-col-size="sm">useRef</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr data-start="3455" data-end="3458" />
<h2 data-start="3460" data-end="3496">🧠 Golden line (notes me likh lo)</h2>
<blockquote data-start="3497" data-end="3550">
<p data-start="3499" data-end="3550"><strong data-start="3499" data-end="3550">“HTML jaisa dikhta hai, par JSX JavaScript hai”</strong></p>
</blockquote>
<p>The post <a href="https://www.codypaste.com/bootstrap-html-%e2%86%92-next-js-react-jsx-differences/">Bootstrap / HTML → Next.js (React JSX) Differences</a> appeared first on <a href="https://www.codypaste.com">Cody Paste</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.codypaste.com/bootstrap-html-%e2%86%92-next-js-react-jsx-differences/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>React + Next.js – COMPLETE HOOKS &#038; IMPORTANT CONCEPTS (NOTES)</title>
		<link>https://www.codypaste.com/react-next-js-complete-hooks-important-concepts-notes/</link>
					<comments>https://www.codypaste.com/react-next-js-complete-hooks-important-concepts-notes/?noamp=mobile#respond</comments>
		
		<dc:creator><![CDATA[Admin]]></dc:creator>
		<pubDate>Tue, 20 Jan 2026 06:24:23 +0000</pubDate>
				<category><![CDATA[Node + NEXT.js]]></category>
		<guid isPermaLink="false">https://www.codypaste.com/?p=1285</guid>

					<description><![CDATA[<p>🔥 React Core Hooks (Must know) HOOK Power Detail useState Yaad rakhna Component ke andar value store &#38; 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 &#8230; </p>
<p class="link-more"><a href="https://www.codypaste.com/react-next-js-complete-hooks-important-concepts-notes/" class="more-link">read more<span class="screen-reader-text"> "React + Next.js – COMPLETE HOOKS &#038; IMPORTANT CONCEPTS (NOTES)"</span></a></p>
<p>The post <a href="https://www.codypaste.com/react-next-js-complete-hooks-important-concepts-notes/">React + Next.js – COMPLETE HOOKS &#038; IMPORTANT CONCEPTS (NOTES)</a> appeared first on <a href="https://www.codypaste.com">Cody Paste</a>.</p>
]]></description>
										<content:encoded><![CDATA[<h2 data-start="261" data-end="295">🔥 React Core Hooks (Must know)</h2>
<div class="TyagGW_tableContainer">
<div class="group TyagGW_tableWrapper flex flex-col-reverse w-fit" tabindex="-1">
<table class="w-fit min-w-(--thread-content-width)" data-start="297" data-end="894">
<thead data-start="297" data-end="322">
<tr data-start="297" data-end="322">
<th style="background-color: #000000;" data-start="297" data-end="304" data-col-size="sm"><span style="color: #ffffff;">HOOK</span></th>
<th style="background-color: #000000;" data-start="304" data-end="312" data-col-size="sm"><span style="color: #ffffff;">Power</span></th>
<th style="background-color: #000000;" data-start="312" data-end="322" data-col-size="md"><span style="color: #ffffff;">Detail</span></th>
</tr>
</thead>
<tbody data-start="340" data-end="894">
<tr data-start="340" data-end="443">
<td data-start="340" data-end="355" data-col-size="sm"><strong data-start="342" data-end="354">useState</strong></td>
<td data-start="355" data-end="369" data-col-size="sm">Yaad rakhna</td>
<td data-start="369" data-end="443" data-col-size="md">Component ke andar value store &amp; update (counter, toggle, form, modal)</td>
</tr>
<tr data-start="444" data-end="535">
<td data-start="444" data-end="460" data-col-size="sm"><strong data-start="446" data-end="459">useEffect</strong></td>
<td data-col-size="sm" data-start="460" data-end="480">Time ke baad kaam</td>
<td data-col-size="md" data-start="480" data-end="535">Render ke baad code run (API, bootstrap JS, events)</td>
</tr>
<tr data-start="536" data-end="609">
<td data-start="536" data-end="553" data-col-size="sm"><strong data-start="538" data-end="552">useContext</strong></td>
<td data-col-size="sm" data-start="553" data-end="567">Global baat</td>
<td data-col-size="md" data-start="567" data-end="609">Global state share (user, cart, theme)</td>
</tr>
<tr data-start="610" data-end="691">
<td data-start="610" data-end="627" data-col-size="sm"><strong data-start="612" data-end="626">useReducer</strong></td>
<td data-col-size="sm" data-start="627" data-end="646">Rule-based state</td>
<td data-col-size="md" data-start="646" data-end="691">Complex state logic (cart, multi-actions)</td>
</tr>
<tr data-start="692" data-end="761">
<td data-start="692" data-end="705" data-col-size="sm"><strong data-start="694" data-end="704">useRef</strong></td>
<td data-col-size="sm" data-start="705" data-end="721">Cheez pakadna</td>
<td data-col-size="md" data-start="721" data-end="761">DOM reference, timer, previous value</td>
</tr>
<tr data-start="762" data-end="822">
<td data-start="762" data-end="776" data-col-size="sm"><strong data-start="764" data-end="775">useMemo</strong></td>
<td data-col-size="sm" data-start="776" data-end="792">Dimag bachana</td>
<td data-col-size="md" data-start="792" data-end="822">Heavy calculation optimize</td>
</tr>
<tr data-start="823" data-end="894">
<td data-start="823" data-end="841" data-col-size="sm"><strong data-start="825" data-end="840">useCallback</strong></td>
<td data-col-size="sm" data-start="841" data-end="859">Function freeze</td>
<td data-col-size="md" data-start="859" data-end="894">Unnecessary re-render se bachav</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr data-start="896" data-end="899" />
<h2 data-start="901" data-end="946">🟢 Next.js Specific Hooks (VERY IMPORTANT)</h2>
<div class="TyagGW_tableContainer">
<div class="group TyagGW_tableWrapper flex flex-col-reverse w-fit" tabindex="-1">
<table class="w-fit min-w-(--thread-content-width)" data-start="948" data-end="1338">
<thead data-start="948" data-end="973">
<tr data-start="948" data-end="973">
<th style="background-color: #000000;" data-start="948" data-end="955" data-col-size="sm"><span style="color: #ffffff;">HOOK</span></th>
<th style="background-color: #000000;" data-start="955" data-end="963" data-col-size="sm"><span style="color: #ffffff;">Power</span></th>
<th style="background-color: #000000;" data-start="963" data-end="973" data-col-size="sm"><span style="color: #ffffff;">Detail</span></th>
</tr>
</thead>
<tbody data-start="991" data-end="1338">
<tr data-start="991" data-end="1071">
<td data-start="991" data-end="1010" data-col-size="sm"><strong data-start="993" data-end="1009">&#8220;use client&#8221;</strong></td>
<td data-start="1010" data-end="1031" data-col-size="sm">Browser me chalana</td>
<td data-col-size="sm" data-start="1031" data-end="1071">Hooks &amp; browser APIs allow karta hai</td>
</tr>
<tr data-start="1072" data-end="1130">
<td data-start="1072" data-end="1088" data-col-size="sm"><strong data-start="1074" data-end="1087">useParams</strong></td>
<td data-start="1088" data-end="1099" data-col-size="sm">URL data</td>
<td data-col-size="sm" data-start="1099" data-end="1130">Dynamic route value nikalna</td>
</tr>
<tr data-start="1131" data-end="1205">
<td data-start="1131" data-end="1147" data-col-size="sm"><strong data-start="1133" data-end="1146">useRouter</strong></td>
<td data-start="1147" data-end="1160" data-col-size="sm">Navigation</td>
<td data-start="1160" data-end="1205" data-col-size="sm">Programmatic redirect (<code data-start="1185" data-end="1191">push</code>, <code data-start="1193" data-end="1202">replace</code>)</td>
</tr>
<tr data-start="1206" data-end="1280">
<td data-start="1206" data-end="1228" data-col-size="sm"><strong data-start="1208" data-end="1227">useSearchParams</strong></td>
<td data-col-size="sm" data-start="1228" data-end="1243">Query string</td>
<td data-col-size="sm" data-start="1243" data-end="1280"><code data-start="1245" data-end="1265">?page=1&amp;sort=price</code> jaise params</td>
</tr>
<tr data-start="1281" data-end="1338">
<td data-start="1281" data-end="1299" data-col-size="sm"><strong data-start="1283" data-end="1298">usePathname</strong></td>
<td data-start="1299" data-end="1313" data-col-size="sm">Current URL</td>
<td data-start="1313" data-end="1338" data-col-size="sm">Active menu highlight</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr data-start="1340" data-end="1343" />
<h2 data-start="1345" data-end="1393">🟡 Special Rendering Files (Next.js Concepts)</h2>
<div class="TyagGW_tableContainer">
<div class="group TyagGW_tableWrapper flex flex-col-reverse w-fit" tabindex="-1">
<table class="w-fit min-w-(--thread-content-width)" style="width: 100%; height: 156px;" data-start="1395" data-end="1696">
<thead data-start="1395" data-end="1420">
<tr style="height: 26px;" data-start="1395" data-end="1420">
<th style="width: 146.688px; height: 26px; background-color: #000000;" data-start="1395" data-end="1402" data-col-size="sm"><span style="color: #ffffff;">File</span></th>
<th style="width: 163.125px; height: 26px; background-color: #000000;" data-start="1402" data-end="1410" data-col-size="sm"><span style="color: #ffffff;">Power</span></th>
<th style="width: 240.625px; height: 26px; background-color: #000000;" data-start="1410" data-end="1420" data-col-size="sm"><span style="color: #ffffff;">Detail</span></th>
</tr>
</thead>
<tbody data-start="1438" data-end="1696">
<tr style="height: 26px;" data-start="1438" data-end="1498">
<td style="width: 146.688px; height: 26px;" data-start="1438" data-end="1455" data-col-size="sm"><strong data-start="1440" data-end="1454">layout.tsx</strong></td>
<td style="width: 163.125px; height: 26px;" data-start="1455" data-end="1471" data-col-size="sm">Common layout</td>
<td style="width: 240.625px; height: 26px;" data-start="1471" data-end="1498" data-col-size="sm">Header / footer wrapper</td>
</tr>
<tr style="height: 26px;" data-start="1499" data-end="1540">
<td style="width: 146.688px; height: 26px;" data-start="1499" data-end="1514" data-col-size="sm"><strong data-start="1501" data-end="1513">page.tsx</strong></td>
<td style="width: 163.125px; height: 26px;" data-start="1514" data-end="1522" data-col-size="sm">Route</td>
<td style="width: 240.625px; height: 26px;" data-start="1522" data-end="1540" data-col-size="sm">URL banata hai</td>
</tr>
<tr style="height: 26px;" data-start="1541" data-end="1593">
<td style="width: 146.688px; height: 26px;" data-start="1541" data-end="1559" data-col-size="sm"><strong data-start="1543" data-end="1558">loading.tsx</strong></td>
<td style="width: 163.125px; height: 26px;" data-start="1559" data-end="1568" data-col-size="sm">Loader</td>
<td style="width: 240.625px; height: 26px;" data-start="1568" data-end="1593" data-col-size="sm">Page load ke beech UI</td>
</tr>
<tr style="height: 26px;" data-start="1594" data-end="1644">
<td style="width: 146.688px; height: 26px;" data-start="1594" data-end="1610" data-col-size="sm"><strong data-start="1596" data-end="1609">error.tsx</strong></td>
<td style="width: 163.125px; height: 26px;" data-col-size="sm" data-start="1610" data-end="1621">Error UI</td>
<td style="width: 240.625px; height: 26px;" data-col-size="sm" data-start="1621" data-end="1644">Page crash fallback</td>
</tr>
<tr style="height: 26px;" data-start="1645" data-end="1696">
<td style="width: 146.688px; height: 26px;" data-start="1645" data-end="1665" data-col-size="sm"><strong data-start="1647" data-end="1664">not-found.tsx</strong></td>
<td style="width: 163.125px; height: 26px;" data-start="1665" data-end="1671" data-col-size="sm">404</td>
<td style="width: 240.625px; height: 26px;" data-start="1671" data-end="1696" data-col-size="sm">Custom not found page</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr data-start="1698" data-end="1701" />
<h2 data-start="1703" data-end="1746">🔵 Data &amp; Rendering Concepts (Important)</h2>
<div class="TyagGW_tableContainer">
<div class="group TyagGW_tableWrapper flex flex-col-reverse w-fit" tabindex="-1">
<table class="w-fit min-w-(--thread-content-width)" data-start="1748" data-end="2016">
<thead data-start="1748" data-end="1768">
<tr data-start="1748" data-end="1768">
<th style="background-color: #000000;" data-start="1748" data-end="1758" data-col-size="sm"><span style="color: #ffffff;">Concept</span></th>
<th style="background-color: #000000;" data-start="1758" data-end="1768" data-col-size="sm"><span style="color: #ffffff;">Matlab</span></th>
</tr>
</thead>
<tbody data-start="1781" data-end="2016">
<tr data-start="1781" data-end="1826">
<td data-start="1781" data-end="1804" data-col-size="sm"><strong data-start="1783" data-end="1803">Server Component</strong></td>
<td data-start="1804" data-end="1826" data-col-size="sm">Default, fast, SEO</td>
</tr>
<tr data-start="1827" data-end="1868">
<td data-start="1827" data-end="1850" data-col-size="sm"><strong data-start="1829" data-end="1849">Client Component</strong></td>
<td data-start="1850" data-end="1868" data-col-size="sm">Interactive UI</td>
</tr>
<tr data-start="1869" data-end="1904">
<td data-start="1869" data-end="1879" data-col-size="sm"><strong data-start="1871" data-end="1878">SSR</strong></td>
<td data-start="1879" data-end="1904" data-col-size="sm">Server Side Rendering</td>
</tr>
<tr data-start="1905" data-end="1940">
<td data-start="1905" data-end="1915" data-col-size="sm"><strong data-start="1907" data-end="1914">CSR</strong></td>
<td data-col-size="sm" data-start="1915" data-end="1940">Client Side Rendering</td>
</tr>
<tr data-start="1941" data-end="1980">
<td data-start="1941" data-end="1957" data-col-size="sm"><strong data-start="1943" data-end="1956">Hydration</strong></td>
<td data-start="1957" data-end="1980" data-col-size="sm">Server HTML → React</td>
</tr>
<tr data-start="1981" data-end="2016">
<td data-start="1981" data-end="1993" data-col-size="sm"><strong data-start="1983" data-end="1992">Props</strong></td>
<td data-col-size="sm" data-start="1993" data-end="2016">Parent → Child data</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr data-start="2018" data-end="2021" />
<h2 data-start="2023" data-end="2054">🟣 Navigation &amp; UI Utilities</h2>
<div class="TyagGW_tableContainer">
<div class="group TyagGW_tableWrapper flex flex-col-reverse w-fit" tabindex="-1">
<table class="w-fit min-w-(--thread-content-width)" data-start="2056" data-end="2190">
<thead data-start="2056" data-end="2070">
<tr data-start="2056" data-end="2070">
<th style="background-color: #000000;" data-start="2056" data-end="2063" data-col-size="sm"><span style="color: #ffffff;">Term</span></th>
<th style="background-color: #000000;" data-start="2063" data-end="2070" data-col-size="sm"><span style="color: #ffffff;">Use</span></th>
</tr>
</thead>
<tbody data-start="2083" data-end="2190">
<tr data-start="2083" data-end="2113">
<td data-start="2083" data-end="2094" data-col-size="sm"><strong data-start="2085" data-end="2093">Link</strong></td>
<td data-start="2094" data-end="2113" data-col-size="sm">Fast navigation</td>
</tr>
<tr data-start="2114" data-end="2146">
<td data-start="2114" data-end="2126" data-col-size="sm"><strong data-start="2116" data-end="2125">Image</strong></td>
<td data-start="2126" data-end="2146" data-col-size="sm">Optimized images</td>
</tr>
<tr data-start="2147" data-end="2190">
<td data-start="2147" data-end="2162" data-col-size="sm"><strong data-start="2149" data-end="2161">Metadata</strong></td>
<td data-start="2162" data-end="2190" data-col-size="sm">SEO (title, description)</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr data-start="2192" data-end="2195" />
<h2 data-start="2197" data-end="2239">🧠 Custom Hook (Advanced but IMPORTANT)</h2>
<div class="TyagGW_tableContainer">
<div class="group TyagGW_tableWrapper flex flex-col-reverse w-fit" tabindex="-1">
<table class="w-fit min-w-(--thread-content-width)" data-start="2241" data-end="2341">
<thead data-start="2241" data-end="2258">
<tr data-start="2241" data-end="2258">
<th style="background-color: #000000;" data-start="2241" data-end="2248" data-col-size="sm"><span style="color: #ffffff;">Term</span></th>
<th style="background-color: #000000;" data-start="2248" data-end="2258" data-col-size="md"><span style="color: #ffffff;">Detail</span></th>
</tr>
</thead>
<tbody data-start="2271" data-end="2341">
<tr data-start="2271" data-end="2341">
<td data-start="2271" data-end="2289" data-col-size="sm"><strong data-start="2273" data-end="2288">Custom Hook</strong></td>
<td data-col-size="md" data-start="2289" data-end="2341">Apna hook banana (<code data-start="2309" data-end="2323">useSomething</code>) to reuse logic</td>
</tr>
</tbody>
</table>
</div>
</div>
<p data-start="2343" data-end="2351">Example:</p>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-ts"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useToggle</span>() {<br />
  <span class="hljs-keyword">const</span> [open, setOpen] = <span class="hljs-title function_">useState</span>(<span class="hljs-literal">false</span>);<br />
  <span class="hljs-keyword">return</span> [open, setOpen];<br />
}<br />
</code></div>
</div>
<p>The post <a href="https://www.codypaste.com/react-next-js-complete-hooks-important-concepts-notes/">React + Next.js – COMPLETE HOOKS &#038; IMPORTANT CONCEPTS (NOTES)</a> appeared first on <a href="https://www.codypaste.com">Cody Paste</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.codypaste.com/react-next-js-complete-hooks-important-concepts-notes/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>NODE.JS + MySQL CONNECTION</title>
		<link>https://www.codypaste.com/node-js-mysql-connection/</link>
					<comments>https://www.codypaste.com/node-js-mysql-connection/?noamp=mobile#respond</comments>
		
		<dc:creator><![CDATA[Admin]]></dc:creator>
		<pubDate>Tue, 13 Jan 2026 06:26:37 +0000</pubDate>
				<category><![CDATA[Node + NEXT.js]]></category>
		<guid isPermaLink="false">https://www.codypaste.com/?p=1282</guid>

					<description><![CDATA[<p>1️⃣ MySQL Server Check (XAMPP) XAMPP Control Panel open karo MySQL → Start (Running hona chahiye ✅) phpMyAdmin open: http://localhost/phpmyadmin 2️⃣ Database &#38; Table Create Database: CREATE DATABASE node_shop; USE node_shop; Sample Table: CREATE TABLE products ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(100), price DECIMAL(10,2), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); 👉 Ye table CRUD &#8230; </p>
<p class="link-more"><a href="https://www.codypaste.com/node-js-mysql-connection/" class="more-link">read more<span class="screen-reader-text"> "NODE.JS + MySQL CONNECTION"</span></a></p>
<p>The post <a href="https://www.codypaste.com/node-js-mysql-connection/">NODE.JS + MySQL CONNECTION</a> appeared first on <a href="https://www.codypaste.com">Cody Paste</a>.</p>
]]></description>
										<content:encoded><![CDATA[<h2 data-start="248" data-end="281">1️⃣ MySQL Server Check (XAMPP)</h2>
<ul data-start="283" data-end="361">
<li data-start="283" data-end="316">
<p data-start="285" data-end="316">XAMPP Control Panel open karo</p>
</li>
<li data-start="317" data-end="361">
<p data-start="319" data-end="361"><strong data-start="319" data-end="336">MySQL → Start</strong> (Running hona chahiye ✅)</p>
</li>
</ul>
<p data-start="363" data-end="379">phpMyAdmin open:</p>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre!">http:<span class="hljs-comment">//localhost/phpmyadmin</span><br />
</code></div>
</div>
<hr data-start="417" data-end="420" />
<h2 data-start="422" data-end="452">2️⃣ Database &amp; Table Create</h2>
<h3 data-start="454" data-end="467">Database:</h3>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-sql"><span class="hljs-keyword">CREATE</span> DATABASE node_shop;<br />
USE node_shop;<br />
</code></div>
</div>
<h3 data-start="522" data-end="539">Sample Table:</h3>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-sql"><span class="hljs-keyword">CREATE TABLE</span> products (<br />
  id <span class="hljs-type">INT</span> AUTO_INCREMENT <span class="hljs-keyword">PRIMARY KEY</span>,<br />
  name <span class="hljs-type">VARCHAR</span>(<span class="hljs-number">100</span>),<br />
  price <span class="hljs-type">DECIMAL</span>(<span class="hljs-number">10</span>,<span class="hljs-number">2</span>),<br />
  created_at <span class="hljs-type">TIMESTAMP</span> <span class="hljs-keyword">DEFAULT</span> <span class="hljs-built_in">CURRENT_TIMESTAMP</span><br />
);<br />
</code></div>
</div>
<p data-start="709" data-end="743">👉 Ye table CRUD ke liye use hogi.</p>
<hr data-start="745" data-end="748" />
<h2 data-start="750" data-end="773">3️⃣ DB Config Folder</h2>
<p data-start="775" data-end="788">Path confirm:</p>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre!">src/db/<br />
</code></div>
</div>
<p data-start="806" data-end="838">Is folder ke andar file banao 👇</p>
<p data-start="840" data-end="861">📄 <strong data-start="843" data-end="861"><code data-start="845" data-end="859">src/db/db.js</code></strong></p>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-js"><span class="hljs-keyword">const</span> mysql = <span class="hljs-built_in">require</span>(<span class="hljs-string">'mysql2'</span>);</p>
<p><span class="hljs-comment">// Create connection pool</span><br />
<span class="hljs-keyword">const</span> db = mysql.<span class="hljs-title function_">createPool</span>({<br />
  <span class="hljs-attr">host</span>: <span class="hljs-string">'localhost'</span>,<br />
  <span class="hljs-attr">user</span>: <span class="hljs-string">'root'</span>,<br />
  <span class="hljs-attr">password</span>: <span class="hljs-string">''</span>,        <span class="hljs-comment">// XAMPP default blank</span><br />
  <span class="hljs-attr">database</span>: <span class="hljs-string">'node_shop'</span>,<br />
  <span class="hljs-attr">port</span>: <span class="hljs-number">3306</span><br />
});</p>
<p><span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = db;<br />
</code></div>
</div>
<p data-start="1111" data-end="1126">🧠 CI4 mapping:</p>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre!">\Config\<span class="hljs-keyword">Database</span>::<span class="hljs-keyword">connect</span>()<br />
</code></div>
</div>
<hr data-start="1164" data-end="1167" />
<h2 data-start="1169" data-end="1206">4️⃣ DB Connection Test (IMPORTANT)</h2>
<p data-start="1208" data-end="1245">📄 <strong data-start="1211" data-end="1227"><code data-start="1213" data-end="1225">src/app.js</code></strong> me upar add karo:</p>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-js"><span class="hljs-keyword">const</span> db = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./db/db'</span>);</p>
<p><span class="hljs-comment">// Test DB connection</span><br />
db.<span class="hljs-title function_">query</span>(<span class="hljs-string">'SELECT 1'</span>, <span class="hljs-function">(<span class="hljs-params">err</span></span>) =&gt; {<br />
  <span class="hljs-keyword">if</span> (err) {<br />
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'❌ MySQL Error:'</span>, err);<br />
  } <span class="hljs-keyword">else</span> {<br />
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'✅ MySQL Connected bhai 🔥'</span>);<br />
  }<br />
});<br />
</code></div>
</div>
<p data-start="1462" data-end="1480">⚠️ Path dhyaan se:</p>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-js">./db/db<br />
</code></div>
</div>
<hr data-start="1500" data-end="1503" />
<h2 data-start="1505" data-end="1526">5️⃣ Server Restart</h2>
<p data-start="1528" data-end="1540">Terminal me:</p>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-bash">npm run dev<br />
</code></div>
</div>
<h3 data-start="1566" data-end="1586">Expected Output:</h3>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre!"><span class="hljs-built_in">Server</span> running on http:<span class="hljs-comment">//localhost:3000</span><br />
✅ MySQL Connected bhai 🔥<br />
</code></div>
</div>
<p data-start="1662" data-end="1672">👉 Matlab:</p>
<ul data-start="1673" data-end="1716">
<li data-start="1673" data-end="1696">
<p data-start="1675" data-end="1696">Node server running ✅</p>
</li>
<li data-start="1697" data-end="1716">
<p data-start="1699" data-end="1716">MySQL connected ✅</p>
</li>
</ul>
<p>The post <a href="https://www.codypaste.com/node-js-mysql-connection/">NODE.JS + MySQL CONNECTION</a> appeared first on <a href="https://www.codypaste.com">Cody Paste</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.codypaste.com/node-js-mysql-connection/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>NODE.JS BASIC SETUP – (BEGINNER)</title>
		<link>https://www.codypaste.com/node-js-basic-setup-beginner/</link>
					<comments>https://www.codypaste.com/node-js-basic-setup-beginner/?noamp=mobile#respond</comments>
		
		<dc:creator><![CDATA[Admin]]></dc:creator>
		<pubDate>Tue, 13 Jan 2026 06:01:40 +0000</pubDate>
				<category><![CDATA[Node + NEXT.js]]></category>
		<guid isPermaLink="false">https://www.codypaste.com/?p=1279</guid>

					<description><![CDATA[<p>1️⃣ Node.js &#38; npm Installation Check Command Prompt / Terminal: node -v npm -v Expected Output: Node : v20.x.x NPM : 10.x.x 👉 Agar version aa raha hai → Node &#38; npm installed ✅ 2️⃣ Project Folder Location Node project kahin bhi ho sakta hai (htdocs zaroori nahi) Example: E:\node-project\node-shop Node ko folder location se &#8230; </p>
<p class="link-more"><a href="https://www.codypaste.com/node-js-basic-setup-beginner/" class="more-link">read more<span class="screen-reader-text"> "NODE.JS BASIC SETUP – (BEGINNER)"</span></a></p>
<p>The post <a href="https://www.codypaste.com/node-js-basic-setup-beginner/">NODE.JS BASIC SETUP – (BEGINNER)</a> appeared first on <a href="https://www.codypaste.com">Cody Paste</a>.</p>
]]></description>
										<content:encoded><![CDATA[<h2 data-start="242" data-end="281">1️⃣ Node.js &amp; npm Installation Check</h2>
<h3 data-start="283" data-end="313">Command Prompt / Terminal:</h3>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-bash">node -v<br />
npm -v<br />
</code></div>
</div>
<h3 data-start="342" data-end="362">Expected Output:</h3>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre!"><span class="hljs-attr">Node :</span> <span class="hljs-string">v20.x.x</span><br />
<span class="hljs-attr">NPM  :</span> <span class="hljs-number">10.</span><span class="hljs-string">x.x</span><br />
</code></div>
</div>
<p data-start="401" data-end="453">👉 Agar version aa raha hai → Node &amp; npm installed ✅</p>
<hr data-start="455" data-end="458" />
<h2 data-start="460" data-end="490">2️⃣ Project Folder Location</h2>
<p data-start="491" data-end="552">Node project <strong data-start="504" data-end="530">kahin bhi ho sakta hai</strong> (htdocs zaroori nahi)</p>
<p data-start="554" data-end="562">Example:</p>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre!"><span class="hljs-section">E:\node-project\node-shop</span><br />
</code></div>
</div>
<p data-start="598" data-end="650">Node ko folder location se <strong data-start="625" data-end="649">koi farak nahi padta</strong>.</p>
<hr data-start="652" data-end="655" />
<h2 data-start="657" data-end="687">3️⃣ Project Open in VS Code</h2>
<ul data-start="688" data-end="728">
<li data-start="688" data-end="718">
<p data-start="690" data-end="718">VS Code → File → Open Folder</p>
</li>
<li data-start="719" data-end="728">
<p data-start="721" data-end="728">Select:</p>
</li>
</ul>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre!"><span class="hljs-section">E:\node-project\node-shop</span><br />
</code></div>
</div>
<ul data-start="763" data-end="779">
<li data-start="763" data-end="779">
<p data-start="765" data-end="779">Terminal open:</p>
</li>
</ul>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre!"><span class="hljs-attribute">Ctrl</span> + <code><br />
</code></div>
</div>
<p data-start="798" data-end="818">Terminal path check:</p>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre!"><span class="hljs-built_in">PS</span> E:\node<span class="hljs-literal">-project</span>\node<span class="hljs-literal">-shop</span>&gt;<br />
</code></div>
</div>
<hr data-start="858" data-end="861" />
<h2 data-start="863" data-end="893">4️⃣ Node Project Initialize</h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-bash">npm init -y<br />
</code></div>
</div>
<p data-start="920" data-end="984">👉 Ye <code data-start="926" data-end="940">package.json</code> banata hai<br data-start="951" data-end="954" />(CI4 ke <code data-start="962" data-end="977">composer.json</code> jaisa)</p>
<hr data-start="986" data-end="989" />
<h2 data-start="991" data-end="1023">5️⃣ Required Packages Install</h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-bash">npm install express mysql2 dotenv cors<br />
npm install -D nodemon<br />
</code></div>
</div>
<h3 data-start="1100" data-end="1117">Packages use:</h3>
<ul data-start="1118" data-end="1247">
<li data-start="1118" data-end="1139">
<p data-start="1120" data-end="1139">express → framework</p>
</li>
<li data-start="1140" data-end="1167">
<p data-start="1142" data-end="1167">mysql2 → MySQL connection</p>
</li>
<li data-start="1168" data-end="1189">
<p data-start="1170" data-end="1189">dotenv → env config</p>
</li>
<li data-start="1190" data-end="1209">
<p data-start="1192" data-end="1209">cors → API access</p>
</li>
<li data-start="1210" data-end="1247">
<p data-start="1212" data-end="1247">nodemon → auto server restart (dev)</p>
</li>
</ul>
<hr data-start="1249" data-end="1252" />
<h2 data-start="1254" data-end="1289">6️⃣ Folder Structure (CI4 style)</h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre!">node<span class="hljs-operator">-</span>shop<span class="hljs-operator">/</span><br />
 <span class="hljs-operator">├─</span> src<span class="hljs-operator">/</span><br />
 <span class="hljs-operator">│</span>  <span class="hljs-operator">├─</span> controllers<span class="hljs-operator">/</span>   <span class="hljs-operator">→</span> <span class="hljs-type">Logic</span> (<span class="hljs-type">CI4</span> <span class="hljs-type">Controllers</span>)<br />
 <span class="hljs-operator">│</span>  <span class="hljs-operator">├─</span> routes<span class="hljs-operator">/</span>        <span class="hljs-operator">→</span> <span class="hljs-type">Routes</span> (<span class="hljs-type">CI4</span> <span class="hljs-type">Routes</span>.php)<br />
 <span class="hljs-operator">│</span>  <span class="hljs-operator">├─</span> db<span class="hljs-operator">/</span>            <span class="hljs-operator">→</span> <span class="hljs-type">Database</span> config<br />
 <span class="hljs-operator">│</span>  <span class="hljs-operator">└─</span> app.js         <span class="hljs-operator">→</span> <span class="hljs-type">Entry</span> point<br />
 <span class="hljs-operator">├─</span> .env<br />
 <span class="hljs-operator">├─</span> <span class="hljs-keyword">package</span>.json<br />
 <span class="hljs-operator">└─</span> node_modules<span class="hljs-operator">/</span><br />
</code></div>
</div>
<hr data-start="1536" data-end="1539" />
<h2 data-start="1541" data-end="1574">7️⃣ app.js (First Node Server)</h2>
<p data-start="1576" data-end="1591">📄 <code data-start="1579" data-end="1591">src/app.js</code></p>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-js"><span class="hljs-keyword">const</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">'express'</span>);<br />
<span class="hljs-keyword">const</span> app = <span class="hljs-title function_">express</span>();</p>
<p>app.<span class="hljs-title function_">use</span>(express.<span class="hljs-title function_">json</span>());</p>
<p>app.<span class="hljs-title function_">get</span>(<span class="hljs-string">'/'</span>, <span class="hljs-function">(<span class="hljs-params">req, res</span></span>) =&gt; {<br />
  res.<span class="hljs-title function_">send</span>(<span class="hljs-string">'Node server chal raha hai bhai 😎'</span>);<br />
});</p>
<p><span class="hljs-keyword">const</span> <span class="hljs-variable constant_">PORT</span> = <span class="hljs-number">3000</span>;<br />
app.<span class="hljs-title function_">listen</span>(<span class="hljs-variable constant_">PORT</span>, <span class="hljs-function">() =&gt;</span> {<br />
  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string"></code>Server running on http://localhost:<span class="hljs-subst">${PORT}</span></span>`);<br />
});<br />
</code></div>
</div>
<hr data-start="1881" data-end="1884" />
<h2 data-start="1886" data-end="1919">8️⃣ package.json Scripts Setup</h2>
<p data-start="1921" data-end="1960">📄 <code data-start="1924" data-end="1938">package.json</code> me <code data-start="1942" data-end="1951">scripts</code> section:</p>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-json"><span class="hljs-attr">"scripts"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br />
  <span class="hljs-attr">"start"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"node src/app.js"</span><span class="hljs-punctuation">,</span><br />
  <span class="hljs-attr">"dev"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"nodemon src/app.js"</span><br />
<span class="hljs-punctuation">}</span><br />
</code></div>
</div>
<p data-start="2050" data-end="2116">👉 <code data-start="2053" data-end="2066">npm run dev</code> = development mode<br data-start="2085" data-end="2088" />👉 <code data-start="2091" data-end="2102">npm start</code> = normal mode</p>
<hr data-start="2118" data-end="2121" />
<h2 data-start="2123" data-end="2148">9️⃣ Server Run Command</h2>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-bash">npm run dev<br />
</code></div>
</div>
<h3 data-start="2175" data-end="2204">Expected Terminal Output:</h3>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre!"><span class="hljs-built_in">Server</span> running on http:<span class="hljs-comment">//localhost:3000</span><br />
</code></div>
</div>
<hr data-start="2254" data-end="2257" />
<h2 data-start="2259" data-end="2277">🔟 Browser Test</h2>
<p data-start="2279" data-end="2292">Open browser:</p>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre!">http:<span class="hljs-comment">//localhost:3000</span><br />
</code></div>
</div>
<h3 data-start="2324" data-end="2335">Output:</h3>
<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary">
<div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre!"><span class="hljs-attribute">Node</span> server chal raha hai bhai 😎<br />
</code></div>
</div>
<p data-start="2379" data-end="2389">👉 Matlab:</p>
<ul data-start="2390" data-end="2445">
<li data-start="2390" data-end="2406">
<p data-start="2392" data-end="2406">Node working ✅</p>
</li>
<li data-start="2407" data-end="2426">
<p data-start="2409" data-end="2426">Express working ✅</p>
</li>
<li data-start="2427" data-end="2445">
<p data-start="2429" data-end="2445">Setup complete ✅</p>
</li>
</ul>
<hr data-start="2447" data-end="2450" />
<h2 data-start="2452" data-end="2492">🧠 CI4 → Node Mindset Mapping (Quick)</h2>
<div class="TyagGW_tableContainer">
<div class="group TyagGW_tableWrapper flex flex-col-reverse w-fit" tabindex="-1">
<table class="w-fit min-w-(--thread-content-width)" data-start="2494" data-end="2664">
<thead data-start="2494" data-end="2508">
<tr data-start="2494" data-end="2508">
<th data-start="2494" data-end="2500" data-col-size="sm">CI4</th>
<th data-start="2500" data-end="2508" data-col-size="sm">Node</th>
</tr>
</thead>
<tbody data-start="2521" data-end="2664">
<tr data-start="2521" data-end="2566">
<td data-start="2521" data-end="2542" data-col-size="sm">Apache + index.php</td>
<td data-start="2542" data-end="2566" data-col-size="sm">Node server + app.js</td>
</tr>
<tr data-start="2567" data-end="2595">
<td data-start="2567" data-end="2580" data-col-size="sm">Routes.php</td>
<td data-start="2580" data-end="2595" data-col-size="sm">routes/*.js</td>
</tr>
<tr data-start="2596" data-end="2630">
<td data-start="2596" data-end="2610" data-col-size="sm">Controllers</td>
<td data-start="2610" data-end="2630" data-col-size="sm">controllers/*.js</td>
</tr>
<tr data-start="2631" data-end="2664">
<td data-start="2631" data-end="2649" data-col-size="sm">php spark serve</td>
<td data-start="2649" data-end="2664" data-col-size="sm">npm run dev</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr data-start="2666" data-end="2669" />
<h2 data-start="2671" data-end="2691">🎯 Current Status</h2>
<p data-start="2692" data-end="2771">✔ Node installed<br data-start="2708" data-end="2711" />✔ npm working<br data-start="2724" data-end="2727" />✔ Project setup<br data-start="2742" data-end="2745" />✔ Express server running</p>
<hr data-start="2773" data-end="2776" />
<h2 data-start="2778" data-end="2809">🔜 NEXT TOPIC (Future Notes)</h2>
<ul data-start="2810" data-end="2930">
<li data-start="2810" data-end="2836">
<p data-start="2812" data-end="2836">MySQL connection (XAMPP)</p>
</li>
<li data-start="2837" data-end="2871">
<p data-start="2839" data-end="2871">CRUD (GET / POST / PUT / DELETE)</p>
</li>
<li data-start="2872" data-end="2900">
<p data-start="2874" data-end="2900">Admin panel + User website</p>
</li>
<li data-start="2901" data-end="2912">
<p data-start="2903" data-end="2912">JWT login</p>
</li>
<li data-start="2913" data-end="2930">
<p data-start="2915" data-end="2930">E-commerce flow</p>
</li>
</ul>
<p>The post <a href="https://www.codypaste.com/node-js-basic-setup-beginner/">NODE.JS BASIC SETUP – (BEGINNER)</a> appeared first on <a href="https://www.codypaste.com">Cody Paste</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.codypaste.com/node-js-basic-setup-beginner/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Encrypt Decrypt in CI4</title>
		<link>https://www.codypaste.com/encrypt-decrypt-in-ci4/</link>
					<comments>https://www.codypaste.com/encrypt-decrypt-in-ci4/?noamp=mobile#respond</comments>
		
		<dc:creator><![CDATA[Admin]]></dc:creator>
		<pubDate>Wed, 30 Apr 2025 08:56:07 +0000</pubDate>
				<category><![CDATA[CodeIgniter]]></category>
		<category><![CDATA[CodeIgniter 4]]></category>
		<guid isPermaLink="false">https://www.codypaste.com/?p=1273</guid>

					<description><![CDATA[<p>Encrypt &#38; Decrypt in CI4, like id in parameter or anything. STEP 1: [crayon-69859eb70dfcf502344956/] STEP 2: (Encrypt) [crayon-69859eb70dfdf978033806/] STEP 3: (Decrypt) [crayon-69859eb70dfe3813625048/] &#160; In View File [crayon-69859eb70dfe5434534146/] [crayon-69859eb70dfe8830968105/] &#160; &#160;</p>
<p>The post <a href="https://www.codypaste.com/encrypt-decrypt-in-ci4/">Encrypt Decrypt in CI4</a> appeared first on <a href="https://www.codypaste.com">Cody Paste</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Encrypt &amp; Decrypt in CI4, like id in parameter or anything.</p>
<p>STEP 1:</p><pre class="urvanov-syntax-highlighter-plain-tag">public function __construct() {        
   $this-&gt;encrypter  = \Config\Services::encrypter();       
}</pre><p>STEP 2: (Encrypt)</p><pre class="urvanov-syntax-highlighter-plain-tag">$ids = '123'
$id = bin2hex($this-&gt;encrypter-&gt;encrypt($ids));</pre><p>STEP 3: (Decrypt)</p><pre class="urvanov-syntax-highlighter-plain-tag">$id = $this-&gt;encrypter-&gt;decrypt(hex2bin($id));</pre><p>&nbsp;</p>
<h2>In View File</h2>
<p></p><pre class="urvanov-syntax-highlighter-plain-tag">&lt;?php
    $encrypter        = \Config\Services::encrypter();
 ?&gt;</pre><p></p><pre class="urvanov-syntax-highlighter-plain-tag">&lt;a href="&lt;?= base_url('customer/order-detail/' . bin2hex($encrypter-&gt;encrypt($order['orderid']))) ?&gt;"&gt;View Order&lt;/a&gt;</pre><p>&nbsp;</p>
<p>&nbsp;</p>
<p>The post <a href="https://www.codypaste.com/encrypt-decrypt-in-ci4/">Encrypt Decrypt in CI4</a> appeared first on <a href="https://www.codypaste.com">Cody Paste</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.codypaste.com/encrypt-decrypt-in-ci4/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Encrypt Password in CI4</title>
		<link>https://www.codypaste.com/encrypt-password-in-ci4/</link>
					<comments>https://www.codypaste.com/encrypt-password-in-ci4/?noamp=mobile#respond</comments>
		
		<dc:creator><![CDATA[Admin]]></dc:creator>
		<pubDate>Mon, 28 Apr 2025 09:57:22 +0000</pubDate>
				<category><![CDATA[CodeIgniter]]></category>
		<category><![CDATA[CodeIgniter 4]]></category>
		<guid isPermaLink="false">https://www.codypaste.com/?p=1271</guid>

					<description><![CDATA[<p>Password encrypt and match in CI4 with hash encrypt Encrypt: [crayon-69859eb70e92b077704920/] Match: [crayon-69859eb70e94e343736653/] &#160;</p>
<p>The post <a href="https://www.codypaste.com/encrypt-password-in-ci4/">Encrypt Password in CI4</a> appeared first on <a href="https://www.codypaste.com">Cody Paste</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Password encrypt and match in CI4 with hash encrypt</p>
<p>Encrypt:</p><pre class="urvanov-syntax-highlighter-plain-tag">$pwd = password_hash($this-&gt;request-&gt;getPost('pwd'), PASSWORD_BCRYPT);</pre><p>Match:</p><pre class="urvanov-syntax-highlighter-plain-tag">$user = $this-&gt;db-&gt;table('customer')
                         -&gt;select('id, first_name, last_name, uname, emailid, contact, picture, pwd')  // Email aur password select karo
                         -&gt;where('emailid', $email)
                         -&gt;get()
                         -&gt;getRow();
                         
                    
                    if ($user &amp;&amp; password_verify($password, $user-&gt;pwd)) {
                        
                        $record = $user;
                        // Password matches, login successful
                        $this-&gt;session-&gt;set('customerSessData', $record);
                        return redirect()-&gt;to('customer/dashboard')-&gt;with('success', 'Welcome to Dashboard');
                        // Redirect to dashboard or desired page
                    }</pre><p>&nbsp;</p>
<p>The post <a href="https://www.codypaste.com/encrypt-password-in-ci4/">Encrypt Password in CI4</a> appeared first on <a href="https://www.codypaste.com">Cody Paste</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.codypaste.com/encrypt-password-in-ci4/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Encrypt decrypt in CI4 &#8211; CodeIgniter 4</title>
		<link>https://www.codypaste.com/encrypt-decrypt-in-ci4-codeigniter-4/</link>
					<comments>https://www.codypaste.com/encrypt-decrypt-in-ci4-codeigniter-4/?noamp=mobile#respond</comments>
		
		<dc:creator><![CDATA[Admin]]></dc:creator>
		<pubDate>Fri, 24 Jan 2025 06:19:30 +0000</pubDate>
				<category><![CDATA[CodeIgniter]]></category>
		<category><![CDATA[CodeIgniter 4]]></category>
		<guid isPermaLink="false">https://www.codypaste.com/?p=1267</guid>

					<description><![CDATA[<p>To pass an encrypted value in a URL and decrypt it in CodeIgniter 4 (CI4), you can use the Encryption library provided by CI4. Here&#8217;s how to implement this: 1. Configure Encryption in CI4 Ensure that the encryption service is properly set up. Open the app/Config/Encryption.php file and configure it: [crayon-69859eb70ec9e128528265/] Replace your-encryption-key with a &#8230; </p>
<p class="link-more"><a href="https://www.codypaste.com/encrypt-decrypt-in-ci4-codeigniter-4/" class="more-link">read more<span class="screen-reader-text"> "Encrypt decrypt in CI4 &#8211; CodeIgniter 4"</span></a></p>
<p>The post <a href="https://www.codypaste.com/encrypt-decrypt-in-ci4-codeigniter-4/">Encrypt decrypt in CI4 &#8211; CodeIgniter 4</a> appeared first on <a href="https://www.codypaste.com">Cody Paste</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>To pass an encrypted value in a URL and decrypt it in CodeIgniter 4 (CI4), you can use the <code>Encryption</code> library provided by CI4. Here&#8217;s how to implement this:</p>
<hr />
<h3>1. <strong>Configure Encryption in CI4</strong></h3>
<p>Ensure that the encryption service is properly set up. Open the <code>app/Config/Encryption.php</code> file and configure it:</p><pre class="urvanov-syntax-highlighter-plain-tag">&lt;?php

namespace Config;

use CodeIgniter\Config\BaseConfig;

class Encryption extends BaseConfig
{
    public $key = 'your-encryption-key'; // Replace with a random key
    public $driver = 'OpenSSL';         // Use OpenSSL for encryption
}</pre><p>Replace <code>your-encryption-key</code> with a strong random key. You can generate one using <code>bin2hex(random_bytes(32))</code> in PHP.</p>
<p>&nbsp;</p>
<h3>2. <strong>Encrypt the Value</strong></h3>
<p>Use CI4&#8217;s <code>encrypter()</code> helper to encrypt the value before adding it to the URL:</p><pre class="urvanov-syntax-highlighter-plain-tag">use CodeIgniter\Encryption\Encryption;

$encrypter = \Config\Services::encrypter();

// The value to encrypt
$data = 'your-value-to-encrypt';

// Encrypt the value
$encryptedValue = base64_encode($encrypter-&gt;encrypt($data));

// Pass the encrypted value in the URL
$url = base_url('your-controller/your-method/' . $encryptedValue);</pre><p>&nbsp;</p>
<h3>3. <strong>Decrypt the Value</strong></h3>
<p>Retrieve and decrypt the value in your controller:</p><pre class="urvanov-syntax-highlighter-plain-tag">public function yourMethod($encryptedValue)
{
    $encrypter = \Config\Services::encrypter();

    // Decode and decrypt the value
    try {
        $decryptedValue = $encrypter-&gt;decrypt(base64_decode($encryptedValue));
        echo 'Decrypted Value: ' . $decryptedValue;
    } catch (\Exception $e) {
        // Handle errors (e.g., invalid encryption or tampered data)
        echo 'Decryption failed: ' . $e-&gt;getMessage();
    }
}</pre><p>&nbsp;</p>
<p>&nbsp;</p>
<h3>4. <strong>Example Flow</strong></h3>
<ul>
<li><strong>Encrypt and Generate URL:</strong>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="urvanov-syntax-highlighter-plain-tag">$data = '12345';
$encryptedValue = base64_encode($encrypter-&gt;encrypt($data));
echo base_url('example/decrypt/' . $encryptedValue);</pre><br />
<strong>Decrypt in Controller:</strong></p>
</div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr">
<pre class="urvanov-syntax-highlighter-plain-tag">public function decrypt($encryptedValue)
{
    $encrypter = \Config\Services::encrypter();
    $decryptedValue = $encrypter-&gt;decrypt(base64_decode($encryptedValue));
    echo 'Decrypted Value: ' . $decryptedValue;
}</pre><br />
&nbsp;</p>
</div>
</div>
</li>
</ul>
<p>The post <a href="https://www.codypaste.com/encrypt-decrypt-in-ci4-codeigniter-4/">Encrypt decrypt in CI4 &#8211; CodeIgniter 4</a> appeared first on <a href="https://www.codypaste.com">Cody Paste</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.codypaste.com/encrypt-decrypt-in-ci4-codeigniter-4/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Random Unique Number in CI3</title>
		<link>https://www.codypaste.com/random-unique-number-in-ci3/</link>
					<comments>https://www.codypaste.com/random-unique-number-in-ci3/?noamp=mobile#respond</comments>
		
		<dc:creator><![CDATA[Admin]]></dc:creator>
		<pubDate>Mon, 06 Jan 2025 10:29:53 +0000</pubDate>
				<category><![CDATA[CodeIgniter]]></category>
		<category><![CDATA[PHP]]></category>
		<guid isPermaLink="false">https://www.codypaste.com/?p=1263</guid>

					<description><![CDATA[<p>Random Unique 6 digit number generation in CI3 [crayon-69859eb70eff8464099011/] &#160;</p>
<p>The post <a href="https://www.codypaste.com/random-unique-number-in-ci3/">Random Unique Number in CI3</a> appeared first on <a href="https://www.codypaste.com">Cody Paste</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Random Unique 6 digit number generation in CI3</p><pre class="urvanov-syntax-highlighter-plain-tag">public function generateCoupon($numCoupons = 32500) {
        // Define allowed characters for alphabet and digits
        $alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        $digits = '0123456789';
        $alphaLength = strlen($alphabet);
        $digitLength = strlen($digits);

        // Coupon amount distribution
        $amountDistribution = [
            500 =&gt; 2000,  // 2000 coupons with amount 500
            200 =&gt; 5000,  // 5000 coupons with amount 200
            100 =&gt; 7000,  // 7000 coupons with amount 100
            50  =&gt; 18500  // 18500 coupons with amount 50
        ];

        // Prepare the data for batch insert
        $insertData = [];
        $couponCount = 0;
        $coupons = [];

        // Loop through each amount distribution
        foreach ($amountDistribution as $amount =&gt; $count) {
            for ($i = 0; $i &lt; $count; $i++) {
                // Generate a unique coupon code in the format AAA111
                $couponCode = '';
                while (true) {
                    // First 3 characters: Alphabetical
                    $couponCode = '';
                    for ($j = 0; $j &lt; 3; $j++) {
                        $couponCode .= $alphabet[rand(0, $alphaLength - 1)];
                    }

                    // Last 3 characters: Numeric
                    for ($k = 0; $k &lt; 3; $k++) {
                        $couponCode .= $digits[rand(0, $digitLength - 1)];
                    }

                    // Check if the coupon code is unique
                    if (!in_array($couponCode, $coupons)) {
                        // Add unique coupon to the list and exit while loop
                        $coupons[] = $couponCode;
                        break;
                    }
                }

                // Prepare data for batch insert
                $insertData[] = [
                    'coupon' =&gt; $couponCode,
                    'amount' =&gt; $amount,
                    'expire_date' =&gt; date('Y-m-d'), // Set expire_date to today's date
                    'status' =&gt; 1
                ];

                $couponCount++;

                // Optional: Break early for testing purposes
                if ($couponCount &gt;= $numCoupons) {
                    break 2; // Break out of both loops
                }
            }
        }

        // Insert coupons in batches (chunk size of 500 or smaller to avoid memory issues)
        $chunks = array_chunk($insertData, 500);
        foreach ($chunks as $chunk) {
            $this-&gt;db-&gt;insert_batch('coupon', $chunk); // Insert the current chunk
        }

        echo count($insertData); // Return the number of coupons inserted
    }</pre><p>&nbsp;</p>
<p>The post <a href="https://www.codypaste.com/random-unique-number-in-ci3/">Random Unique Number in CI3</a> appeared first on <a href="https://www.codypaste.com">Cody Paste</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.codypaste.com/random-unique-number-in-ci3/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Hash Password in CI4</title>
		<link>https://www.codypaste.com/hash-password-in-ci4/</link>
					<comments>https://www.codypaste.com/hash-password-in-ci4/?noamp=mobile#respond</comments>
		
		<dc:creator><![CDATA[Admin]]></dc:creator>
		<pubDate>Fri, 03 Jan 2025 10:57:51 +0000</pubDate>
				<category><![CDATA[CodeIgniter 4]]></category>
		<guid isPermaLink="false">https://www.codypaste.com/?p=1259</guid>

					<description><![CDATA[<p>Password: 1. Created a Helper Function Created helper functions for password hashing and verification to reuse across your application. Create a file in app/Helpers, e.g., app/Helpers/password_helper.php password_helper.php [crayon-69859eb70f28e222991358/] &#160; &#160; 2. Hash Password During Registration [crayon-69859eb70f299136053920/] &#160; 3. Verify Password During Login [crayon-69859eb70f29c109877819/] If the password is verified, it will return 1, else blank. e.g. &#8230; </p>
<p class="link-more"><a href="https://www.codypaste.com/hash-password-in-ci4/" class="more-link">read more<span class="screen-reader-text"> "Hash Password in CI4"</span></a></p>
<p>The post <a href="https://www.codypaste.com/hash-password-in-ci4/">Hash Password in CI4</a> appeared first on <a href="https://www.codypaste.com">Cody Paste</a>.</p>
]]></description>
										<content:encoded><![CDATA[<h4>Password:</h4>
<p><b>1. Created a Helper Function</b><br />
Created helper functions for password hashing and verification to reuse across your application.</p>
<p>Create a file in app/Helpers, e.g.,<strong> app/Helpers/password_helper.php</strong></p>
<p><strong>password_helper.php</strong></p><pre class="urvanov-syntax-highlighter-plain-tag">&lt;?php
    if (!function_exists('hash_password')) {
        function hash_password($password) {
            return password_hash($password, PASSWORD_BCRYPT);
        }
    }
    
    if (!function_exists('verify_password')) {
        function verify_password($input_password, $stored_hash) {
            return password_verify($input_password, $stored_hash);
        }
    }
?&gt;</pre><p>&nbsp;</p>
<p>&nbsp;</p>
<p><b>2. Hash Password During Registration</b></p><pre class="urvanov-syntax-highlighter-plain-tag">$password = $this-&gt;request-&gt;getPost('password');
$hashed_password = hash_password($password);</pre><p>&nbsp;</p>
<p><b>3. Verify Password During Login</b></p><pre class="urvanov-syntax-highlighter-plain-tag">$password = $this-&gt;request-&gt;getPost('password');
verify_password($input_password, $user-&gt;password);</pre><p>If the password is verified, it will return 1, else blank. e.g. below</p><pre class="urvanov-syntax-highlighter-plain-tag">if(verify_password($password, $user-&gt;password)) {
	// Set session or other login logic
	session()-&gt;set(['username' =&gt; $user-&gt;username]);
	return redirect()-&gt;to('/superadmin/dashboard')-&gt;with('success', 'Login successful!');
}else {
	return redirect()-&gt;back()-&gt;with('error', 'Invalid credentials!');
}</pre><p>&nbsp;</p>
<p>&nbsp;</p>
<p>The post <a href="https://www.codypaste.com/hash-password-in-ci4/">Hash Password in CI4</a> appeared first on <a href="https://www.codypaste.com">Cody Paste</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.codypaste.com/hash-password-in-ci4/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Login in CI4 Complete Code</title>
		<link>https://www.codypaste.com/login-in-ci4-complete-code/</link>
					<comments>https://www.codypaste.com/login-in-ci4-complete-code/?noamp=mobile#respond</comments>
		
		<dc:creator><![CDATA[Admin]]></dc:creator>
		<pubDate>Fri, 03 Jan 2025 10:51:14 +0000</pubDate>
				<category><![CDATA[CodeIgniter 4]]></category>
		<guid isPermaLink="false">https://www.codypaste.com/?p=1256</guid>

					<description><![CDATA[<p>Controller: [crayon-69859eb70f547853352472/] Password: 1. Created a Helper Function created helper functions for password hashing and verification to reuse them across your application. Create a file in app/Helpers, e.g., app/Helpers/password_helper.php hash_password($password) verify_password($input_password, $stored_hash) Load this helper in your application: helper('password'); 2. Hash Password During Registration $password = $this-&#62;request-&#62;getPost('password'); $hashed_password = hash_password($password); &#160; 3. Verify Password During &#8230; </p>
<p class="link-more"><a href="https://www.codypaste.com/login-in-ci4-complete-code/" class="more-link">read more<span class="screen-reader-text"> "Login in CI4 Complete Code"</span></a></p>
<p>The post <a href="https://www.codypaste.com/login-in-ci4-complete-code/">Login in CI4 Complete Code</a> appeared first on <a href="https://www.codypaste.com">Cody Paste</a>.</p>
]]></description>
										<content:encoded><![CDATA[<h2><strong>Controller:</strong></h2>
<p></p><pre class="urvanov-syntax-highlighter-plain-tag">public function login(){
        if(!empty($_POST)){
            
            // Form Validation--&gt;
                $validation =  \Config\Services::validation();
                $validation-&gt;setRules([
                    'username' =&gt; ['label' =&gt; 'Username',  'rules' =&gt; 'required'],
                    'password'  =&gt; ['label' =&gt; 'Password', 'rules' =&gt; 'required']
                ]);
            // Form Validation Close--&gt;
            
            if(!$validation-&gt;withRequest($this-&gt;request)-&gt;run()) {
                $validationErrors = $validation-&gt;listErrors();
                // Redirect back with validation errors
                return redirect()-&gt;back()-&gt;with('error', $validationErrors);
            }else{
                $username   = $this-&gt;request-&gt;getPost('username');
        		$password   = $this-&gt;request-&gt;getPost('password');
        		
        		$user = $this-&gt;db-&gt;table('superadmin')-&gt;where('username', $username)-&gt;get()-&gt;getRow();
        		
        		if ($user) {
                    // Verify the password
                    if (verify_password($password, $user-&gt;password)) {
                        // Set session or other login logic
                        session()-&gt;set(['username' =&gt; $user-&gt;username]);
                        return redirect()-&gt;to('/superadmin/dashboard')-&gt;with('success', 'Login successful!');
                    } else {
                        return redirect()-&gt;back()-&gt;with('error', 'Invalid credentials!');
                    }
                }else {
                    return redirect()-&gt;back()-&gt;with('error', 'User not found!');
                }
            }
		}
		else{			
            echo view('superadmin/includes/header');
            echo view('superadmin/login');
            echo view('superadmin/includes/footer');           
		}    
    }</pre><p></p>
<h4>Password:</h4>
<p><b>1. Created a Helper Function</b><br />
created helper functions for password hashing and verification to reuse them across your application.</p>
<p>Create a file in app/Helpers, e.g., app/Helpers/password_helper.php<br />
<code>hash_password($password)</code></p>
<p>verify_password($input_password, $stored_hash)</p>
<p>Load this helper in your application:</p>
<p><code>helper('password');</code></p>
<p><b>2. Hash Password During Registration</b></p>
<p><code>$password = $this-&gt;request-&gt;getPost('password');<br />
$hashed_password = hash_password($password);</code></p>
<p>&nbsp;</p>
<p><b>3. Verify Password During Login</b></p>
<p><code>$password = $this-&gt;request-&gt;getPost('password');<br />
verify_password($input_password, $user-&gt;password)</code><br />
If password verify will return 1, else blank.</p>
<h4>Redirect (Back to request page):</h4>
<p><code>return redirect()-&gt;back()-&gt;with('error', 'Invalid credentials!');</code></p>
<p><b>Form validation error</b><br />
<code>if(!$validation-&gt;withRequest($this-&gt;request)-&gt;run()) {<br />
$validationErrors = $validation-&gt;listErrors();<br />
// Redirect back with validation errors<br />
return redirect()-&gt;back()-&gt;with('error', $validationErrors);<br />
}</code></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2><strong>Model:</strong></h2>
<p>Not used</p>
<h2><strong>View:</strong></h2>
<p></p><pre class="urvanov-syntax-highlighter-plain-tag">&lt;h1&gt;Login Super Admin&lt;/h1&gt;

&lt;?php if (session()-&gt;get('error')): ?&gt;
    &lt;div class="alert alert-danger"&gt;
        &lt;?= session()-&gt;get('error') ?&gt;
    &lt;/div&gt;
&lt;?php endif; ?&gt;

&lt;form action="&lt;?php echo base_url(); ?&gt;superadmin/login" method="post"&gt;
    &lt;input type="text" name="username"&gt;
    &lt;input type="password" name="password"&gt;
    &lt;button type="submit"&gt;LOGIN&lt;/button&gt;
&lt;/form&gt;</pre><p>&nbsp;</p>
<h2><strong>Password Helper:</strong></h2>
<p>app/Helpers/password_helper.php</p><pre class="urvanov-syntax-highlighter-plain-tag">&lt;?php
    if (!function_exists('hash_password')) {
        function hash_password($password) {
            return password_hash($password, PASSWORD_BCRYPT);
        }
    }
    
    if (!function_exists('verify_password')) {
        function verify_password($input_password, $stored_hash) {
            return password_verify($input_password, $stored_hash);
        }
    }
?&gt;</pre><p>&nbsp;</p>
<p>The post <a href="https://www.codypaste.com/login-in-ci4-complete-code/">Login in CI4 Complete Code</a> appeared first on <a href="https://www.codypaste.com">Cody Paste</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.codypaste.com/login-in-ci4-complete-code/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
