<h2>Introduction to React.js </h2>​React.js is a JavaScript library developed by Facebook for building user interfaces. It is widely used for creating single-page applications (SPAs) and dynamic web applications. React is known for its component-based architecture, virtual DOM, and declarative programming style, making it efficient and easy to use.​ <h2>Key Features of React.js</h2><ul><li style="background-color: transparent">Component-Based Architecture: React applications are built using reusable components, which encapsulate logic and UI, making development modular and maintainable.</li><li style="background-color: transparent;font-size: 18px">Virtual DOM: React uses a virtual DOM to efficiently update and render components. It minimizes direct manipulation of the real DOM, improving performance.</li><li style="background-color: transparent;font-size: 18px">Declarative UI: React allows developers to describe what the UI should look like, and it handles the rendering and updates automatically.</li><li style="background-color: transparent;font-size: 18px">Unidirectional Data Flow: Data flows in a single direction, making it easier to debug and manage the state of the application.</li><li style="background-color: transparent;font-size: 18px">JSX (JavaScript XML): React uses JSX, a syntax extension that allows writing HTML-like code within JavaScript.</li><li style="background-color: transparent;font-size: 18px">React Hooks: Hooks like <code>useState</code> and <code>useEffect</code> enable functional components to manage state and lifecycle methods.</li><li style="background-color: transparent;font-size: 18px">Rich Ecosystem: React has a vast ecosystem of libraries and tools, including React Router, Redux, and more.</li></ul><h2>Why Use React.js? </h2><ul><li style="background-color: transparent;font-size: 18px">Fast and Efficient: The virtual DOM ensures high performance.</li><li style="background-color: transparent;font-size: 18px">Reusable Components: Write once, use anywhere.</li><li style="background-color: transparent;font-size: 18px">Large Community: React has a huge developer community and extensive documentation.</li><li style="background-color: transparent;font-size: 18px">Cross-Platform Development: React Native allows building mobile apps using React.</li></ul>

Introduction to React JS

<h2>Module Introduction in React.js </h2>​In React.js, modules are a way to organize and reuse code by splitting it into smaller, manageable, and reusable pieces. Modules allow developers to break down an application into multiple files, making the codebase easier to maintain, debug, and scale.<h2>​What is a Module in React.js?</h2>​A module in React.js is essentially a JavaScript file that exports functionality (like components, functions, or variables) so it can be imported and used in other files. React uses the ES6 module system for importing and exporting code. <h2>ES6 Module System</h2><blockquote><div>​The ES6 module system, introduced in ECMAScript 2015 (ES6), is a standardized way to organize and share code in JavaScript. It allows developers to split their code into smaller, reusable pieces called&nbsp;modules, which can be imported and exported as needed. This system replaces older module formats like CommonJS and AMD, offering a cleaner and more efficient approach to modular programming.​</div></blockquote>​ <h2>Why Use Modules in React.js? </h2><ul><li style="background-color: transparent;font-size: 18px">Code Reusability: Modules allow you to reuse components and logic across different parts of the application.</li><li style="background-color: transparent;font-size: 18px">Maintainability: Breaking the application into smaller modules makes it easier to manage and debug.</li><li style="background-color: transparent;font-size: 18px">Scalability: Modules help in organizing large applications by separating concerns.</li><li style="background-color: transparent;font-size: 18px">Collaboration: Modules make it easier for teams to work on different parts of the application simultaneously.</li></ul><h2>​</h2><h2>How Modules Work in React.js </h2>​React uses the import and export keywords to work with modules.<h3>Exporting Modules </h3>Named Export: Export multiple items from a file.<pre>//javascript file math.js export const add= (a, b) =&gt;a+b; export const subtract= (a, b) =&gt;a-b; </pre> ​Default Export: Export a single item from a file.<pre>//javascript const multiply= (a, b) =&gt;a*b; export default multiply; </pre><h3>Importing Modules </h3>​Named Import: Import specific items from a file<pre>​//javascript file import { add, subtract } from './math'; </pre> ​Default Import: Import the default export from a file.<pre>//javascript import multiply from './math'; </pre><h2>Real Time Module use in React.js:</h2>​File: <code>Header.js</code>.&nbsp;<pre>​​import React from 'react'; export default function Header() { return &lt;h1&gt;Welcome to My React App&lt;/h1&gt;; } </pre>File:<code>Footer.js</code>​<pre>​​import React from 'react'; export default function Footer() { return &lt;footer&gt;© 2025 My React App&lt;/footer&gt;; } </pre>File:<code>App.js</code>​<pre>​import React from 'react'; import Header from'./Header'; import Footer from'./Footer'; function App() { return ( &lt;div&gt; &lt;Header/&gt; &lt;p&gt;This is the main content of the app.&lt;/p&gt; &lt;Footer/&gt; &lt;/div&gt; ); } export default App; </pre><h2> </h2><h2>Types of Modules in React.js </h2><ul><li style="background-color: transparent">Component Modules: Reusable React components (e.g., <code>Header</code>, <code>Footer</code>).</li><li style="background-color: transparent;font-size: 18px">Utility Modules: Helper functions or constants (e.g., math operations, API calls).</li><li style="background-color: transparent;font-size: 18px">Style Modules: CSS or SCSS files for styling components.</li><li style="background-color: transparent">Third-Party Modules: External libraries or packages installed via npm (e.g., <code>react-router-dom</code>, <code>axios</code>).</li></ul> <h2>Best Practices for Using Modules in React.js </h2><ul><li style="background-color: transparent;font-size: 18px">Organize Files by Feature or Functionality: Group related files (e.g., components, styles, tests) together.</li><li style="background-color: transparent;font-size: 18px">Use Default Exports for Components: This makes importing components simpler.</li><li style="background-color: transparent;font-size: 18px">Use Named Exports for Utilities: This allows importing only the required functions or constants.</li><li style="background-color: transparent;font-size: 18px">Avoid Circular Dependencies: Ensure modules do not depend on each other in a loop.</li><li style="background-color: transparent;font-size: 18px">Follow a Consistent Naming Convention: Use meaningful names for files and modules.</li></ul>

Module Introduction

<h2>Install Node.js and npm </h2>React requires Node.js and npm (Node Package Manager). Download and install the latest stable version of Node.js from <a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer">https://nodejs.org/</a>. npm is included with Node.js.​ To verify the installation, run the following commands in your terminal:<pre>#bash node -v npm -v </pre><h2>Set Up a React Application</h2>We can create a React app using the <code>create-react-app</code> tool or other modern tools like Vite. Here's how to use <code>create-react-app</code>:​ <pre>#bash npx create-react-app my-app </pre>Replace <code>my-app</code> with your desired project name. The <code>npx</code> command ensures you use the latest version of <code>create-react-app</code>.<h3>​Navigate to your project directory and start the server: </h3><pre>#bash # Navigate to project directory​ cd my-app #Start the React server npm start </pre><blockquote>​This will open your app in the browser at <code>http://localhost:3000</code>.​ </blockquote><h2> </h2><h2>Key Differences Between <code>npx</code> and <code>npm</code>:​ </h2><table class="se-table-layout-fixed"><thead><tr><th><div>Feature </div></th><th><div>npm</div></th><th><div>npx</div></th></tr></thead><tbody><tr><td><div>Purpose </div></td><td><div>Installs and manages packages. </div></td><td><div>Executes packages without installing them globally. </div></td></tr><tr><td><div>Global Installation </div></td><td><div>Requires global installation for CLI tools. </div></td><td><div>No need for global installation; runs directly. </div></td></tr><tr><td><div>Version Management </div></td><td><div>May use outdated globally installed versions. </div></td><td><div>Always uses the latest version of the package. </div></td></tr><tr><td><div>Use Case </div></td><td><div>Installing dependencies for projects. </div></td><td><div>Running one-time commands or tools. </div></td></tr><tr><td><div>Example </div></td><td><div>npm install -g create-react-app </div></td><td><div>npx create-react-app my-app </div></td></tr></tbody></table> <h2>When to Use <code>npx</code> vs <code>npm</code>​ </h2><ul><li style="background-color: transparent">Use <code>npm</code> when: <ul><li style="background-color: transparent;font-size: 18px">You need to install a package as a dependency for your project.</li><li style="background-color: transparent;font-size: 18px">You want to install a package globally for frequent use.</li></ul></li><li style="background-color: transparent">Use <code>npx</code> when:<ul><li style="background-color: transparent;font-size: 18px">You want to run a package or CLI tool without installing it globally.</li><li style="background-color: transparent;font-size: 18px">You need to ensure you're using the latest version of a package.</li></ul> </li></ul>

React installation process

​When working on a React.js project, organizing your folder structure is crucial for maintaining scalability, readability, and ease of collaboration. A well-structured project ensures that your codebase remains clean and manageable, especially as your application grows in complexity. <h2>Why is Folder Structure Important in React.js? </h2><ul><li style="background-color: transparent;font-size: 18px">Scalability: A clear structure makes it easier to add new features without cluttering the codebase.</li><li style="background-color: transparent;font-size: 18px">Readability: Developers can quickly locate files and understand the project layout.</li><li style="background-color: transparent;font-size: 18px">Maintainability: A well-organized structure simplifies debugging and updating code.</li><li style="background-color: transparent;font-size: 18px">Collaboration: Teams can work more efficiently when the project follows a consistent structure.</li></ul> <h2>Basic React.js Folder Structure </h2>​When you create a React app using <code>create-react-app</code>, the default folder structure looks like this:<pre>​my-app/ ├── node_modules/ ├── public/ ├── src/ │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── reportWebVitals.js ├── .gitignore ├── package.json ├── README.md └── yarn.lock / package-lock.json </pre>While this structure is sufficient for small projects, larger applications require a more organized approach. <h2> </h2><h2>Recommended Folder Structure for React.js Projects </h2>​Here’s a commonly used folder structure for medium to large React.js applications: <pre>​​my-app/ ├── node_modules/ ├── public/ │ ├── index.html │ ├── favicon.ico │ └── assets/ │ ├── images/ │ └── fonts/ ├── src/ │ ├── components/ │ │ ├── Header/ │ │ │ ├── Header.js │ │ │ ├── Header.css │ │ │ └── Header.test.js │ │ ├── Footer/ │ │ │ ├── Footer.js │ │ │ ├── Footer.css │ │ │ └── Footer.test.js │ │ └── common/ │ │ ├── Button.js │ │ └── Input.js │ ├── pages/ │ │ ├── Home/ │ │ │ ├── Home.js │ │ │ ├── Home.css │ │ │ └── Home.test.js │ │ ├── About/ │ │ │ ├── About.js │ │ │ ├── About.css │ │ │ └── About.test.js │ ├── services/ │ │ └── api.js │ ├── hooks/ │ │ └── useCustomHook.js │ ├── context/ │ │ └── AuthContext.js │ ├── utils/ │ │ └── helpers.js │ ├── styles/ │ │ ├── variables.css │ │ └── global.css │ ├── App.js │ ├── index.js │ └── reportWebVitals.js ├── .gitignore ├── package.json ├── README.md └── yarn.lock / package-lock.json </pre><h2>Explanation of Each Folder</h2><h4>1. <code>public/</code></h4><ul class=""><li style="background-color: transparent;font-size: 18px">Contains static files like <code>index.html</code>, images, and fonts.</li><li style="background-color: transparent;font-size: 18px">The <code>index.html</code> file is the entry point for the React app.</li><li style="background-color: transparent;font-size: 18px">Assets in this folder are served directly without being processed by Webpack.</li></ul><h4>2. <code>src/</code></h4>This is where the main application code resides. It is further divided into subfolders:<h5>a. <code>components/</code></h5><ul class=""><li style="background-color: transparent;font-size: 18px">Contains reusable UI components.</li><li style="background-color: transparent;font-size: 18px">Each component has its own folder, which includes the component file (<code>.js</code> or <code>.jsx</code>), styles (<code>.css</code>), and tests (<code>.test.js</code>).</li><li style="background-color: transparent;font-size: 18px">Example: <code>Header</code>, <code>Footer</code>, and <code>Button</code> components.</li></ul><h5>b. <code>pages/</code></h5><ul class=""><li style="background-color: transparent;font-size: 18px">Contains components that represent entire pages or views.</li><li style="background-color: transparent;font-size: 18px">Each page has its own folder, which includes the page file, styles, and tests.</li><li style="background-color: transparent;font-size: 18px">Example: <code>Home</code> and <code>About</code> pages.</li></ul><h5>c. <code>services/</code></h5><ul class=""><li style="background-color: transparent;font-size: 18px">Contains files for API calls or external services.</li><li style="background-color: transparent;font-size: 18px">Example: <code>api.js</code> for managing HTTP requests using libraries like Axios or Fetch.</li></ul><h5>d. <code>hooks/</code></h5><ul class=""><li style="background-color: transparent;font-size: 18px">Stores custom React hooks for reusable logic.</li><li style="background-color: transparent;font-size: 18px">Example: <code>useCustomHook.js</code>.</li></ul><h5>e. <code>context/</code></h5><ul class=""><li style="background-color: transparent;font-size: 18px">Contains React Context files for managing global state.</li><li style="background-color: transparent;font-size: 18px">Example: <code>AuthContext.js</code> for authentication state.</li></ul><h5>f. <code>utils/</code></h5><ul class=""><li style="background-color: transparent;font-size: 18px">Contains utility functions or helper methods used across the app.</li><li style="background-color: transparent;font-size: 18px">Example: <code>helpers.js</code> for formatting dates or numbers.</li></ul><h5>g. <code>styles/</code></h5><ul class=""><li style="background-color: transparent;font-size: 18px">Stores global styles, CSS variables, and theming files.</li><li style="background-color: transparent">Example: <code>global.css</code> for global styles and <code>variables.css</code> for CSS variables.</li></ul> <h2>Best Practices for React.js Folder Structure </h2><ul><li style="background-color: transparent">Group by Feature or Module: Organize files by feature or module rather than by type. For example, keep all files related to a specific feature (e.g., <code>Home</code>) in one folder.</li><li style="background-color: transparent;font-size: 18px">Keep Components Reusable: Place reusable components in a <code>common/</code> folder under <code>components/</code>.</li><li style="background-color: transparent;font-size: 18px">Separate Concerns: Keep logic (e.g., API calls) separate from UI components by using folders like <code>services/</code> and <code>hooks/</code>.</li><li style="background-color: transparent;font-size: 18px">Use Consistent Naming Conventions: Use PascalCase for component and folder names (e.g., <code>Header.js</code>) and camelCase for utility functions (e.g., <code>formatDate</code>).</li><li style="background-color: transparent;font-size: 18px">Avoid Deep Nesting: Keep the folder structure as flat as possible to avoid complexity.</li><li style="background-color: transparent">Test Files: Place test files alongside the components they test, using the <code>.test.js</code> extension.</li></ul>

Folder Structure

<h2>Single Page Application (SPA) is:</h2><ul><li style="background-color: transparent;font-size: 18px">Loads a single HTML page initially.</li><li style="background-color: transparent;font-size: 18px">Dynamically updates the content of the page using JavaScript.</li><li style="background-color: transparent;font-size: 18px">Uses client-side routing to change the URL without reloading the page.</li><li style="background-color: transparent;font-size: 18px">Provides a faster and smoother user experience.</li></ul>React is ideal for building SPAs because it allows developers to create reusable components, manage state efficiently, and handle routing on the client side. To achieve Single Page Application (SPA) features in React Js there are three 3 main files play role in it.<ul><li style="background-color: transparent;font-size: 18px">index.html</li><li style="background-color: transparent;font-size: 18px">index.jsx</li><li style="background-color: transparent;font-size: 18px">App.jsx</li></ul><h3>1. index.html </h3>​Location: Found in the <code>public/</code> folder of a React project.​Purpose:<ul class=""><li style="background-color: transparent;font-size: 18px">This is the single HTML file that serves as the entry point for the React application.</li><li style="background-color: transparent;font-size: 18px">It contains a <code>&lt;div&gt;</code> element with an <code>id</code> (usually <code>root</code>), which acts as the mounting point for the React application.</li><li style="background-color: transparent">React dynamically injects the entire application into this <code>div</code> using JavaScript.</li></ul>​Key Features: <ul><li style="background-color: transparent;font-size: 18px">It is static and does not change during runtime.</li><li style="background-color: transparent;font-size: 18px">Any global assets like meta tags, external stylesheets, or scripts can be added here.</li></ul><pre>​​&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"/&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt; &lt;title&gt;React App&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="root"&gt;&lt;/div&gt; &lt;!-- React will inject the app here --&gt; &lt;/body&gt; &lt;/html&gt; </pre> 2. index.jsx <ul><li style="background-color: transparent">Location: <ul><li style="background-color: transparent;font-size: 18px">Found in the <code>src/</code> folder of a React project.</li></ul></li><li style="background-color: transparent">Purpose: <ul><li style="background-color: transparent;font-size: 18px">This is the main JavaScript/JSX file that initializes the React application.</li><li style="background-color: transparent;font-size: 18px">It renders the root React component (usually<code>App.jsx</code>) into the<code>div</code>with the<code>id="root"</code>in<code>index.html</code>.</li><li style="background-color: transparent;font-size: 18px">It is responsible for setting up the React rendering process and often includes configurations like React Router or Redux.</li></ul></li><li style="background-color: transparent">Key Features:<ul><li style="background-color: transparent;font-size: 18px">Uses <code>ReactDOM.createRoot()</code> (or <code>ReactDOM.render()</code> in older versions) to render the React app.</li><li style="background-color: transparent;font-size: 18px">Typically imports global styles and libraries.</li></ul> </li></ul><pre>import React from 'react'; import ReactDOM from 'react-dom/client'; import App from'./App'; import './index.css'; // Global styles const root = ReactDOM.createRoot(document.getElementById('root')); root.render( &lt;React.StrictMode&gt; &lt;App/&gt; &lt;/React.StrictMode&gt; ); </pre> 3. App.jsx <ul><li style="background-color: transparent">Location: Found in the <code>src/</code> folder of a React project.</li><li style="background-color: transparent">Purpose:<ul><li style="background-color: transparent;font-size: 18px">This is the root component of the React application.</li><li style="background-color: transparent;font-size: 18px">It acts as the central hub for the app, where other components are imported and rendered.</li><li style="background-color: transparent;font-size: 18px">It defines the structure and layout of the application.</li></ul></li><li style="background-color: transparent">Key Features:<ul><li style="background-color: transparent;font-size: 18px">Contains the main UI logic and layout.</li><li style="background-color: transparent;font-size: 18px">Often includes routing logic (if using React Router).</li><li style="background-color: transparent;font-size: 18px">Serves as the parent component for all other components in the app.</li></ul></li></ul><pre>import React from 'react'; const App= () =&gt; { return ( &lt;div&gt; &lt;h1&gt;Welcome to My React App&lt;/h1&gt; &lt;p&gt;This is the main application component.&lt;/p&gt; &lt;/div&gt; ); }; export default App; ​ </pre> <h2>​ReactDOM and Its Utility </h2>​ReactDOM is a core package in the React library that provides methods to interact with the DOM (Document Object Model). It acts as the bridge between React components and the browser's DOM, enabling React to render components, update the UI, and manage DOM elements efficiently. ReactDOM is essential for rendering React applications in the browser or other environments.​ <h3>Key Utilities of ReactDOM </h3>​1. Rendering Components to the DOMThe <code>ReactDOM.render()</code> method is used to render React components into a specific DOM node in the browser.Example: <pre>​​import React from 'react'; import ReactDOM from 'react-dom'; function App() { return &lt;h1&gt;Hello, React!&lt;/h1&gt;; } ReactDOM.render(&lt;App /&gt;, document.getElementById('root')); </pre>In this example, the <code>App</code> component is rendered into the DOM element with the ID <code>root</code>.​ <h3>2. Hydrating Server-Side Rendered Applications</h3><ul><li style="background-color: transparent">The <code>ReactDOM.hydrate()</code> method is used to hydrate a server-rendered React application. It attaches event listeners to the existing HTML generated by the server.</li><li style="background-color: transparent;font-size: 18px">This is particularly useful for server-side rendering (SSR) to improve performance and SEO.</li></ul><h3> </h3><h3>Example:</h3><pre>​ReactDOM.hydrate(&lt;App /&gt;, document.getElementById('root')); </pre><h3> </h3><h3>3.Creating Portals</h3>​The <code>ReactDOM.createPortal()</code> method allows rendering child components into a DOM node outside the parent component's hierarchy. This is useful for creating modals, tooltips, or popups.<pre>​​import ReactDOM from 'react-dom'; function Modal({ children }) { return ReactDOM.createPortal( &lt;divclassName="modal"&gt;{children}&lt;/div&gt;, document.getElementById('modal-root') ); } </pre>In this example, the modal content is rendered into a separate DOM node (<code>modal-root</code>), outside the main application hierarchy. <h3>4. Unmounting Components </h3>​The <code>ReactDOM.unmountComponentAtNode()</code> method is used to unmount a React component from a specific DOM node. This cleans up resources and removes event listeners associated with the component.<pre>​ReactDOM.unmountComponentAtNode(document.getElementById('root')); </pre><h3>5. Client-Side Rendering with <code>createRoot()</code>​ </h3>​Starting with React 18, <code>ReactDOM.createRoot()</code> is used to create a root for rendering components. It enables concurrent rendering, which improves performance and responsiveness.<pre>​import React from 'react'; import ReactDOM from'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(&lt;App/&gt;); </pre><blockquote>​This method replaces the older <code>ReactDOM.render()</code> and is now the recommended way to render components in React 18 and beyond.​ </blockquote>

React DOM rendering process

<h2>What is Document Object Model (DOM)?</h2>The DOM (Document Object Model) is a programming interface for web documents. It represents the structure of an HTML or XML document as a tree of objects, allowing developers to interact with and manipulate the content, structure, and style of a webpage dynamically using JavaScript.​ <h3>Key Features of the DOM: </h3>Tree Structure:<ul class=""><li style="background-color: transparent;font-size: 18px">The DOM represents the document as a tree of nodes, where each node corresponds to an element, attribute, or piece of text in the document.</li></ul><h4>Example:</h4><pre>#html ​&lt;html&gt; &lt;body&gt; &lt;h1&gt;Hello, World!&lt;/h1&gt; &lt;p&gt;This is a paragraph.&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </pre>is represented in the DOM as: <pre>​​Document └── html └── body ├── h1 │ └── "Hello, World!" └── p └── "This is a paragraph." </pre> Nodes: The DOM consists of different types of nodes:<ul class=""><li style="background-color: transparent;font-size: 18px">Element Nodes: Represent HTML elements (e.g., <code>&lt;h1&gt;</code>, <code>&lt;p&gt;</code>).</li><li style="background-color: transparent;font-size: 18px">Text Nodes: Represent the text inside elements.</li><li style="background-color: transparent">Attribute Nodes: Represent attributes of elements (e.g., <code>class</code>, <code>id</code>).</li></ul> ​Dynamic Interaction:<ul><li style="background-color: transparent">JavaScript can be used to dynamically manipulate the DOM, such as adding, removing, or modifying elements and their attributes.</li></ul> ​Event Handling:<ul><li style="background-color: transparent">The DOM allows developers to attach event listeners to elements, enabling interactivity (e.g., handling clicks, form submissions, etc.).</li></ul><blockquote>​One of the best feature of React is it render page based on&nbsp;Virtual DOM&nbsp;rather than Real DOM. To move further in this course we should know how Virtual DOM works​ </blockquote> <h2>What is the Virtual DOM? </h2>The Virtual DOM is a programming concept where a virtual representation of the UI is kept in memory and synced with the Real DOM through a process called reconciliation. Instead of directly manipulating the Real DOM, React uses the Virtual DOM to determine the minimal number of changes required to update the UI efficiently.​ <h2>How the Virtual DOM Works in React </h2>​The Virtual DOM implementation in React can be broken down into the following steps:<ul><li style="background-color: transparent">Rendering the Virtual DOM:<ul><li style="background-color: transparent;font-size: 18px">When a React component is rendered, React creates a Virtual DOM tree that mirrors the structure of the Real DOM.</li><li style="background-color: transparent;font-size: 18px">This Virtual DOM is a JavaScript object that represents the UI elements and their properties.</li></ul></li><li style="background-color: transparent">Updating the Virtual DOM:<ul><li style="background-color: transparent;font-size: 18px">When the state or props of a component change, React creates a new Virtual DOM tree to represent the updated UI.</li><li style="background-color: transparent;font-size: 18px">This new Virtual DOM tree is compared with the previous Virtual DOM tree to identify the differences.</li></ul></li><li style="background-color: transparent">Diffing Algorithm:<ul><li style="background-color: transparent;font-size: 18px">React uses a highly optimized diffing algorithm to compare the old and new Virtual DOM trees.</li><li style="background-color: transparent;font-size: 18px">The algorithm identifies the minimal set of changes (e.g., adding, removing, or updating elements) required to update the Real DOM.</li></ul></li><li style="background-color: transparent">Reconciliation:<ul><li style="background-color: transparent;font-size: 18px">After identifying the changes, React updates only the parts of the Real DOM that have changed, rather than re-rendering the entire UI.</li><li style="background-color: transparent;font-size: 18px">This process is called reconciliation, and it ensures that updates are efficient and fast.</li></ul></li></ul><h2> </h2><h2>​Virtual DOM in Action </h2>​Here’s a simple example to demonstrate how the Virtual DOM works in React: <pre>​​import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); const increment = () =&gt; { setCount(count + 1); }; return ( &lt;div&gt; &lt;h1&gt;Counter: {count}&lt;/h1&gt; &lt;button onClick={increment}&gt;Increment&lt;/button&gt; &lt;/div&gt; ); } export default Counter; </pre><h3> </h3><h3> </h3><h3>​How the Virtual DOM Works in This Example:​ </h3>​When the <code>Counter</code> component is rendered for the first time, React creates a Virtual DOM tree representing the initial UI:​ <pre>​​{ type: 'div', props: { children: [ { type:'h1', props: { children:'Counter: 0' } }, { type:'button', props: { onClick:increment, children:'Increment' } } ] } } </pre>When the user clicks the "Increment" button, the <code>count</code> state is updated, and React creates a new Virtual DOM tree:<pre>{ type: 'div', props: { children: [ { type:'h1', props: { children:'Counter: 1' } }, { type:'button', props: { onClick:increment, children:'Increment' } } ] } } </pre> <ul><li style="background-color: transparent">React compares the new Virtual DOM tree with the previous one and identifies that only the text inside the <code>&lt;h1&gt;</code> element has changed.</li><li style="background-color: transparent">React updates only the <code>&lt;h1&gt;</code> element in the Real DOM, leaving the rest of the DOM untouched. </li></ul><div class="se-component se-image-container __se__float-none" style="width: 100%"><figure style="width: 100%;"><img src="https://www.api.cstechie.com/upload/editor-image/real-vs-virtual-dom1_1743595772680.png" alt="Virtual DOM implementation in React.js" data-rotate="" data-proportion="true" data-size="100%," data-align="none" data-percentage="100," data-file-name="real-vs-virtual-dom1.png" data-file-size="73448" data-origin="," style="width: 100%;"></figure></div> <h2>Advantages of the Virtual DOM</h2><ul><li style="background-color: transparent">Improved Performance:<ul><li style="background-color: transparent;font-size: 18px">By updating only the parts of the DOM that have changed, the Virtual DOM reduces the overhead of manipulating the Real DOM.</li></ul></li><li style="background-color: transparent">Predictable Updates:<ul><li style="background-color: transparent;font-size: 18px">React's declarative approach and Virtual DOM ensure that UI updates are predictable and consistent.</li></ul></li><li style="background-color: transparent">Simplified Development:<ul><li style="background-color: transparent;font-size: 18px">Developers can focus on writing declarative UI code without worrying about manually updating the DOM.</li></ul></li><li style="background-color: transparent">Cross-Browser Optimization:<ul><li style="background-color: transparent;font-size: 18px">The Virtual DOM abstracts away browser-specific details, providing a consistent experience across different environments.</li></ul></li></ul>

Document Object Model (DOM)

React is a popular JavaScript library for building user interfaces, and at the heart of React lies the concept of components. Components are the building blocks of any React application, allowing developers to break down the UI into reusable, independent pieces. In this article, we will explore what React components are, their types, and how to use them effectively with examples.​ <h2>What are React Components? </h2>​A React component is a reusable piece of code that defines how a part of the user interface should look and behave. Components can be thought of as JavaScript functions or classes that return React elements, which are then rendered to the DOM. <h3>React components allow developers to: </h3><ul><li style="background-color: transparent;font-size: 18px">Break down complex UIs into smaller, manageable pieces.</li><li style="background-color: transparent;font-size: 18px">Reuse code across different parts of the application.</li><li style="background-color: transparent;font-size: 18px">Maintain a clear separation of concerns by encapsulating logic and UI.</li></ul> <h2>Types of React Components </h2><ol><li style="font-size: 18px">​Functional Components </li><li style="font-size: 18px">Class Components</li></ol> Functional Components<ul><li style="background-color: transparent;font-size: 18px">Functional components are simple JavaScript functions that accept props as an argument and return React elements.</li><li style="background-color: transparent">They are stateless by default but can manage state using React Hooks (e.g., <code>useState</code>, <code>useEffect</code>).</li></ul><h3>Example:</h3><pre>​​import React from 'react'; function Greeting (props) { return &lt;h1&gt;Hello, {props.name}!&lt;/h1&gt;; } export default Greeting; </pre> <h3>Usage:</h3><pre>​import React from 'react'; import ReactDOM from 'react-dom'; import Greeting from './Greeting'; ReactDOM.render(&lt;Greeting name="John"/&gt;, document.getElementById('root')); </pre>​Output: ​Hello, John! <h2>Class Components</h2><ul><li style="background-color: transparent">Class components are ES6 classes that extend <code>React.Component</code>.</li><li style="background-color: transparent">They can manage their own state and have access to lifecycle methods like <code>componentDidMount</code>, <code>componentDidUpdate</code>, and <code>componentWillUnmount</code>.</li></ul><h3>Example:</h3><pre>​​import React, { Component } from'react'; class Counter extends Component { constructor(props) { super(props); this.state= { count:0 }; } increment= () =&gt; { this.setState({ count:this.state.count+1 }); }; render() { return ( &lt;div&gt; &lt;h1&gt;Count: {this.state.count}&lt;/h1&gt; &lt;button onClick={this.increment}&gt;Increment&lt;/button&gt; &lt;/div&gt; ); } } export default Counter; </pre><h4> </h4><h3>Usage:</h3><pre>​import React from 'react'; import ReactDOM from 'react-dom'; import Counter from './Counter'; ReactDOM.render(&lt;Counter/&gt;, document.getElementById('root')); </pre><h3>​Output:</h3>A counter with a button to increment the count.​

React Components

Class components are ES6 classes that extend the <code>React.Component</code> base class. They are used to define React components with state and lifecycle methods. Unlike functional components, class components have access to more advanced features like state management and lifecycle hooks without requiring additional tools like React Hooks.​ <h2>Structure of a Class Component</h2>A class component must:<ul><li style="background-color: transparent;font-size: 18px">Extend <code>React.Component</code> or <code>React.PureComponent</code>.</li><li style="background-color: transparent">Include a <code>render()</code> method that returns JSX (JavaScript XML) to define the UI.</li></ul><h3>Basic Example of a Class Component: </h3><pre>​import React, { Component } from 'react'; class Welcome extends Component { render() { return&lt;h1&gt;Hello, {this.props.name}!&lt;/h1&gt;; } } export default Welcome; </pre> In this example:<ul class=""><li style="background-color: transparent;font-size: 18px">The <code>Welcome</code> class extends <code>React.Component</code>.</li><li style="background-color: transparent;font-size: 18px">The <code>render()</code> method returns JSX to display the UI.</li><li style="background-color: transparent"><code>props</code> are used to pass data from the parent component.</li></ul><h3>Key Features of Class Components </h3>​1. State Management​ Class components can manage their own state using the <code>this.state</code> object. The state is mutable and can be updated using the <code>setState()</code> method.<div> </div><pre>​class Counter extends Component { constructor(props) { super(props); this.state = { count: 0 }; } increment = () =&gt; { this.setState({ count: this.state.count + 1 }); }; render() { return ( &lt;div&gt; &lt;h1&gt;Count: {this.state.count}&lt;/h1&gt; &lt;button onClick={this.increment}&gt;Increment&lt;/button&gt; &lt;/div&gt; ); } } export default Counter; </pre><div>2. Props​ </div><div>Props are used to pass data from a parent component to a child component. In class components, props are accessed using <code>this.props</code>.</div><div> </div><pre>​class Greeting extends Component { render() { return&lt;h1&gt;Welcome, {this.props.name}!&lt;/h1&gt;; } } </pre>3. Lifecycle Methods​ Class components have access to lifecycle methods, which allow developers to hook into different stages of a component's lifecycle (mounting, updating, and unmounting). <h2>Lifecycle Methods in Class Components </h2>​React class components have three main phases in their lifecycle: 1. Mounting Phase This phase occurs when a component is being created and inserted into the DOM.<ul class=""><li style="background-color: transparent"><code>constructor()</code>: Initializes the component's state and binds methods.</li><li style="background-color: transparent;font-size: 18px"><code>static getDerivedStateFromProps()</code>: Updates the state based on props before rendering.</li><li style="background-color: transparent;font-size: 18px"><code>render()</code>: Returns the JSX to be rendered.</li><li style="background-color: transparent"><code>componentDidMount()</code>: Executes after the component is mounted. Commonly used for API calls or DOM manipulations.</li></ul><div> </div><pre>​class App extends Component { constructor(props) { super(props); this.state = { data: null }; } componentDidMount() { fetch('https://api.example.com/data') .then((response) =&gt; response.json()) .then((data) =&gt; this.setState({ data })); } render() { return &lt;div&gt;Data: {this.state.data}&lt;/div&gt;; } }</pre>​2. Updating PhaseThis phase occurs when a component's state or props change.<ul><li style="background-color: transparent"><code>static getDerivedStateFromProps()</code>: Updates the state based on props.</li><li style="background-color: transparent;font-size: 18px"><code>shouldComponentUpdate()</code>: Determines whether the component should re-render. Useful for performance optimization.</li><li style="background-color: transparent;font-size: 18px"><code>render()</code>: Re-renders the component.</li><li style="background-color: transparent;font-size: 18px"><code>getSnapshotBeforeUpdate()</code>: Captures some information (e.g., scroll position) before the DOM is updated.</li><li style="background-color: transparent"><code>componentDidUpdate()</code>: Executes after the component updates. Commonly used for side effects like API calls.</li></ul> <div> </div><pre>​class Counter extends Component { componentDidUpdate(prevProps, prevState) { if (prevState.count !== this.state.count) { console.log('Count updated:', this.state.count); } } render() { return &lt;div&gt;Count: {this.state.count}&lt;/div&gt;; } } </pre> ​3. Unmounting PhaseThis phase occurs when a component is removed from the DOM.<ul class=""><li style="background-color: transparent"><code>componentWillUnmount()</code>: Executes before the component is unmounted. Commonly used for cleanup tasks like removing event listeners or canceling API calls.</li></ul><div> </div><pre>​class Timer extends Component { componentWillUnmount() { clearInterval(this.timer); } render() { return &lt;div&gt;Timer Component&lt;/div&gt;; } } </pre>​ <h3>Conclusion</h3><blockquote>​Class components are a fundamental part of React and provide powerful features like state management, lifecycle methods, and error boundaries. While functional components with hooks have largely replaced class components in modern React development, understanding class components is essential for working with legacy codebases and certain advanced use cases. By mastering class components, developers can gain a deeper understanding of React's core concepts and build robust, maintainable applications. </blockquote>

Class Component Deep Dive

Functional components are JavaScript functions that accept props as an argument and return React elements (JSX) to define the UI. They are simpler and more concise than class components, making them easier to write and understand.Example:<pre>​​import React from'react'; function Greeting(props) { return &lt;h1&gt;Hello, {props.name}!&lt;/h1&gt;; } export default Greeting; </pre>In this example:<ul class=""><li style="background-color: transparent;font-size: 18px">The <code>Greeting</code> function is a functional component.</li><li style="background-color: transparent;font-size: 18px">It accepts <code>props</code> as an argument and uses them to display dynamic content.</li><li style="background-color: transparent;font-size: 18px">It returns JSX, which React renders to the DOM.</li></ul> <h2>Key Features of Functional Components </h2><h3>​1. Stateless by Nature</h3>​Before React Hooks, functional components were considered "stateless" because they could not manage their own state or lifecycle methods. However, with the introduction of Hooks, functional components can now handle state and side effects, making them just as powerful as class components. <h3>2. Props</h3>Functional components receive data from their parent components through props. Props are immutable and allow components to be reusable and dynamic.Example:<pre>function Welcome(props) { return &lt;h1&gt;Welcome,{props.name}!&lt;/h1&gt;; } export default Welcome; </pre> <h3>3. React Hooks</h3>​React Hooks, introduced in React 16.8, allow functional components to manage state, handle side effects, and access other React features without converting them into class components. Below are the available Hooks in React JsBasic Hooks <h4>useState </h4><ul><li style="background-color: transparent;font-size: 18px">Purpose: Manages state in functional components.</li><li style="background-color: transparent;font-size: 18px">Use Case: Tracking variables like counters, form inputs, or toggles.</li></ul><pre>const [count, setCount] = useState(0); </pre><h4> </h4><h4>useEffect </h4><ul><li style="background-color: transparent;font-size: 18px">Purpose: Handles side effects such as data fetching, subscriptions, or DOM updates.</li><li style="background-color: transparent;font-size: 18px">Use Case: Fetching data from an API, setting up event listeners, or cleaning up resources.</li></ul><pre>// Example 1 useEffect(() =&gt; { console.log('Component mounted'); return() =&gt;console.log('Cleanup on unmount'); }, []);​​ </pre>As per above example useEffect Hook execute before rendering the component. Lets consider another example<pre>// Example 2 useEffect(() =&gt; { console.log('Component mounted'); return() =&gt;console.log('Cleanup on unmount'); }, [url]);​​ </pre>If we compare Example 1 and Exaample 2 we notice 1st Example is blank array while in second array there is 'url'.&nbsp; Blank array indicate this hooks will execute one time during component render, while in second example indicates if anything changes occur in url then this hook will be rerender. <h4>useContext </h4><ul><li style="background-color: transparent">Purpose: Accesses values from a React context without using <code>Context.Consumer</code>.</li><li style="background-color: transparent;font-size: 18px">Example Use: Sharing global data like themes or authentication status.</li></ul>Syntax:<pre>​​const value = useContext(MyContext);</pre><h2>​Additional Hooks</h2><ul><li>​useReducer</li><li>​useCallback </li><li>useMemo </li><li>useRef </li><li>useImperativeHandle </li></ul> <h2>Advanced Hooks </h2><ul><li>​useLayoutEffect </li><li>useDebugValue </li></ul>

Comments

REACT JS