Thanks for visiting my GitHub account!

React is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta and a community of individual developers and companies. React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js

Click Here

• VS Code, Download (LTS) ->https://code.visualstudio.com/download
• Node, Download-> https://nodejs.org/en/download
• React Developer tools extension for google, firefox, edge
• Extension: ES7 react, JS JSX snippets + “editior.snipperSuggestions”: “top”, react developer tools, material theme, setup eslint and prettier

1. Instal Node.js
2. To verify installation into command form by node -v or node --version

• fork
• clone to your local machine
• npm install
• npm start
• Or, create and run react app with npx

// create react app command
npx create-react-app appName

// If any error occurs
npm install npm -g

// run react app command
cd appName
npm start

• react-icons
• Eslint
• Prettier

• Prerequisites: HTML, CSS, Javascript
• React.js Official Site

1. Basic React.js Topics

   1.1 Introduction to React

   1.2 JSX and JS Expression

   1.3 Component

   1.4 Adding CSS Styling

   1.5 Props and destructuring

   1.6 Mapping components

   1.7 Proptotypes

   1.8 Conditional rendering

   1.9 developer tools, react and font-awesome icons

   1.10 Adding Interactivity - event & event handler

   1.11 useState Hooks

   1.12 Forms and Controlled components

   1.13 data passing: child to parent component, state lifting

   1.14 useRef hook - Uncontrolled component

2. Intermediate React.js Topics

   2.1 life cycle methods of a class component

   2.2 useEffect Hook

   2.3 useReducer Hook

   2.4 Routing

   2.5 CRUD Operations - http methods - user management app

   2.6 Optimization memo, useCallback and useMemo

   2.7 props drilling, useContext Hook

3. Advanced React.js Topics

4. Assignments

   Assignment 1: product listing App

   Assignment 2: Counter App

   Assignment 3: Add New Product

   Assignment 4: fetch products

   Assignment-5

React is an open-source JavaScript library for building user interfaces. It was developed in 2013 and is maintained by Facebook. React is known for its performance, flexibility, and component-based architecture, which allows developers to build reusable UI components and efficiently manage the state of an application.

Here are some key features and concepts associated with React:

1. Component-Based: React applications are built using components, which are self-contained, reusable building blocks for user interfaces. Components encapsulate both the UI and the logic associated with it. It helps us to create reusable components (small and isloated pieces of code using html, css, js). It helps us to render UI. Think about youtube's website

   • Single Page Application (SPA) allows us to render as much as we need for reducing unnecessary rendering such as loading navbar, footer etc. in all the pages
   • think about html tag and creating your own tag with react

2. Virtual DOM: React uses a virtual representation of the DOM (Document Object Model) to optimize updates. Instead of directly manipulating the actual DOM, React compares changes in the virtual DOM and efficiently updates only the necessary parts of the real DOM, reducing rendering time and improving performance.

   • Load fast - Why React.js is faster? - virtual DOM compares with previous states

3. Declarative Syntax: React uses a declarative approach to building UIs. Developers describe what the UI should look like based on the application's state, and React takes care of updating the DOM to match that state.

4. Unidirectional Data Flow: React enforces a one-way data flow, which means data flows down the component hierarchy from parent components to child components. This helps maintain predictable and debuggable code.

5. JSX (JavaScript XML): React allows you to write UI components using JSX, which is a syntax extension for JavaScript. JSX allows you to write HTML-like code within your JavaScript files, making it easier to define UI elements.

6. Component Lifecycle: React components have lifecycle methods that allow developers to hook into specific points in a component's lifecycle, such as when it's mounted or updated. This is useful for performing actions like data fetching, initialization, or cleanup.

7. State Management: React provides a mechanism for managing component-specific state using the useState hook for functional components and setState for class components. For global state management, libraries like Redux or React Context can be used.

8. Routing: React can be used in combination with routing libraries like React Router to create single-page applications with client-side routing.

9. Community and Ecosystem: React has a large and active community, which has led to the development of a rich ecosystem of third-party libraries and tools to enhance development and improve productivity.

10. Example of React app and competitors - facebook, twitter, airbnb, netflix etc. competitor: Vue.js, Angular (more full-fledged / developed no need 3rd party library just like react-router-dom)

Overall, React is a powerful and popular choice for building modern web applications, and it's widely adopted by developers and organizations for its efficiency and developer-friendly approach to UI development.

• VSCode (code editor)
• node.js (Download LTS: Long Term Support one) (npm is included in node.js by default)
• React Developer tools extention for google, firefox, edge
• Extension: ES7 react, JS JSX snippets + “editior.snipperSuggestions”: “top”, react developer tools, material theme, setup eslint and prettier

• Code Example - 1 (create React app)

  <!-- without JSX -->
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Document</title>
      <script
        crossorigin
        src="https://unpkg.com/react@18/umd/react.development.js"
      ></script>
      <script
        crossorigin
        src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
      ></script>
  
      <style>
        .title {
          background-color: brown;
          color: white;
          text-align: center;
        }
      </style>
    </head>
    <body>
      <div id="root"></div>
  
      <script>
        const headingElement = React.createElement(
          "h1",
          { id: "heading", className: "title" },
          "Welcome to React"
        );
        const root = ReactDOM.createRoot(document.getElementById("root"));
        root.render(headingElement);
      </script>
    </body>
  </html>

  • Code Example - 2 (create React app)

    <!-- With JSX -->
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    
        <!-- adding React  -->
        <script
          crossorigin
          src="https://unpkg.com/react@18/umd/react.development.js"
        ></script>
    
        <!-- adding ReactDOM  -->
        <script
          crossorigin
          src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
        ></script>
    
        <!-- add the babel and allow jsx  -->
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    
        <style>
          .title {
            background-color: brown;
            color: white;
            text-align: center;
          }
        </style>
      </head>
      <body>
        <div id="root"></div>
    
        <script type="text/babel">
          const root = ReactDOM.createRoot(document.getElementById("root"));
          root.render(
            <h1 id="heading" className="title">
              Welcome to React
            </h1>
          );
        </script>
      </body>
    </html>

// create react app command
npx create-react-app appName

// If any error occurs
npm install npm -g

// run react app command
cd appName
npm start

• discuss about package.json, node_modules, public, src
• package-lock.json is for version control for packages. it keeps the record of node_modules tree so that when you clone and use npm i it will install exactly same versions for the packages even though their is a new versions. if you do not have package-lock.json then it will install from package.json
• keep only the index.js in src and then play with React.js
• change the title of the app inside index.html file

JSX: stands for JavsScript XML which allows us to use write html-like syntax inside javascript and vice versa. react module has babbel inside of it that helps us to run jsx. JSX is similar like HTML but it is more dynamic. JSX and React are independent things and they can be used independently.

Rules for JSX

1. We can return single element using JSX, for multiple elements we can use a wrapper. We can also use Fragment here.

   • why we can not return multiple elements in JSX needs to be rendered? jsx is javascript object and we can return 2 objetcs from a function so we need to use array syntax and wrap everything inside one array

   • Code Example - 3 (render single element)

     import React from "react";
     import ReactDOM from "react-dom/client";
     
     const root = ReactDOM.createRoot(document.getElementById("root"));
     root.render(<h2>Anis Ecommerce website</h2>);

   • React render function can render only one element

   • Code Example - 4 (Rendering multiple elements)

     import React from "react";
     import ReactDOM from "react-dom/client";
     
     const root = ReactDOM.createRoot(document.getElementById("root"));
     
     root.render(
        <div>
         <header><h2>Anis Express</h2></header>
         <main>
         <aside>this is sidebar</aside>
           <section>
               <article>
                 <img
                   src="https://i.dummyjson.com/data/products/1/thumbnail.jpg"
                   alt="iPhone 9"
                 />
                 <h2>iPhone 9</h2>
                 <p>description: An apple mobile which is nothing like apple</p>
                 <p>Price: $549</p>
                 <p>rating: 4.69</p>
                 <p>brand: Apple</p>
                 <p>category: smartphones</p>
               <article>
     
               <article>
                 <img
                   src="https://i.dummyjson.com/data/products/2/thumbnail.jpg"
                   alt="iPhone X"
                 />
                 <h2>iPhone X</h2>
                 <p>description: SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...</p>
                 <p>Price: $899</p>
                 <p>rating: 4.44</p>
                 <p>brand: Apple</p>
                 <p>category: smartphones</p>
               <article>
           </section>
         </main>
         <footer>this is a footer</footer>
     </div>

   • React.Fragment or <> </> helps us to avoid div soup or unncessary div nesting

   • Code Example - 5 (Fragment)

     <>
       <img
         src="https://i.dummyjson.com/data/products/1/thumbnail.jpg"
         alt="iPhone 9"
       />
       <h2>iPhone 9</h2>
       <p>description: An apple mobile which is nothing like apple",</p>
       <p>Price: $549</p>
       <p>rating: 4.69</p>
       <p>category: smartphones</p>
       );
     <>

2. Remember to close all tags - <img />

3. Camelcase - className

• We can use Javascript expression inside JSX

• Code Example - 6 (JS Expression in JSX)

  import React from "react";
  import ReactDOM from "react-dom/client";
  
  const imageSource1 = "https://i.dummyjson.com/data/products/1/thumbnail.jpg";
  const title1 = "iPhone 9";
  const description1 = "An apple mobile which is nothing like apple";
  const price1 = 549;
  const rating1 = 4.69;
  const brand1 = "Apple";
  const category1 = "smartphones";
  
  const imageSource2 = "https://i.dummyjson.com/data/products/2/thumbnail.jpg";
  const title2 = "iPhone X";
  const description2 =
    "SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...";
  const price2 = 899;
  const rating2 = 4.44;
  const brand2 = "Apple";
  const category2 = "smartphones";
  
  const root = ReactDOM.createRoot(document.getElementById("root"));
  
  root.render(
    <div>
      <header>
        <h2>Anis Express</h2>
      </header>
  
      <main>
        <aside>this is sidebar</aside>
        <section>
          <article>
            <img src={imageSource1} alt="iPhone 9" />
            <h2>{title1}</h2>
            <p>description: {description1}</p>
            <p>Price: {price1}</p>
            <p>rating: {rating1}</p>
            <p>brand: {brand1}</p>
            <p>category: {category1}</p>
          </article>
          <article>
            <img src={imageSource2} alt="iPhone 9" />
            <h2>{title2}</h2>
            <p>description: {description2}</p>
            <p>Price: {price2}</p>
            <p>rating: {rating2}</p>
            <p>brand: {brand2}</p>
            <p>category: {category2}</p>
          </article>
        </section>
      </main>
      <footer>this is a footer</footer>
    </div>
  );

• Code Example - 7 (React under the hood)

const Message = () => {
  // return <h3>Message </h3>;
  return React.createElement("h1", {}, "welcome");
};

const Todo = () => {
  return (
    // <article>
    //   <h2>Check students attendance</h2>
    //   <p>
    //     Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, molestiae.
    //   </p>
    // </article>

    React.createElement(
      "article",
      {},
      React.createElement("h2", {}, "Check students attendance"),
      React.createElement(
        "p",
        {},
        " Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, molestiae."
      )
    )
  );
};

• Component: A reusable, nestable building block constrcut with mainly Javascript function and HTML; CSS can be added

  • Component VS Function: Component should always start with capital letter and return JSX
  • There are 2 main types of components: functional component and class component
  • keep a blank line when importing your components for separting built in modules

• Code Example - 8 (Create a reusable functional component)

  // reusable component
  import React from "react";
  import ReactDOM from "react-dom/client";
  
  const Products = () => {
    const imageSource1 =
      "https://i.dummyjson.com/data/products/1/thumbnail.jpg";
    const title1 = "iPhone 9";
    const description1 = "An apple mobile which is nothing like apple";
    const price1 = 549;
    const rating1 = 4.6;
    const brand1 = "Apple";
    const category1 = "smartphones";
  
    const imageSource2 =
      "https://i.dummyjson.com/data/products/2/thumbnail.jpg";
    const title2 = "iPhone X";
    const description2 =
      "SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...";
    const price2 = 899;
    const rating2 = 4.44;
    const brand2 = "Apple";
    const category2 = "smartphones";
  
    return (
      <section>
        <article>
          <img src={imageSource1} alt="iPhone 9" />
          <h2>{title1}</h2>
          <p>description: {description1}</p>
          <p>Price: {price1}</p>
          <p>rating: {rating1}</p>
          <p>brand: {brand1}</p>
          <p>category: {category1}</p>
        </article>
        <article>
          <img src={imageSource2} alt="iPhone X" />
          <h2>{title2}</h2>
          <p>description: {description2}</p>
          <p>Price: {price2}</p>
          <p>rating: {rating2}</p>
          <p>brand: {brand2}</p>
          <p>category: {category2}</p>
        </article>
      </section>
    );
  };
  
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(
    <div>
      <header>
        <h2>Anis Express</h2>
      </header>
      <main>
        <aside>this is sidebar</aside>
        <Products />
        <Products />
      </main>
      <footer>this is a footer</footer>
    </div>
  );

• Code Example - 9 (create Header, Sidebar, Footer component)

  const Header = () => {
    return (
      <header>
        <h2>Anis Express</h2>
      </header>
    );
  };
  const Sidebar = () => {
    return <aside>this is sidebar</aside>;
  };
  const Footer = () => {
    return <footer>this is a footer</footer>;
  };

• Code Example - 10 (App root component, Nested components)

  import React from "react";
  import ReactDOM from "react-dom/client";
  
  const Products = () => {
    const imageSource1 = "https://i.dummyjson.com/data/products/1/thumbnail.jpg";
    const title1 = "iPhone 9";
    const description1 = "An apple mobile which is nothing like apple";
    const price1 = 549;
    const rating1 = 4.6;
    const brand1 = "Apple";
    const category1 = "smartphones";
  
    const imageSource2 = "https://i.dummyjson.com/data/products/2/thumbnail.jpg";
    const title2 = "iPhone X";
    const description2 =
      "SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...";
    const price2 = 899;
    const rating2 = 4.44;
    const brand2 = "Apple";
    const category2 = "smartphones";
  
    return (
      <section>
        <article>
          <img src={imageSource1} alt="iPhone 9" />
          <h2>{title1}</h2>
          <p>description: {description1}</p>
          <p>Price: {price1}</p>
          <p>rating: {rating1}</p>
          <p>brand: {brand1}</p>
          <p>category: {category1}</p>
        </article>
        <article>
          <img src={imageSource2} alt="iPhone X" />
          <h2>{title2}</h2>
          <p>description: {description2}</p>
          <p>Price: {price2}</p>
          <p>rating: {rating2}</p>
          <p>brand: {brand2}</p>
          <p>category: {category2}</p>
        </article>
      </section>
    );
  };
  
  const Header = () => {
    return (
      <header>
        <h2>Anis Express</h2>
      </header>
    );
  };
  const Sidebar = () => {
    return <aside>this is sidebar</aside>;
  };
  const Footer = () => {
    return <footer>this is a footer</footer>;
  };
  
  const App = () => {
    return (
      <div>
        <Header />
        <main>
          <Sidebar />
          <Products />
        </main>
        <Footer />
      </div>
    );
  };
  
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(<App />);

• Code Example - 11 (export, import modular component)

  • export default can be used once in a file where multiple exports can be used
  • importing export default does not require {} and you can name anything on the other hand only exports requires {} and naming is strict
  • export App component

  // App.js
  
  import React from "react";
  import ReactDOM from "react-dom/client";
  
  const Products = () => {
    const imageSource1 =
      "https://i.dummyjson.com/data/products/1/thumbnail.jpg";
    const title1 = "iPhone 9";
    const description1 = "An apple mobile which is nothing like apple";
    const price1 = 549;
    const rating1 = 4.6;
    const brand1 = "Apple";
    const category1 = "smartphones";
  
    const imageSource2 =
      "https://i.dummyjson.com/data/products/2/thumbnail.jpg";
    const title2 = "iPhone X";
    const description2 =
      "SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...";
    const price2 = 899;
    const rating2 = 4.44;
    const brand2 = "Apple";
    const category2 = "smartphones";
  
    return (
      <section>
        <article>
          <img src={imageSource1} alt="iPhone 9" />
          <h2>{title1}</h2>
          <p>description: {description1}</p>
          <p>Price: {price1}</p>
          <p>rating: {rating1}</p>
          <p>brand: {brand1}</p>
          <p>category: {category1}</p>
        </article>
        <article>
          <img src={imageSource2} alt="iPhone X" />
          <h2>{title2}</h2>
          <p>description: {description2}</p>
          <p>Price: {price2}</p>
          <p>rating: {rating2}</p>
          <p>brand: {brand2}</p>
          <p>category: {category2}</p>
        </article>
      </section>
    );
  };
  
  const Header = () => {
    return (
      <header>
        <h2>Anis Express</h2>
      </header>
    );
  };
  const Sidebar = () => {
    return <aside>this is sidebar</aside>;
  };
  const Footer = () => {
    return <footer>this is a footer</footer>;
  };
  const App = () => {
    return (
      <div>
        <Header />
        <main>
          <Sidebar />
          <Products />
        </main>
        <Footer />
      </div>
    );
  };
  
  export default App;
  
  // import in index.js
  import React from "react";
  import ReactDOM from "react-dom/client";
  import App from "./App";
  
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(<App />);

• More practice for export,import

  • Code Example - 13 (More export, import)
  • separate all the components

Inline styling, CSS Stylesheet, CSS module [why you should use css module], third party packages such as Material UI, styled components

• Inline styling

    const headingStyle = { color: 'red', fontSize: '3rem' };
    <aside style={headingStyle}>
      sidebar goes here
    </aside>

• CSS Stylesheet

  • Code Example - 14 (Styling component with CSS)

    /*code for the App.css */
    /* reset code and common starts here  */
    :root {
      --primary-color: rgb(11, 181, 48);
      --secondary-color: rgba(36, 122, 55, 0.9);
      --padding: 0.5rem;
      --transition: all 0.3s;
      --border-radius: 0.6rem;
      --box-shadow: 0.1rem 0.2rem 0.8rem rgba(205, 202, 202, 0.5);
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      text-decoration: none;
      list-style-type: none;
      outline: none;
    }
    html {
      scroll-behavior: smooth;
    }
    .flex-space-around {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .flex-center {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    /* reset code and common ends here  */
    
    /* header starts here  */
    .header {
      height: 10vh;
      background-color: var(--primary-color);
      color: white;
    }
    /* header ends here  */
    
    /* main starts here  */
    main {
      height: 80vh;
    }
    .sidebar {
      flex: 1;
      padding: var(--padding);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1rem;
      align-self: flex-start;
      background-color: #e6e3e3;
      height: 100%;
      border-right: 1px solid var(--primary-color);
    }
    .main-content {
      flex: 3;
      height: 100%;
      padding: var(--padding);
      overflow: scroll;
    }
    .products {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 2rem;
      padding: 2rem 0;
    }
    .product__img {
      width: 100%;
      height: 15rem;
      filter: saturate(0);
      transition: var(--transition);
    }
    /* main ends here  */
    
    /* footer starts here  */
    .footer {
      min-height: 10vh;
      padding: var(--padding);
      background-color: var(--primary-color);
      color: white;
      font-size: 1.1rem;
    }
    /* footer ends here  */
    
    /* responsiveness starts here  */
    @media (max-width: 992px) {
      .flex-space-around,
      .flex-center {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 0;
      }
      .header {
        min-height: 10vh;
      }
      .sidebar {
        width: 100%;
      }
      .products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    
    @media (max-width: 768px) {
      .products {
        grid-template-columns: repeat(1, minmax(0, 1fr));
      }
    }
    /* responsiveness ends here  */

    // App.js
    import React from "react";
    
    import Header from "./components/Header";
    import Sidebar from "./components/Sidebar";
    import Footer from "./components/Footer";
    import Products from "./components/Products";
    
    import "./App.css";
    
    const App = () => {
      return (
        <div>
          <Header />
          <main className="flex-center">
            <Sidebar />
            <div className="main-content">
              <Products />
            </div>
          </main>
          <Footer />
        </div>
      );
    };
    
    export default App;
    
    // Header.js
      import React from "react";
    
      const Header = () => {
        return (
          <header className="header flex-center">
            <h2 className="header__title">Anis Express</h2>
          </header>
        );
      };
      export default Header;
    
    // Sidebar.js
    import React from "react";
    
    const Sidebar = () => {
      return <aside className="sidebar">this is sidebar</aside>;
    };
    export default Sidebar;
    
    // Products.js
    import React from "react";
    
    
    const Products = () => {
      const imageSource1 =
        "https://i.dummyjson.com/data/products/1/thumbnail.jpg";
      const title1 = "iPhone 9";
      const description1 = "An apple mobile which is nothing like apple";
      const price1 = 549;
      const rating1 = 4.6;
      const brand1 = "Apple";
      const category1 = "smartphones";
    
      const imageSource2 =
        "https://i.dummyjson.com/data/products/2/thumbnail.jpg";
      const title2 = "iPhone X";
      const description2 =
        "SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...";
      const price2 = 899;
      const rating2 = 4.44;
      const brand2 = "Apple";
      const category2 = "smartphones";
    
      return (
        <section className="products">
          <article className="product">
            <img src={imageSource1} alt="iPhone 9" className="product__img"/>
            <h2>{title1}</h2>
            <p>description: {description1}</p>
            <p>Price: {price1}</p>
            <p>rating: {rating1}</p>
            <p>brand: {brand1}</p>
            <p>category: {category1}</p>
          </article>
          <article className="product">
            <img src={imageSource2} alt="iPhone X" className="product__img"/>
            <h2>{title2}</h2>
            <p>description: {description2}</p>
            <p>Price: {price2}</p>
            <p>rating: {rating2}</p>
            <p>brand: {brand2}</p>
            <p>category: {category2}</p>
          </article>
        </section>
      );
    };
    export default Products;
    
    // Footer.js
    import React from "react";
    
      const Footer = () => {
        return (
          <footer className="footer flex-space-around">
            <div className="footer__left">
              <p className="footer__title">&copy;Copyright by Anisul Islam</p>
            </div>
            <div className="footer__right">
              <p>social media icons</p>
            </div>
          </footer>
        );
      };
    
      export default Footer;

• CSS module: create a file name such as fileName.module.css as shown below

  footer {
    height: 5vh;
    background-color: bisque;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .copyright {
    font-size: 0.9rem;
  }

  • use it in from another file as shown below

    import React from "react";
    
    import styles from "./footer.module.css";
    
    const Footer = () => {
      return (
        <footer>
          <p className={styles.copyright}>
            All rights reserved by Anisul Islam
          </p>
        </footer>
      );
    };
    
    export default Footer;

• props object: we can pass information from one component to another using props object. components communicate with each others via props. props is an object. props are like attributes in our HTML tag. props are readonly
  • how to pass, recieve, set default props
  • how to pass JSX to component,
• Code Example - 15 (Props sending)

import React from "react";
import Product from "./Product";

const Products = () => {
  const imageSource1 = "https://i.dummyjson.com/data/products/1/thumbnail.jpg";
  const title1 = "iPhone 9";
  const description1 = "An apple mobile which is nothing like apple";
  const price1 = 549;
  const rating1 = 4.6;
  const brand1 = "Apple";
  const category1 = "smartphones";

  const imageSource2 = "https://i.dummyjson.com/data/products/2/thumbnail.jpg";
  const title2 = "iPhone X";
  const description2 =
    "SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...";
  const price2 = 899;
  const rating2 = 4.44;
  const brand2 = "Apple";
  const category2 = "smartphones";

  return (
    <section className="products">
      <Product
        imageSource={imageSource1}
        title={title1}
        description={description1}
        price={price1}
        rating={rating1}
        brand={brand1}
        category={category1}
      />
      <Product
        imageSource={imageSource2}
        title={title2}
        description={description2}
        price={price2}
        rating={rating2}
        brand={brand2}
        category={category2}
      />
    </section>
  );
};
export default Products;

• Code Example - 16 (props recieveing & Destructuring)

  import React from "react";
  
  const Product = (props) => {
    const { imageSource, title, description, price, rating, brand, category } =
      props;
    return (
      <article className="product">
        <img src={thumbnail} alt="iPhone 9" className="product__img" />
        <div className="product__body">
          <h2 className="product__title">{title}</h2>
          <p className="product__description">description: {description}</p>
          <p className="product__price">Price: {price}</p>
          <p className="product__rating">rating: {rating}</p>
          <p className="product__brand">brand: {brand}</p>
          <p className="product__category">category: {category}</p>
        </div>
      </article>
    );
  };
  export default Product;

• Code Example - 17 (props for complex data)

  // Products.js
  import React from "react";
  import Product from "./Product";
  
  const Products = () => {
    const products = [
      {
        id: 1,
        title: "iPhone 9",
        description: "An apple mobile which is nothing like apple",
        price: 549,
        discountPercentage: 12.96,
        rating: 4.69,
        stock: 94,
        brand: "Apple",
        category: "smartphones",
        thumbnail: "https://i.dummyjson.com/data/products/1/thumbnail.jpg",
      },
      {
        id: 2,
        title: "iPhone X",
        description:
          "SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...",
        price: 899,
        discountPercentage: 17.94,
        rating: 4.44,
        stock: 34,
        brand: "Apple",
        category: "smartphones",
        thumbnail: "https://i.dummyjson.com/data/products/2/thumbnail.jpg",
      },
    ];
    return (
      <section className="products">
        <Product
          imageSource={products[0].thumbnail}
          title={products[0].title}
          description={products[0].description}
          price={products[0].price}
          rating={products[0].rating}
          brand={products[0].brand}
          category={products[0].category}
        />
        <Product
          imageSource={products[1].thumbnail}
          title={products[1].title}
          description={products[1].description}
          price={products[1].price}
          rating={products[1].rating}
          brand={products[1].brand}
          category={products[1].category}
        />
      </section>
    );
  };
  export default Products;

• create data.js in src folder and move all the todos dummy data there and import in App.js for using it.

• Can you load all the data from App.js to Products.js as props

• Code Example - 18 (import data from another file and pass as props)

// App.js
import React from "react";

import Header from "./components/Header";
import Sidebar from "./components/Sidebar";
import Footer from "./components/Footer";
import Products from "./components/Products";
import { products } from "./data";

import "./App.css";

const App = () => {
  return (
    <div>
      <Header />
      <main className="flex-center">
        <Sidebar />
        <div className="main-content">
          <Products products={products} />
        </div>
      </main>
      <Footer />
    </div>
  );
};

export default App;

// Products.js
import React from "react";
import Product from "./Product";

const Products = ({ products }) => {
  return (
    <section className="products">
      <Product
        imageSource={products[0].thumbnail}
        title={products[0].title}
        description={products[0].description}
        price={products[0].price}
        rating={products[0].rating}
        brand={products[0].brand}
        category={products[0].category}
      />
      <Product
        imageSource={products[1].thumbnail}
        title={products[1].title}
        description={products[1].description}
        price={products[1].price}
        rating={products[1].rating}
        brand={products[1].brand}
        category={products[1].category}
      />
    </section>
  );
};
export default Products;

• learn how to use map() and filter() from an array of Data.
• Code Example - 19 (Map component with for loop)

import React from "react";
import Product from "./Product";

const Products = ({ products }) => {
  const productsElement = [];
  for (let index = 0; index < products.length; index++) {
    productsElement.push(
      <Product
        imageSource={products[index].thumbnail}
        title={products[index].title}
        description={products[index].description}
        price={products[index].price}
        rating={products[index].rating}
        brand={products[index].brand}
        category={products[index].category}
      />
    );
  }
  return <section className="products">{productsElement}</section>;
};
export default Products;

• Code Example - 20 (Map component with forEach higher order Array function)

  import React from "react";
  import Product from "./Product";
  
  const Products = ({ products }) => {
    const productsElement = [];
  
    products.forEach((product) => {
      productsElement.push(
        <Product
          imageSource={product.thumbnail}
          title={product.title}
          description={product.description}
          price={product.price}
          rating={product.rating}
          brand={product.brand}
          category={product.category}
        />
      );
    });
  
    return <section className="products">{productsElement}</section>;
  };
  export default Products;

• Code Example - 21 (Map component with map higher order Array function)

  import React from "react";
  import Product from "./Product";
  
  const Products = ({ products }) => {
    const productsElement = products.map((product) => {
      return (
        <Product
          imageSource={product.thumbnail}
          title={product.title}
          description={product.description}
          price={product.price}
          rating={product.rating}
          brand={product.brand}
          category={product.category}
        />
      );
    });
  
    return <section className="products">{productsElement}</section>;
  };
  export default Products;

we need to map each children of list uniquly so that react can identify them wor properly.Keys are unique. we can use same keys for JSX nodes in different arrays.

• Where I can find key?

  • from database

  • generate locally - crypto.randomUUID() , uuid, nanoid

    • we can use index or any external package like uuid

    • How to use uuid:

      step 1: npm install uuid
      step 2: import { v4 as uuidv4 } from "uuid";
      step 3: uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

• Code Example - 22 (Adding unique key)

  // first use index
  // second use the available id
  // thirs use the uuid if id is not available inside the data
  
  import React from "react";
  import Product from "./Product";
  
  const Products = ({ products }) => {
    const productsElement = products.map((product) => {
      return (
        <Product
          key={product.id}
          imageSource={product.thumbnail}
          title={product.title}
          description={product.description}
          price={product.price}
          rating={product.rating}
          brand={product.brand}
          category={product.category}
        />
      );
    });
  
    return <section className="products">{productsElement}</section>;
  };
  export default Products;
  
  // get a uniqueId -> utility/getUniqueId.js
  import { v4 as uuidv4 } from "uuid";
  export const getUniqueId = () => uuidv4();
  
  // Now add the unique Id in App.js

• Code Example - 23 (jsx spread syntax)

import React from "react";
import Product from "./Product";

const Products = ({ products }) => {
  const productsElement = products.map((product) => {
    return <Product key={product.id} {...product} />;
  });

  return <section className="products">{productsElement}</section>;
};
export default Products;

• Code Example - 24 (passing jsx as children)

import React from "react";

const Card = ({ children }) => {
  return <div className="card">{children}</div>;
};

export default Card;

import React from "react";
import Card from "./Card";

const Product = (props) => {
  const { thumbnail, title, description, price, rating, brand, category } =
    props;
  return (
    <Card>
      <article className="product">
        <img src={thumbnail} alt="iPhone 9" className="product__img" />
        <h2>{title}</h2>
        <p>description: {description}</p>
        <p>Price: {price}</p>
        <p>rating: {rating}</p>
        <p>brand: {brand}</p>
        <p>category: {category}</p>
      </article>
    </Card>
  );
};
export default Product;

• documentation is here

• catch bugs with typechecking.

• We can use Typescript or Flow for checking types in the entire application for sure but PropTypes can be the first guard here for checking types.

• default props is essential when first time running without any value passing to props

    // lets think value can be primary or secondary one of two valyes
    <List background = 'primary' >
  
    // checking prop types
    background: PropTypes.oneOf([
      'primary',
      'secondary'
    ])

• Code Example - 25 (PropTypes)

  // Todos.js
  import React from "react";
  import PropTypes from "prop-types";
  
  import Todo from "./Todo";
  
  const Todos = (props) => {
    const { todos } = props;
  
    const renderTodosElement = todos.map((todo) => (
      <Todo key={todo.id} todo={todo} />
    ));
  
    return <section className="todos">{renderTodosElement}</section>;
  };
  Todos.defaultProps = {
    todos: [],
  };
    Todos.propTypes = {
    todos: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.string,
        title: PropTypes.string,
        desc: PropTypes.string,
      })
    ),
  };
  
  
  export default Todos;
  
  // Todo.js
  import React from "react";
  import PropTypes from "prop-types";
  
  const Todo = (props) => {
    const { todo } = props;
    return (
      <article className="todo" key={todo.id}>
        <h3>{todo.title}</h3>
        <p>{todo.desc} </p>
      </article>
    );
  };
  
  Todo.propTypes = {
    todo: PropTypes.shape({
      title: PropTypes.string,
      desc: PropTypes.string,
    }),
  };
  
  export default Todo;

• rendering components based on if-else, element variable, ternary, short circuit

• Code Example - 26 (Conditional rendering: element variable)

  // Inside App.js make adjustments
  let productsElement;
  if (products.length > 0) {
    productsElement = <Products products={products} />;
  } else {
    productsElement = <p>Product list is empty</p>;
  }
  return (
    <div>
      <Header />
      <main className="flex-center">
        <Sidebar />
        <div className="main-content">{productsElement}</div>
      </main>
      <Footer />
    </div>
  );

• Code Example - 27 (Conditional rendering: iternary)

  // Inside App.js make adjustments
  let productsElement =
    products.length > 0 ? (
      <Products products={products} />
    ) : (
      <p>products list is empty</p>
    );
  
  return (
    <div>
      <Header />
      <main className="flex-center">
        <Sidebar />
        <div className="main-content">{productsElement}</div>
      </main>
      <Footer />
    </div>
  );
  
  // An alternative - we can use ternary inside return () function
  return (
    <div>
      <Header />
      <main className="flex-center">
        <Sidebar />
        <div className="main-content">
          {products.length > 0 ? (
            <Products products={products} />
          ) : (
            <p>products list is empty</p>
          )}
        </div>
      </main>
      <Footer />
    </div>
  );

• Code Example - 28 (Conditional rendering: short circuit)

  // Inside App.js return() make following adjustments
  return (
    <div>
      <Header />
      <main>{products.length > 0 && <Products products={products} />}</main>
      <Footer />
    </div>
  );

• developer tools and extension

• 1.10 add font awesome / react icons

• How to use react-icons

• Code Example - 29 (Adding & styling react icons )

  import React from "react";
  import { FaFacebookF, FaYoutube, FaTwitter } from "react-icons/fa";
  const Footer = () => {
    return (
      <footer className="footer flex-space-around">
        <div className="footer__left">
          <p className="footer__title">&copy;Copyright by Anisul Islam</p>
        </div>
        <div className="footer__right">
          <FaFacebookF />
          <FaYoutube />
          <FaTwitter />
        </div>
      </footer>
    );
  };
  
  export default Footer;
  
  // Product.js
  import React from "react";
  import { FaCartPlus } from "react-icons/fa";
  
  import Card from "./Card";
  
  const Product = (props) => {
    const { thumbnail, title, description, price, rating, brand, category } =
      props;
    return (
      <Card>
        <article className="product">
          <img src={thumbnail} alt="iPhone 9" className="product__img" />
          <div className="product__body">
            <h2 className="product__title">{title}</h2>
            <p className="product__description">description: {description}</p>
            <p className="product__price">Price: {price}</p>
            <p className="product__rating">rating: {rating}</p>
            <p className="product__brand">brand: {brand}</p>
            <p className="product__category">category: {category}</p>
            <button className="btn product__btn icon">
              <FaCartPlus className="icon" /> Add To Cart
            </button>
          </div>
        </article>
            </Card>
          );
        };
        export default Product;
  
  
  // App.css
  /* reset code and common starts here  */
    :root {
      --primary-color: rgb(11, 181, 48);
      --secondary-color: rgba(36, 122, 55, 0.9);
      --padding: 0.5rem;
      --transition: all 0.3s;
      --border-radius: 0.6rem;
      --box-shadow: 0.1rem 0.2rem 0.8rem rgba(205, 202, 202, 0.5);
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      text-decoration: none;
      list-style-type: none;
      outline: none;
    }
    html {
      scroll-behavior: smooth;
    }
    .flex-space-around {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .flex-center {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .card {
      box-shadow: var(--box-shadow);
      border-radius: var(--border-radius);
      /* padding: var(--padding); */
      transition: var(--transition);
    }
    img {
      width: 100%;
      height: auto;
    }
    .btn {
      border: none;
      padding: var(--padding);
      border-radius: var(--border-radius);
      transition: all 0.3s;
      color: var(--secondary-color);
    }
    .btn:hover {
      background-color: orange;
      color: black;
    }
    /* reset code and common ends here  */
  
    /* header starts here  */
    .header {
      height: 10vh;
      background-color: var(--primary-color);
      color: white;
    }
    /* header ends here  */
  
    /* main starts here  */
    main {
      height: 80vh;
    }
    .sidebar {
      flex: 1;
      padding: var(--padding);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1rem;
      align-self: flex-start;
      background-color: #e6e3e3;
      height: 100%;
      border-right: 1px solid var(--primary-color);
    }
    .main-content {
      flex: 3;
      height: 100%;
      padding: var(--padding);
      overflow: scroll;
    }
    .products {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 2rem;
    }
    .product {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .product__body {
      padding: var(--padding);
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .product__img {
      width: 100%;
      height: 15rem;
      filter: saturate(0);
      transition: var(--transition);
    }
    /* main ends here  */
  
    /* footer starts here  */
    .footer {
      min-height: 10vh;
      padding: var(--padding);
      background-color: var(--primary-color);
      color: white;
      font-size: 1.1rem;
    }
    .footer__right {
      display: flex;
      gap: 1rem;
    }
    /* footer ends here  */
  
    /* responsiveness starts here  */
    @media (max-width: 992px) {
      .flex-space-around,
      .flex-center {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 0;
      }
      .header {
        min-height: 10vh;
      }
      .sidebar {
        width: 100%;
      }
      .products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
  
    @media (max-width: 768px) {
      .products {
        grid-template-columns: repeat(1, minmax(0, 1fr));
      }
    }
    /* responsiveness ends here  */

• How to use font awesome icons directly

     // Add SVG Core
    npm i --save @fortawesome/fontawesome-svg-core
  
    // add Free icons styles
    npm i --save @fortawesome/free-solid-svg-icons
    npm i --save @fortawesome/free-regular-svg-icons
    npm i --save @fortawesome/free-brands-svg-icons
  
    // add the react component
    npm i --save @fortawesome/react-fontawesome@latest
  
  
    // usage
    import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
    import { faPlusCircle, faMinusCircle } from '@fortawesome/free-solid-svg-icons';
    import { faYoutube } from '@fortawesome/free-brands-svg-icons';
  
    <FontAwesomeIcon icon={faPlusCircle}></FontAwesomeIcon>
  
    // use className for styling icons

• Event: any user interaction like clicking button, hovering button, giving values in input field etc.

• Event handler: your response to user interactions. create a function for handling the interaction.

• state - value of anything can be changed based on your interaction and you may want to update UI based on state.

• Code Example - 30 (event - onClick )

  <button
    className="btn product__btn"
    onClick={alert("product is added to the cart")} // not depends on user inetractivity
  >
    <FaCartPlus className="icon" /> Add To Cart
  </button>

• Code Example - 31 (event Handler)

  const handleClick = () => {
    alert("product is added to the cart");
  };
  
  // method 1
  <button
    className="btn product__btn"
    onClick={() => {
      alert("product is added to the cart");
    }} // depends on user inetractivity as we definied the function and it is not running until we click the button
  >
    <FaCartPlus className="icon" /> Add To Cart
  </button>
  
  // method 2
  <button
    className="btn product__btn"
    onClick={handleClick} // do not call just define the function
  >
    <FaCartPlus className="icon" /> Add To Cart
  </button>
  
  // we can create own custom Button component
  import React from "react";
  
  const Button = (props) => {
    console.log(props);
  
    const handleClick = () => {
      // we can use condition for calling multiple functions
      props.onHandleAddProduct();
    };
  
   const handleAddProduct = (product) => {
    alert(JSON.stringify(product, null, 4));
  };
  
    return (
      <button className={props.className} onClick={props.onClick} type={props.type}>
      {props.children}
    </button>
    );
  };
  
  export default Button;
  
  // more simplified
  import React from "react";
  
  const Button = (props) => {
    return (
      <button className={props.className} onClick={props.onClick}>
        {props.children}
      </button>
    );
  };
  
  export default Button;

• Code Example - 32 (Pass parameter with event )

  const handleAddProduct = (e, product) => {
    e.stopPropagation();
    console.log("Product Event: ", e);
    alert(JSON.stringify(product, null, 4));
  };
  
  <Button
    className="btn product__btn"
    onClick={(e) => {
      handleAddProduct(e, product);
    }}
  >
    <FaCartPlus className="icon" /> Add To Cart
  </Button>;

• Code Example - 33 (onChange Event )

  import React from "react";
  
  const NewProduct = () => {
    const handleChange = (event) => {
      console.log(event.target.value);
    };
    return (
      <div className="new-user">
        <h2>Create Product</h2>
  
        <div className="form__control">
          <label htmlFor="title">Title: </label>
          <input
            className="form__input"
            type="text"
            placeholder="Enter product title"
            name="title"
            onChange={handleChange}
            required={true}
          />
        </div>
  
        <div className="form__control">
          <label htmlFor="price">Price: </label>
          <input
            className="form__input"
            type="number"
            placeholder="Enter product price here"
            name="price"
            onChange={handleChange}
            required={true}
          />
        </div>
      </div>
    );
  };
  
  export default NewProduct;

• Code Example - 34 (More complex example of onChange Event )

  import React from "react";
  
  const NewProduct = () => {
    const inputs = [
      {
        id: 1,
        type: "text",
        name: "title",
        placeholder: "Enter product title",
        required: true,
      },
      {
        id: 2,
        type: "number",
        name: "price",
        placeholder: "Enter product price",
        required: true,
      },
    ];
    const handleChange = (event) => {
      console.log(event.target.value);
    };
  
    return (
      <div className="new-user">
        <h2>Create Product</h2>
  
        <input
          className="form__input"
          type={inputs[0].type}
          placeholder={inputs[0].placeholder}
          name={inputs[0].name}
          onChange={handleChange}
          required={inputs[0].required}
        />
  
        <input
          className="form__input"
          type={inputs[1].type}
          placeholder={inputs[1].placeholder}
          name={inputs[1].name}
          onChange={handleChange}
          required={inputs[1].required}
        />
      </div>
    );
  };
  
  // More simplified
  const NewProduct = () => {
    const inputs = [
      {
        id: 1,
        type: "text",
        name: "title",
        placeholder: "Enter product title",
        required: true,
      },
      {
        id: 2,
        type: "number",
        name: "price",
        placeholder: "Enter product price",
        required: true,
      },
    ];
    const handleChange = (event) => {
      console.log(event.target.value);
    };
  
    const renderInputs = inputs.map((input) => {
      return (
        <Input
          key={input.id}
          className="form__input"
          type={input.type}
          placeholder={input.placeholder}
          name={input.name}
          onChange={handleChange}
          required={input.required}
        />
      );
    });
  
    return (
      <div className="new-user">
        <h2>Create Product</h2>
        {renderInputs}
      </div>
    );
  };
  
  // more simplified
  <Input key={input.id} {...input} onChange={handleChange} />;
  
  // Input.js
  import React from "react";
  const Input = (props) => {
    const { onChange, ...inputProps } = props; // getting onChnage from props and putting rest of the things inside inputProps
  
    console.log([inputProps]);
    return (
      <input className="form__input" {...inputProps} onChange={onChange} />
    );
  };
  
  export default Input;

• Code Example - 35 (Event Bubbling - child event can effect parent event )

  const handleAddProduct = (e, product) => {
    e.stopPropagation();
    console.log("Product Event: ", e);
    alert(JSON.stringify(product, null, 4));
  };

• Code Example - 36 (onSubmit Event )

• without state management

const Counter = () => {
  let count = 0;

  const handleIncrement = () => {
    count++;
    alert(count);
  };
  const handleDecrement = () => {
    count--;
    alert(count);
  };
  const handleReset = () => {
    count = 0;
    alert(count);
  };

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleReset}>0</button>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
};

export default Counter;

• state is a memory for component where we can update value and re-render the component

• state is a global variable thats why when you even re-render it fetch the last updated value

• hooks are function which we can implement in our component - useState, useEffect

• useState() hook helps us to track state in a functional component.

• Code Example - 36 (Counter App )

  // App.js
  import React from "react";
  
  import Counter from "./components/Counter";
  
  const App = () => {
    return (
      <div>
        <Counter />
      </div>
    );
  };
  
  export default App;

  // Counter.js
  import React, { useState } from "react";
  
  function Counter() {
    const [count, setCount] = useState(0);
    const handleIncrement = () => {
      setCount(count + 1); // setCount (count => count + 1)
    };
  
    return (
      <div>
        <h2>Counter: {count}</h2>
        <button onClick={handleIncrement}>+</button>
      </div>
    );
  }
  
  export default Counter;

  • we can also use name attribute for identifying element and use 1 function instead of many. from ebent handler we can use event.target.name and then decide what to do or not? - [1 handler for multiple elements] (https://github.com/anisul-Islam/react-counter-app-1-function/blob/master/src/components/Counter.js)

• Code Example - 37 (store data in state )

  import React, { useState } from "react";
  import { FaCartPlus } from "react-icons/fa";
  import Button from "./Button";
  
  import Card from "./Card";
  
  const Product = (props) => {
    const { thumbnail, title, description, price, rating, brand, category } =
      props;
    const product = props;
    const [cartProducts, setCartProducts] = useState([]);
    const handleAddProduct = (e, product) => {
      e.stopPropagation();
      setCartProducts((prevState) => {
        return [...prevState, product];
      });
    };
    console.log(cartProducts);
    return (
      <Card>
        <article className="product">
          <img src={thumbnail} alt="iPhone 9" className="product__img" />
          <div className="product__body">
            <h2 className="product__title">{title}</h2>
            <p className="product__description">description: {description}</p>
            <p className="product__price">Price: {price}</p>
            <p className="product__rating">rating: {rating}</p>
            <p className="product__brand">brand: {brand}</p>
            <p className="product__category">category: {category}</p>
            {/* <button className="btn product__btn icon">
              <FaCartPlus className="icon" /> Add To Cart
            </button> */}
            <Button
              className="btn product__btn"
              onClick={(e) => {
                handleAddProduct(e, product);
              }}
            >
              <FaCartPlus className="icon" /> Add To Cart
            </Button>
          </div>
        </article>
      </Card>
    );
  };
  export default Product;

• Code Example - 38 (why update data based on prevState?)

  • update state based on prev value - setCount (count => count + 1)

      const handleIncrement = (e) => {
        e.stopPropagation();
  
        setcount(count + 1);
        setcount(count + 1);
        setcount(count + 1);
  
        console.log("increment count: ", count);
      };
  
      const handleIncrement = (e) => {
          e.stopPropagation();
  
          setcount((count) => count + 1);
          setcount((count) => count + 1);
          setcount((count) => count + 1);
  
          console.log("increment count: ", count);
        };
  
      const handleIncrement = (e) => {
         e.stopPropagation();
        setTimeout(() => {
          <!-- setcount(count + 1); -->
          setcount((count) => count + 1);
        }, 3000);
        console.log("increment count: ", count);
      };