ReactJS Home

Last modified on: September 7, 2025

<h2 data-start="191" data-end="224"><strong data-start="194" data-end="224">1. Introduction to ReactJS</strong></h2>
<ul data-start="225" data-end="505">
<li data-start="225" data-end="350">
<p data-start="227" data-end="350"><strong data-start="227" data-end="238">ReactJS</strong> is a <strong data-start="244" data-end="266">JavaScript library</strong> for building <strong data-start="280" data-end="299">user interfaces</strong>, especially <strong data-start="312" data-end="347">single-page applications (SPAs)</strong>.</p>
</li>
<li data-start="351" data-end="441">
<p data-start="353" data-end="441">Created by <strong data-start="364" data-end="376">Facebook</strong>, React allows developers to create <strong data-start="412" data-end="438">reusable UI components</strong>.</p>
</li>
<li data-start="442" data-end="505">
<p data-start="444" data-end="505">Core concept: <strong data-start="458" data-end="502">Components + State + Props + Virtual DOM</strong>.</p>
</li>
</ul>
<p data-start="507" data-end="521"><strong data-start="507" data-end="521">Why React?</strong></p>
<ul data-start="522" data-end="681">
<li data-start="522" data-end="558">
<p data-start="524" data-end="558">Fast updates with <strong data-start="542" data-end="557">Virtual DOM</strong>.</p>
</li>
<li data-start="559" data-end="590">
<p data-start="561" data-end="590">Component-based architecture.</p>
</li>
<li data-start="591" data-end="642">
<p data-start="593" data-end="642">Easy integration with other libraries/frameworks.</p>
</li>
<li data-start="643" data-end="681">
<p data-start="645" data-end="681">Large ecosystem &amp; community support.</p>
</li>
</ul>
<hr data-start="683" data-end="686" />
<h2 data-start="688" data-end="714"><strong data-start="691" data-end="714">2. Setting Up React</strong></h2>
<p data-start="715" data-end="749">You can start React in two ways:</p>
<h3 data-start="751" data-end="784"><strong data-start="755" data-end="784">a) Using Create React App</strong></h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky 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">
<pre class="language-javascript"><code>npx create-react-app my-app
cd my-app
npm start
</code></pre>
</div>
</div>
</div>
</div>
<ul data-start="845" data-end="1034">
<li data-start="845" data-end="893">
<p data-start="847" data-end="893">Opens <code data-start="853" data-end="876">http://localhost:3000</code> in your browser.</p>
</li>
<li data-start="894" data-end="1034">
<p data-start="896" data-end="920">React project structure:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky 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">
<pre class="language-javascript"><code>my-app/
├─ node_modules/
├─ public/
├─ src/
│  ├─ App.js
│  ├─ index.js
└─ package.json
</code></pre>
</div>
</div>
</div>
</div>
</li>
</ul>
<h3 data-start="1036" data-end="1078"><strong data-start="1040" data-end="1078">b) Using Vite (Modern Alternative)</strong></h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky 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">
<pre class="language-javascript"><code>npm create vite@latest my-app
cd my-app
npm install
npm run dev
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="1156" data-end="1159" />
<h2 data-start="1161" data-end="1187"><strong data-start="1164" data-end="1187">3. React Components</strong></h2>
<p data-start="1188" data-end="1229">Components are <strong data-start="1203" data-end="1228">building blocks of UI</strong>.</p>
<h3 data-start="1231" data-end="1262"><strong data-start="1235" data-end="1262">a) Functional Component</strong></h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky 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">
<pre class="language-javascript"><code>function Greeting() {
  return &lt;h1&gt;Hello, React!&lt;/h1&gt;;
}
export default Greeting;
</code></pre>
</div>
</div>
</div>
</div>
<h3 data-start="1357" data-end="1383"><strong data-start="1361" data-end="1383">b) Class Component</strong></h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky 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">
<pre class="language-javascript"><code>import React, { Component } from "react";

class Greeting extends Component {
  render() {
    return &lt;h1&gt;Hello, React Class!&lt;/h1&gt;;
  }
}

export default Greeting;
</code></pre>
</div>
</div>
</div>
</div>
<blockquote data-start="1560" data-end="1620">
<p data-start="1562" data-end="1620">Modern React prefers <strong data-start="1583" data-end="1619">functional components with hooks</strong>.</p>
</blockquote>
<hr data-start="1622" data-end="1625" />
<h2 data-start="1627" data-end="1657"><strong data-start="1630" data-end="1657">4. JSX (JavaScript XML)</strong></h2>
<ul data-start="1658" data-end="1704">
<li data-start="1658" data-end="1704">
<p data-start="1660" data-end="1704">JSX allows writing <strong data-start="1679" data-end="1703">HTML-like code in JS</strong>.</p>
</li>
</ul>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky 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">
<pre class="language-javascript"><code>const element = &lt;h1&gt;Hello, JSX!&lt;/h1&gt;;
</code></pre>
</div>
</div>
</div>
</div>
<ul data-start="1754" data-end="1880">
<li data-start="1754" data-end="1880">
<p data-start="1756" data-end="1762">Rules:</p>
<ul data-start="1765" data-end="1880">
<li data-start="1765" data-end="1800">
<p data-start="1767" data-end="1800">Must have <strong data-start="1777" data-end="1799">one parent element</strong>.</p>
</li>
<li data-start="1803" data-end="1842">
<p data-start="1805" data-end="1842">Use <strong data-start="1809" data-end="1822">className</strong> instead of <code data-start="1834" data-end="1841">class</code>.</p>
</li>
<li data-start="1845" data-end="1880">
<p data-start="1847" data-end="1880">Use <code data-start="1851" data-end="1855">{}</code> to embed JS expressions.</p>
</li>
</ul>
</li>
</ul>
<hr data-start="1882" data-end="1885" />
<h2 data-start="1887" data-end="1915"><strong data-start="1890" data-end="1915">5. Props (Properties)</strong></h2>
<ul data-start="1916" data-end="1954">
<li data-start="1916" data-end="1954">
<p data-start="1918" data-end="1954">Used to <strong data-start="1926" data-end="1953">pass data to components</strong>.</p>
</li>
</ul>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky 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">
<pre class="language-javascript"><code>function Greeting({ name }) {
  return &lt;h1&gt;Hello, {name}!&lt;/h1&gt;;
}

// Usage
&lt;Greeting name="Alice" /&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="2069" data-end="2072" />
<h2 data-start="2074" data-end="2089"><strong data-start="2077" data-end="2089">6. State</strong></h2>
<ul data-start="2090" data-end="2181">
<li data-start="2090" data-end="2135">
<p data-start="2092" data-end="2135">Represents <strong data-start="2103" data-end="2119">dynamic data</strong> in a component.</p>
</li>
<li data-start="2136" data-end="2181">
<p data-start="2138" data-end="2181"><strong data-start="2138" data-end="2181">Functional Component with useState Hook</strong></p>
</li>
</ul>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky 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">
<pre class="language-javascript"><code>import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

return (
    &lt;div&gt;
      &lt;h1&gt;Count: {count}&lt;/h1&gt;
      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Increment&lt;/button&gt;
    &lt;/div&gt;
  );
}
export default Counter;
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="2461" data-end="2464" />
<h2 data-start="2466" data-end="2490"><strong data-start="2469" data-end="2490">7. Event Handling</strong></h2>
<ul data-start="2491" data-end="2531">
<li data-start="2491" data-end="2531">
<p data-start="2493" data-end="2531">Similar to HTML but use <strong data-start="2517" data-end="2530">camelCase</strong>.</p>
</li>
</ul>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky 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">
<pre class="language-javascript"><code>&lt;button onClick={() =&gt; alert("Clicked!")}&gt;Click Me&lt;/button&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="2604" data-end="2607" />
<h2 data-start="2609" data-end="2640"><strong data-start="2612" data-end="2640">8. Conditional Rendering</strong></h2>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky 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">
<pre class="language-javascript"><code>function UserStatus({ isLoggedIn }) {
  return &lt;h1&gt;{isLoggedIn ? "Welcome Back!" : "Please Login"}&lt;/h1&gt;;
}
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="2760" data-end="2763" />
<h2 data-start="2765" data-end="2789"><strong data-start="2768" data-end="2789">9. Lists and Keys</strong></h2>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky 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">
<pre class="language-javascript"><code>const fruits = ["Apple", "Banana", "Orange"];
&lt;ul&gt;
  {fruits.map((fruit, index) =&gt; (
    &lt;li key={index}&gt;{fruit}&lt;/li&gt;
  ))}
&lt;/ul&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="2932" data-end="2935" />
<h2 data-start="2937" data-end="2973"><strong data-start="2940" data-end="2973">10. React Router (Navigation)</strong></h2>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky 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">
<pre class="language-javascript"><code>npm install react-router-dom
</code></pre>
</div>
</div>
</div>
</div>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky 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">
<pre class="language-javascript"><code>import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

useEffect(() =&gt; {
  console.log("Component Mounted or Updated");
  return () =&gt; console.log("Cleanup");
}, []); // Empty array =&gt; componentDidMount only
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="3737" data-end="3740" />
<h2 data-start="3742" data-end="3767"><strong data-start="3745" data-end="3767">12. Forms Handling</strong></h2>
<pre class="language-javascript"><code>import { useState } from "react";

function Form() {
  const [name, setName] = useState("");

const handleSubmit = (e) =&gt; {
    e.preventDefault();
    alert(`Hello, ${name}`);
  };

return (
    &lt;form onSubmit={handleSubmit}&gt;
      &lt;input value={name} onChange={(e) =&gt; setName(e.target.value)} /&gt;
      &lt;button type="submit"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  );
}
</code></pre>
<hr data-start="4145" data-end="4148" />
<h2 data-start="4150" data-end="4175"><strong data-start="4153" data-end="4175">13. Best Practices</strong></h2>
<ul data-start="4176" data-end="4387">
<li data-start="4176" data-end="4217">
<p data-start="4178" data-end="4217">Keep components <strong data-start="4194" data-end="4216">small and reusable</strong>.</p>
</li>
<li data-start="4218" data-end="4262">
<p data-start="4220" data-end="4262">Use <strong data-start="4224" data-end="4249">functional components</strong> + <strong data-start="4252" data-end="4261">hooks</strong>.</p>
</li>
<li data-start="4263" data-end="4330">
<p data-start="4265" data-end="4330">Avoid <strong data-start="4271" data-end="4291">inline functions</strong> in render (use callbacks when needed).</p>
</li>
<li data-start="4331" data-end="4387">
<p data-start="4333" data-end="4387">Use <strong data-start="4337" data-end="4350">PropTypes</strong> or <strong data-start="4354" data-end="4368">TypeScript</strong> for type checking.</p>
</li>
</ul>
<hr data-start="4389" data-end="4392" />
<h2 data-start="4394" data-end="4415"><strong data-start="4397" data-end="4415">14. Next Steps</strong></h2>
<ul data-start="4416" data-end="4611">
<li data-start="4416" data-end="4461">
<p data-start="4418" data-end="4461">Learn <strong data-start="4424" data-end="4439">Context API</strong> for state management.</p>
</li>
<li data-start="4462" data-end="4514">
<p data-start="4464" data-end="4514">Explore <strong data-start="4472" data-end="4481">Redux</strong> or <strong data-start="4485" data-end="4496">Zustand</strong> for complex apps.</p>
</li>
<li data-start="4515" data-end="4557">
<p data-start="4517" data-end="4557">Learn <strong data-start="4523" data-end="4538">React Query</strong> for data fetching.</p>
</li>
<li data-start="4558" data-end="4611">
<p data-start="4560" data-end="4611">Optimize performance with <strong data-start="4586" data-end="4610">memo, lazy, suspense</strong>.</p>
</li>
</ul>

Web Technology View More