In React, prop forwarding refers to the process of passing props from a parent component to a child component, and then further forwarding those props to another child or a DOM element. This is particularly useful when creating higher-order components (HOCs) or wrapper components that need to pass props down to their children without directly using them.​ <h2>Why Use Prop Forwarding? </h2>​Prop forwarding is useful in scenarios where: <ul><li style="background-color: transparent;font-size: 18px">A wrapper component needs to pass props to a child component or DOM element without modifying them.</li><li style="background-color: transparent;font-size: 18px">You want to create reusable components that can handle props dynamically.</li><li style="background-color: transparent">You need to forward <code>ref</code> objects to child components or DOM elements (commonly done using <code>React.forwardRef</code>).</li></ul> <h3>Example of Prop Forwarding </h3><pre>import React from 'react'; function Button(props) { return &lt;button style={props.style}&gt;{props.label}&lt;/button&gt;; } function Wrapper(props) { // Forwarding props to the Button component return &lt;Button {...props} /&gt;; } function App() { return ( &lt;Wrapper label="Click Me" style={{ backgroundColor:'blue', color:'white' }}/&gt; ); } export default App; </pre>In this example:<ul><li style="background-color: transparent;font-size: 18px">The <code>Wrapper</code> component receives props (<code>label</code> and <code>style</code>) and forwards them to the <code>Button</code> component using the spread operator (<code>{...props}</code>).</li><li style="background-color: transparent">The <code>Button</code> component renders the button with the forwarded props.</li></ul> <h3>Forwarding Refs with <code>React.forwardRef</code>​ </h3>​In addition to forwarding props, React provides a special API called <code>React.forwardRef</code> to forward <code>ref</code> objects to child components or DOM elements. This is particularly useful when you need to access a DOM element or a child component’s instance from a parent component.<pre>import React from 'react'; const Input = React.forwardRef((props, ref) =&gt; { return &lt;inputref={ref}{...props}/&gt;; }); function App() { const inputRef = React.useRef(); constfocusInput= () =&gt; { inputRef.current.focus(); }; return ( &lt;&gt; &lt;Input ref={inputRef} placeholder="Type here..."/&gt; &lt;button onClick={focusInput} &gt;Focus Input&lt;/button&gt; &lt;/&gt; ); } export default App; </pre> Below is the Screenshot of above exaample:<div class="se-component se-image-container __se__float-none"><figure><img src="https://www.api.cstechie.com/upload/editor-image/Screenshot_2025-04-04_at_2_1743756659848.20" alt="Use Ref Example" data-rotate="" data-proportion="true" data-size="," data-align="none" data-percentage="auto,auto" data-file-name="Screenshot 2025-04-04 at 2.20.20 PM.png" data-file-size="12391" data-origin="," origin-size="660,120" style=""></figure></div> In this example:<ul><li style="background-color: transparent;font-size: 18px">The <code>Input</code> component uses <code>React.forwardRef</code> to forward the <code>ref</code> to the underlying <code>&lt;input&gt;</code> element.</li><li style="background-color: transparent;font-size: 18px">The <code>App</code> component creates a <code>ref</code> using <code>React.useRef</code> and passes it to the <code>Input</code> component.</li><li style="background-color: transparent">The <code>focusInput</code> function uses the <code>ref</code> to programmatically focus the input field.</li></ul>

Prop Forwarding

<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>

Functional Component Deep Dive

<h2>What is a React Fragment? </h2>A React Fragment is a lightweight component that allows you to group multiple elements without adding an extra node to the DOM. Normally, when you return multiple elements from a React component, they must be wrapped in a single parent element, such as a <code>&lt;div&gt;</code>. However, this can lead to unnecessary DOM nodes, which may clutter the structure and affect performance.Fragments solve this problem by acting as an invisible wrapper. They group elements together without rendering an additional DOM element. <h2>Why Use Fragments? </h2><ul><li style="background-color: transparent">Avoid Unnecessary DOM Nodes: Adding extra <code>&lt;div&gt;</code> or other wrapper elements can bloat the DOM, making it harder to manage and potentially impacting performance. Fragments help keep the DOM clean and minimal.</li><li style="background-color: transparent;font-size: 18px">Improved Performance: By avoiding unnecessary nodes, Fragments can improve rendering performance, especially in large applications with complex component trees.</li><li style="background-color: transparent">Better Semantics: Using Fragments allows you to maintain semantic HTML. For example, you can group table rows (<code>&lt;tr&gt;</code>) or list items (<code>&lt;li&gt;</code>) without introducing invalid or unnecessary parent elements.</li></ul> <h3>How to Use React Fragments </h3>​React provides two ways to use Fragments: the <code>&lt;React.Fragment&gt;</code> component and its shorthand syntax.<h4>​1. Using <code>&lt;React.Fragment&gt;</code>​ </h4>​The most explicit way to use a Fragment is by wrapping your elements in <code>&lt;React.Fragment&gt;</code> tags. Here’s an example:<pre>​import React from 'react'; function App() { return ( &lt;React.Fragment&gt; &lt;h1&gt;Hello, World!&lt;/h1&gt; &lt;p&gt;Welcome to React Fragments.&lt;/p&gt; &lt;/React.Fragment&gt; ); } export default App; </pre>In this example, the <code>&lt;h1&gt;</code> and <code>&lt;p&gt;</code> elements are grouped together without adding an extra wrapper element to the DOM.<h4>​2. Using the Shorthand Syntax (<code>&lt;&gt;</code> and <code>&lt;/&gt;</code>)​ </h4>​React also provides a shorthand syntax for Fragments, which is more concise and easier to read. Here’s the same example using the shorthand:<pre>​​import React from 'react'; function App() { return ( &lt;&gt; &lt;h1&gt;Hello, World!&lt;/h1&gt; &lt;p&gt;Welcome to React Fragments.&lt;/p&gt; &lt;/&gt; ); } export default App; </pre>The <code>&lt;&gt;</code> and <code>&lt;/&gt;</code> tags work exactly like <code>&lt;React.Fragment&gt;</code> but are shorter and cleaner. However, note that the shorthand syntax does not support attributes.​ <h3>Adding Keys to Fragments </h3>​In some cases, you may need to add a <code>key</code> attribute to a Fragment, such as when rendering a list of elements. This is only possible with the full <code>&lt;React.Fragment&gt;</code> syntax, as the shorthand does not support attributes.Example: <pre>​​import React from' react'; function ItemList({ items }) { return ( &lt;React.Fragment&gt; {items.map((item, index) =&gt; ( &lt;React.Fragment key={index}&gt; &lt;h2&gt;{item.title}&lt;/h2&gt; &lt;p&gt;{item.description}&lt;/p&gt; &lt;/React.Fragment&gt; )) } &lt;/React.Fragment&gt; ); } export default ItemList </pre>In this example, each <code>React.Fragment</code> in the <code>map</code> function is assigned a unique <code>key</code> to help React efficiently update the DOM. <h2>​When to Use Fragments</h2>Fragments are particularly useful in the following scenarios: <ul><li style="background-color: transparent;font-size: 18px">Returning Multiple Elements: When a component needs to return multiple sibling elements without wrapping them in an extra DOM node.</li><li style="background-color: transparent;font-size: 18px">Rendering Lists: When rendering lists of elements, especially when keys are required.</li><li style="background-color: transparent">Table Rows and Columns: When working with <code>&lt;table&gt;</code>, <code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code>, <code>&lt;tr&gt;</code>, and <code>&lt;td&gt;</code> elements, where adding extra wrappers can break the table structure.</li></ul><h4> </h4><h4>For example, in a table: </h4><pre>​import React from 'react'; function Table() { return ( &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Age&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;&gt; &lt;tr&gt; &lt;td&gt;John&lt;/td&gt; &lt;td&gt;30&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Jane&lt;/td&gt; &lt;td&gt;25&lt;/td&gt; &lt;/tr&gt; &lt;/&gt; &lt;/tbody&gt; &lt;/table&gt; ); } export default Table; </pre>Here, the Fragment ensures that the table structure remains valid while grouping the rows.

Fragment in React JS

​In a React project, the <code>public/</code> folder and the <code>src/assets/</code> folder serve different purposes and are used in different ways. Here's a detailed explanation of each: <h2>​<code>public/</code> Folder​ </h2><ol><li style="background-color: transparent">Purpose: The <code>public/</code> folder is used to store static files that do not need to be processed by the build tool (e.g., Webpack). These files are directly served as-is by the web server.</li><li style="background-color: transparent">Access: Files in the <code>public/</code> folder are accessible via the root URL of your application. For example, if you place an image <code>logo.png</code> in <code>public/</code>, it can be accessed at <code>http://yourdomain.com/logo.png</code>.</li><li style="background-color: transparent">Usage:<ul><li style="background-color: transparent">Use the<code>public/</code>folder for files that need to be directly accessible, such as:<ul><li style="background-color: transparent">Static assets like images, fonts, or icons that won't change.</li><li style="background-color: transparent"><code>favicon.ico</code>or<code>manifest.json</code>for Progressive Web Apps (PWAs).</li><li style="background-color: transparent">External libraries or files that don't need to be bundled.</li></ul></li><li style="background-color: transparent">You can reference files in the<code>public/</code>folder using absolute paths (e.g.,<code>/logo.png</code>) or environment variables like<code>process.env.PUBLIC_URL</code>.</li></ul>​</li><li style="background-color: transparent">Build Process: Files in the <code>public/</code> folder are not processed or optimized by Webpack. They are simply copied to the build directory as-is. </li></ol>Example: If you have a file<code>public/logo.png</code>, you can reference it in your code like this:<pre>​​&lt;img src="/logo.png" alt="Logo" /&gt;</pre>​<h2>​<code>src/assets/</code> Folder​ </h2><ol><li style="background-color: transparent">Purpose: The <code>src/assets/</code> folder is used to store static files that are imported into your React components. These files are processed by Webpack and included in the build process.</li><li style="background-color: transparent;font-size: 18px">Access: Files in the <code>src/assets/</code> folder are not directly accessible via a URL. Instead, they are bundled into your application and served as part of the JavaScript or CSS files.</li><li style="background-color: transparent">Usage:<ul><li style="background-color: transparent">Use the<code>src/assets/</code>folder for assets that are part of your React components, such as:<ul><li style="background-color: transparent;font-size: 18px">Images, fonts, or icons that are dynamically imported or used in your components.</li><li style="background-color: transparent;font-size: 18px">Files that need to be optimized or transformed by Webpack (e.g., minified, hashed, etc.).</li></ul></li><li style="background-color: transparent;font-size: 18px">You can import these files directly into your JavaScript or CSS files.</li></ul>​</li><li style="background-color: transparent">Build Process: Files in the <code>src/assets/</code> folder are processed by Webpack. This means they can be optimized, hashed, or inlined depending on your Webpack configuration.</li></ol>Example:If you have a file <code>src/assets/logo.png</code>, you can import and use it in your component like this:<pre>import logo from './assets/logo.png'; function App() { return &lt;img src={logo} alt="Logo" /&gt;; } </pre><h2> </h2><h2>Key Differences </h2><ul><li style="background-color: transparent">Processing:<ul><li style="background-color: transparent;font-size: 18px"><code>public/</code>: Files are not processed by Webpack.</li><li style="background-color: transparent;font-size: 18px"><code>src/assets/</code>: Files are processed by Webpack.</li></ul></li><li style="background-color: transparent">Access:<ul><li style="background-color: transparent;font-size: 18px"><code>public/</code>: Files are directly accessible via a URL.</li><li style="background-color: transparent;font-size: 18px"><code>src/assets/</code>: Files must be imported into your code to be used.</li></ul></li><li style="background-color: transparent">Use Case:<ul><li style="background-color: transparent;font-size: 18px"><code>public/</code>: For static files that don't need to be imported or processed.</li><li style="background-color: transparent"><code>src/assets/</code>: For files that are part of your React components and need to be bundled.</li></ul> </li></ul>

public vs assets folder in React

Events In React

Conditional rendering is a fundamental concept in React that allows developers to render different components or elements based on certain conditions. It is similar to how conditions work in JavaScript, but React provides a more structured and efficient way to handle conditional logic in the UI. <h2>What is Conditional Rendering in React? </h2>​Conditional rendering in React refers to the process of dynamically deciding what to render based on a condition. Instead of rendering everything at once, React allows you to display specific components or elements depending on the state, props, or any other logic. For example, you might want to: <ul><li style="background-color: transparent;font-size: 18px">Show a login form if the user is not logged in.</li><li style="background-color: transparent;font-size: 18px">Display a welcome message if the user is logged in.</li><li style="background-color: transparent;font-size: 18px">Render a loading spinner while data is being fetched.</li></ul> <h2>Methods of Conditional Rendering in React </h2>React provides several ways to implement conditional rendering. Let’s explore each method with examples. 1. Using <code>if-else</code> Statements<pre>​​import React from 'react'; function App() { const isLoggedIn = true; if (isLoggedIn) { return&lt;h1&gt; Welcomeback, User! &lt;/h1&gt;; } else { return &lt;h1&gt; Pleaselogin. &lt;/h1&gt;; } } export default App; </pre>In this example:<ul><li style="background-color: transparent;font-size: 18px">If <code>isLoggedIn</code> is <code>true</code>, the message "Welcome back, User!" is displayed.</li><li style="background-color: transparent">If <code>isLoggedIn</code> is <code>false</code>, the message "Please log in." is displayed.</li></ul> 2. Using Ternary OperatorsTernary operators are a concise way to handle conditional rendering in React. They are often used when there are only two possible outcomes.<pre>​function App() { const isLoggedIn = false; return ( &lt;div&gt; {isLoggedIn ? &lt;h1&gt; Welcome back, User! &lt;/h1&gt; : &lt;h1&gt; Please login.&lt;/h1&gt;} &lt;/div&gt; ); } export default App; </pre>Here:<ul><li style="background-color: transparent">The ternary operator (<code>condition ? trueExpression : falseExpression</code>) is used to decide which message to render.</li></ul> <h3>3. Using Logical <code>&amp;&amp;</code> Operator</h3>​The logical <code>&amp;&amp;</code> operator is useful when you want to render something only if a condition is <code>true</code>. If the condition is <code>false</code>, nothing is rendered.​ <pre>​​function App() { const isAdmin = true; return ( &lt;div&gt; &lt;h1&gt;Welcome to the Dashboard&lt;/h1&gt; {isAdmin &amp;&amp; &lt;p&gt;You have admin privileges.&lt;/p&gt;} &lt;/div&gt; ); } export default App; </pre> In this example:<ul><li style="background-color: transparent">The message "You have admin privileges." is displayed only if <code>isAdmin</code> is <code>true</code>.</li></ul> <h3>4. Using <code>switch</code> Statements</h3>​For more complex conditions with multiple outcomes, a <code>switch</code> statement can be used.​ <pre>​​function App() { const userRole = 'admin'; let content; switch (userRole) { case 'admin': content = &lt;h1&gt;Welcome, Admin!&lt;/h1&gt;; break; case 'editor': content = &lt;h1&gt;Welcome, Editor!&lt;/h1&gt;; break; case 'viewer': content = &lt;h1&gt;Welcome, Viewer!&lt;/h1&gt;; break; default: content = &lt;h1&gt;Welcome, Guest!&lt;/h1&gt;; } return &lt;div&gt;{content}&lt;/div&gt;; } export default App; </pre>Here:<ul><li style="background-color: transparent">The <code>switch</code> statement determines what to render based on the value of <code>userRole</code>.</li></ul> <h3>5. Using Inline Conditional Rendering</h3>You can also use inline conditional rendering for simple conditions. <pre>​​function App() { const isLoggedIn = true; return ( &lt;div&gt; &lt;h1&gt;Welcome to the App&lt;/h1&gt; &lt;p&gt;{isLoggedIn ? 'You are logged in.' : 'You are not logged in.'}&lt;/p&gt; &lt;/div&gt; ); } export default App; </pre><blockquote>​This approach is useful for rendering small pieces of conditional content directly within JSX. </blockquote> <h3>6. Using Conditional Rendering with Components</h3>​You can create separate components for different conditions and render them based on the logic. <pre>​​function LoggedIn() { return &lt;h1&gt;Welcome back, User!&lt;/h1&gt;; } function LoggedOut() { return &lt;h1&gt;Please log in.&lt;/h1&gt;; } function App() { const isLoggedIn = false; return ( &lt;div&gt; {isLoggedIn ? &lt;LoggedIn /&gt; : &lt;LoggedOut /&gt;} &lt;/div&gt; ); } export default App; </pre> Here:<ul><li style="background-color: transparent">The <code>LoggedIn</code> and <code>LoggedOut</code> components are rendered based on the value of <code>isLoggedIn</code>.</li></ul> ​

React Conditional Rendering

Routing In React

Lazy loading is a performance optimization technique used in React to defer the loading of components or resources until they are needed. This approach reduces the initial load time of an application, improves performance, and enhances the user experience by loading only the necessary parts of the application on demand. <h2>What is Lazy Loading?</h2>Lazy loading is a design pattern that delays the loading of non-critical resources until they are required. In the context of React, lazy loading is commonly used to load components, images, or other assets only when they are needed, such as when a user navigates to a specific route or interacts with a particular feature. <h2>Benefits of Lazy Loading</h2><ol><li style="background-color: transparent;font-size: 18px">Improved Performance: Reduces the initial load time by splitting the application into smaller chunks.</li><li style="background-color: transparent;font-size: 18px">Optimized Resource Usage: Loads only the required components or assets, saving bandwidth and memory.</li><li style="background-color: transparent;font-size: 18px">Enhanced User Experience: Provides a faster and smoother experience by prioritizing critical content.</li><li style="background-color: transparent;font-size: 18px">Scalability: Makes it easier to manage large applications by breaking them into smaller, manageable pieces.</li></ol><h2> </h2><h2>How to Implement Lazy Loading in React </h2>​React provides built-in support for lazy loading through the <code>React.lazy</code> function and the <code>Suspense</code> component. Here's how you can implement lazy loading in your React application:​ <h3>1. Lazy Loading Components</h3><h3>​The <code>React.lazy</code> function is used to dynamically import a component. The <code>Suspense</code> component is used to display a fallback UI while the lazy-loaded component is being fetched.</h3>​ <pre>​import React, { Suspense } from'react'; const LazyComponent = React.lazy(() =&gt;import('./LazyComponent')); function App() { return ( &lt;div&gt; &lt;h1&gt;LazyLoadingExample&lt;/h1&gt; &lt;Suspense fallback={&lt;p&gt;Loading component...&lt;/p&gt;}&gt; &lt;LazyComponent/&gt; &lt;/Suspense&gt; &lt;/div&gt; ); } export default App; </pre><h3> </h3>Explanation:<ul><li style="background-color: transparent"><code>React.lazy(() =&gt; import('./LazyComponent'))</code>: Dynamically imports the <code>LazyComponent</code> only when it is rendered.</li><li style="background-color: transparent"><code>Suspense</code>: Displays the fallback UI (<code>&lt;p&gt;Loading component...&lt;/p&gt;</code>) while the component is being loaded.</li></ul><h3> </h3><h3 style="line-height: 1.2">2.&nbsp;Lazy Loading Routes</h3>​Lazy loading can also be applied to routes in a React application using <code>React.lazy</code> and <code>Suspense</code>. <pre>​​import React, { Suspense } from'react'; import { BrowserRouter as Router, Routes, Route } from'react-router-dom'; const Home = React.lazy(() =&gt;import('./Home')); const About = React.lazy(() =&gt;import('./About')); function App() { return ( &lt;Router&gt; &lt;Suspense fallback={&lt;p&gt;Loading page...&lt;/p&gt;}&gt; &lt;Routes&gt; &lt;Route path="/" element={&lt;Home /&gt;} /&gt; &lt;Route path="/about" element={&lt;About /&gt;} /&gt; &lt;/Routes&gt; &lt;/Suspense&gt; &lt;/Router&gt; ); } export default App; </pre><h3> </h3><h3>Explanation:</h3><ul><li style="background-color: transparent">Each route dynamically loads its corresponding component (<code>Home</code> or <code>About</code>) only when the user navigates to that route.</li><li style="background-color: transparent">The <code>Suspense</code> component ensures a fallback UI is displayed while the route component is being loaded.</li></ul><h3> </h3><h3>3. Lazy Loading Images​ </h3>Lazy loading can also be applied to images to improve performance, especially for pages with many images. <pre>​function LazyImage({ src, alt }) { const [loaded, setLoaded] =React.useState(false); return ( &lt;div&gt; {!loaded &amp;&amp; &lt;p&gt;Loadingimage...&lt;/p&gt;} &lt;img src={src} alt={alt} onLoad={() =&gt; setLoaded(true)} style={{ display: loaded?'block':'none' }} /&gt; &lt;/div&gt; ); } export default LazyImage; </pre><h3>Explanation:</h3><ul><li style="background-color: transparent">The <code>LazyImage</code> component displays a loading message until the image is fully loaded.</li><li style="background-color: transparent">The <code>onLoad</code> event handler updates the state to show the image once it has been loaded.</li></ul><h3> </h3><h2>Best Practices for Lazy Loading in React </h2>​ <ol><li style="background-color: transparent;font-size: 18px">Use Fallbacks: Always provide a fallback UI for a better user experience while components or resources are being loaded.</li><li style="background-color: transparent;font-size: 18px">Split Code Strategically: Identify non-critical components or routes that can be lazy-loaded without affecting the core functionality.</li><li style="background-color: transparent;font-size: 18px">Combine with Code Splitting: Use tools like Webpack or Vite to split your application into smaller chunks for better performance.</li><li style="background-color: transparent;font-size: 18px">Optimize Images: Use lazy loading for images and consider using modern formats like WebP for better compression.</li><li style="background-color: transparent;font-size: 18px">Test Performance: Regularly test your application’s performance using tools like Lighthouse to ensure lazy loading is effective.</li></ol>

Lazy Loading in React

Styling in React can be done in several ways, depending on your preferences and the complexity of your project. Here are the most common methods for applying CSS in React: <h2>Inline Styles: </h2>​React allows us to apply styles directly to elements using the <code>style</code> attribute. The styles are written as a JavaScript object, with camelCase property names instead of kebab-case. <pre>function App() { const divStyle = { color: 'blue', backgroundColor: 'lightgray', padding: '10px', }; return &lt;div style={divStyle}&gt;Hello, React!&lt;/div&gt;; } </pre>or we write style directly in style attribute as below<div> return &lt;div style={{color: 'blue', backgroundColor: 'lightgray', padding: '10px',}&gt;Hello, React!&lt;/div&gt;;</div><div>}</div><pre>​​​function App() {​​​function App() {</pre><blockquote><h2>Note: We have to follow camel Case during writing in-line css style. </h2></blockquote><h2> </h2><h2>​CSS Stylesheets:​ </h2>We can create a separate CSS file and import it into your React component. This is the most traditional way of styling.Example:<pre>//App.jsx import './App.css'; function App() { return &lt;divclassName="container"&gt;Hello, React!&lt;/div&gt;; } </pre><h3>App.css</h3><pre>​.container { color: blue; background-color: lightgray; padding: 10px; } </pre><h2>​</h2><h2>CSS Modules:​ </h2>CSS Modules allow you to scope styles locally to a component, avoiding conflicts with other styles in the application. You create a CSS file with the <code>.module.css</code> extension and import it into your component.Example:App.jsx<pre>​import styles from './App.module.css'; function App() { return &lt;div className={styles.container}&gt;Hello, React!&lt;/div&gt;; } </pre>App.module.css: <pre>​​.container { color: blue; background-color: lightgray; padding: 10px; } </pre><h2> </h2><h2>​Styled Components (CSS-in-JS):​ </h2>Styled Components is a popular library for writing CSS directly in your JavaScript files. It uses tagged template literals to define styles.Example:<pre>​import styled from 'styled-components'; const Container = styled.div` color: blue; background-color: lightgray; padding: 10px; `; function App() { return &lt;Container&gt;Hello, React!&lt;/Container&gt;; } </pre> <h2>Sass/SCSS: </h2>React supports Sass/SCSS for more advanced styling features like variables, nesting, and mixins. You need to install <code>sass</code> to use it.Example:<pre>​​// App.scss $primary-color: blue; .container { color: $primary-color; background-color: lightgray; padding: 10px; }</pre>App.jsx<pre>​​import './App.scss'; function App() { return &lt;div className="container"&gt;Hello, React!&lt;/div&gt;; } </pre> <h2>​Global Styles with Libraries:​ </h2>Libraries like <code>styled-components</code> or <code>emotion</code> also allow you to define global styles for your application.Example with <code>styled-components</code>:<pre>​​import { createGlobalStyle } from 'styled-components'; const GlobalStyle=createGlobalStyle` body { margin: 0; font-family: Arial, sans-serif; } `; function App() { return ( &lt;&gt; &lt;GlobalStyle/&gt; &lt;div&gt;Hello, React!&lt;/div&gt; &lt;/&gt; ); } </pre> <blockquote>Note: In React, we use <code>className</code> instead of <code>class</code> because <code>class</code> is a reserved keyword in JavaScript. React is built on JavaScript, and using <code>class</code> as an attribute in JSX (JavaScript XML) would cause a conflict with the <code>class</code> keyword used to define classes in JavaScript. </blockquote> ​ ​ ​

CSS Styling In React

Form In React

React Hook Form

The Context API in React is a powerful feature that allows you to share state and data across components without the need for prop drilling. It simplifies state management in applications where multiple components need access to the same data. <h2>What is the Context API? </h2>​The Context API is a built-in feature in React that provides a way to pass data through the component tree without having to pass props manually at every level. It is particularly useful for managing global state, such as themes, user authentication, or language preferences. <h2>How Does the Context API Work? </h2>​The Context API consists of three main components: <ol><li style="background-color: transparent"><code>React.createContext()</code> This function creates a Context object. It is used to define the data that will be shared across components.</li><li style="background-color: transparent;font-size: 18px">Provider The Provider component is used to wrap the part of the component tree that needs access to the context. It provides the data to all its child components.</li><li style="background-color: transparent">Consumer The Consumer component is used to access the context data in child components. However, with React Hooks, the <code>useContext</code> hook is now the preferred way to consume context.</li></ol> <h2>When to Use the Context API </h2>​The Context API is ideal for: <ul><li style="background-color: transparent;font-size: 18px">Sharing global state, such as themes or user authentication.</li><li style="background-color: transparent;font-size: 18px">Avoiding prop drilling, where props are passed through multiple levels of components unnecessarily.</li><li style="background-color: transparent;font-size: 18px">Managing state that needs to be accessed by many components.</li></ul> <h2>How to Use the Context API</h2>​ <h3>Step 1: Create a Context </h3>​Use the <code>createContext</code> function to create a Context object.<pre>//ThemeContext.jsx import React, { createContext } from "react"; const ThemeContext = createContext(); export default ThemeContext; </pre> <h3>Step 2: Provide the Context </h3>​Wrap the component tree with the Provider and pass the data you want to share as a value. <pre>//ThemeProvider.jsx ​import React, { useState } from "react"; import ThemeContext from "./ThemeContext"; function ThemeProvider({ children }) { const [theme, setTheme] = useState("light"); return ( &lt;ThemeContext.Provider value={{ theme, setTheme }}&gt; {children} &lt;/ThemeContext.Provider&gt; ); } export default ThemeProvider; </pre> <h3>Step 3: Consume the Context </h3>​Use the <code>useContext</code> hook to access the context data in child components.<pre>//ThemeToggler.jsx ​import React, { useContext } from "react"; import ThemeContext from "./ThemeContext"; function ThemeToggler() { const { theme, setTheme } = useContext(ThemeContext); return ( &lt;div&gt; &lt;p&gt;CurrentTheme: {theme}&lt;/p&gt; &lt;button onClick={() =&gt; setTheme(theme === "light" ? "dark":"light")}&gt; ToggleTheme &lt;/button&gt; &lt;/div&gt; ); } export default ThemeToggler; </pre> <h3>Step 4: Use the Provider in the App</h3>Wrap your application with the Provider to make the context available throughout the component tree. <pre>//App.jsx ​​import React from "react"; import ThemeProvider from "./ThemeProvider"; import ThemeToggler from "./ThemeToggler"; function App() { return ( &lt;ThemeProvider&gt; &lt;ThemeToggler/&gt; &lt;/ThemeProvider&gt; ); } export default App; </pre><h2> </h2><h2>Advantages of the Context API </h2><ol><li style="background-color: transparent">Avoids Prop DrillingThe Context API eliminates the need to pass props through multiple levels of components. </li><li style="background-color: transparent;font-size: 18px">Simplifies State Management It provides a simple way to manage global state without requiring external libraries like Redux.</li><li style="background-color: transparent;font-size: 18px">Improves Code Readability By centralizing state management, the Context API makes code easier to read and maintain.</li></ol> <h2>Limitations of the Context API </h2><ul><li style="background-color: transparent">Performance Issues Frequent updates to the context value can cause unnecessary re-renders of all components consuming the context. </li><li style="background-color: transparent;font-size: 18px">Not Suitable for Large Applications For complex state management, libraries like Redux or Recoil may be more efficient.</li></ul> <h2>Best Practices for Using the Context API </h2><ol><li style="background-color: transparent">Use Context for Global State OnlyAvoid using the Context API for local state that is only relevant to a single component. </li><li style="background-color: transparent;font-size: 18px">Combine with <code>useReducer</code> for Complex State For managing complex state logic, use the <code>useReducer</code> hook with the Context API.</li><li style="background-color: transparent;font-size: 18px">Split Contexts for Different Data Create separate contexts for different types of data to avoid unnecessary re-renders.</li></ol>

Comments

REACT JS