{"id":19606765,"url":"https://github.com/learnwithfair/react-documentation","last_synced_at":"2026-06-13T00:32:46.415Z","repository":{"id":237471499,"uuid":"794488215","full_name":"learnwithfair/react-documentation","owner":"learnwithfair","description":"react documentation with [learnwithfair, Learn with fair, Rahatul Rabbi, Md Rahatul Rabbi ,rahatulrabbi]","archived":false,"fork":false,"pushed_at":"2024-05-01T09:50:27.000Z","size":95,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-26T16:50:00.946Z","etag":null,"topics":["documentation","learn-with-fair","learnwithfair","rahatul-rabbi","rahatulrabbi","react","reactjs","webdevelopment"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/learnwithfair.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-01T09:37:10.000Z","updated_at":"2024-05-01T09:52:08.000Z","dependencies_parsed_at":"2024-05-02T06:29:05.519Z","dependency_job_id":"52d6dfb2-fc46-40e9-9115-44ca7f49e11a","html_url":"https://github.com/learnwithfair/react-documentation","commit_stats":null,"previous_names":["learnwithfair/react-documentation"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/learnwithfair/react-documentation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Freact-documentation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Freact-documentation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Freact-documentation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Freact-documentation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/learnwithfair","download_url":"https://codeload.github.com/learnwithfair/react-documentation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Freact-documentation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34268187,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-12T02:00:06.859Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["documentation","learn-with-fair","learnwithfair","rahatul-rabbi","rahatulrabbi","react","reactjs","webdevelopment"],"created_at":"2024-11-11T10:07:08.741Z","updated_at":"2026-06-13T00:32:46.386Z","avatar_url":"https://github.com/learnwithfair.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"## REACT-JS DOCUMENTATION\n\nThanks for visiting my GitHub account!\n\n\u003cimg src =\"https://styles.redditmedia.com/t5_2su6s/styles/communityIcon_4g1uo0kd87c61.png\" height = \"200px\" width = \"200px\"/\u003e **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\n\n### [Code-Example](https://github.com/learnwithfair/react-js)\n\n## Source Code (Download)\n\n- [Documents](https://mega.nz/folder/RGFiUApD#PoKIVCwF8IkQhE2PHw1XxQ)\n- [React-Code](https://mega.nz/file/oeNEASAS#xGJJKPpuyQ4sQO6IbCW8e91v7pD3e2_7NcgD9y9_OXo)\n- [All-React-Code](https://mega.nz/folder/UWkxEK7R#flijF8l7WD48VtUtGJ4q_A)\n\n## Required Software (Download)\n\n- VS Code, Download (LTS) -\u003ehttps://code.visualstudio.com/download\n- Node, Download-\u003e https://nodejs.org/en/download\n- React Developer tools extension for google, firefox, edge\n- Extension: ES7 react, JS JSX snippets + “editior.snipperSuggestions”: “top”, react developer tools, material theme, setup eslint and prettier\n\n## ========== Environment Setup ==========\n\n1. Instal Node.js\n2. To verify installation into command form by node -v or node --version\n\n## How to use the template?\n\n- clone to your local machine\n- npm install\n- npm start\n- Or, create and run react app with npx\n\n```js\n// create react app command\nnpx create-react-app appName\n\n// If any error occurs\nnpm install npm -g\n\n// run react app command\ncd appName\nnpm start\n```\n\n## Project Features\n\n| |\n| :----------------------------------------------------------------------------------------: |\n| Project Components |\n| ![features](https://github.com/learnwithfair/react-js/blob/main/images/react-features.jpg) |\n\n# Getting Started with Create React App\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n# DESCRIPTION\n\n- Prerequisites: HTML, CSS, Javascript\n- [React.js Official Site](https://reactjs.org/)\n\n## Table of Contents\n\n1. [Basic React.js Topics](#1-basic-reactjs-topics)\n\n [1.1 Introduction to React](#11-introduction-to-react)\n\n [1.2 JSX and JS Expression](#12-jsx-and-js-expression)\n\n [1.3 Component](#13-component)\n\n [1.4 Adding CSS Styling](#14-adding-css-styling)\n\n [1.5 Props and destructuring](#15-props-and-destructuring)\n\n [1.6 Mapping components](#16-mapping--rednering-components)\n\n [1.7 Proptotypes](#17-proptypes)\n\n [1.8 Conditional rendering](#18-conditional-rendering)\n\n [1.9 developer tools, react and font-awesome icons](#19-developer-tools-react-and-font-awesome-icons)\n\n [1.10 Adding Interactivity - event \u0026 event handler](#110-adding-interactivity---event--event-handler)\n\n [1.11 useState Hooks](#111-usestate-hooks)\n\n [1.12 Forms and Controlled components](#112-forms-and-controlled-components)\n\n [1.13 data passing: child to parent component, state lifting](#113-data-passing-child-to-parent-component-state-lifting)\n\n [1.14 useRef hook - Uncontrolled component](#114-useref-hook---uncontrolled-component)\n\n2. [Intermediate React.js Topics](#2-intermediate-reactjs-topics)\n\n [2.1 life cycle methods of a class component](#21-life-cycle-methods-of-a-class-component)\n\n [2.2 useEffect Hook](#22-useeffect-hook)\n\n [2.3 useReducer Hook](#23-usereducer-hook)\n\n [2.4 Routing](#24-routing)\n\n [2.5 CRUD Operations - http methods - user management app](#25-crud-operations---http-methods---user-management-app)\n\n [2.6 Optimization memo, useCallback and useMemo](#26-optimization-reactmemo-usecallback-usememo)\n\n [2.7 props drilling, useContext Hook](#27-props-drilling-usecontext-hook)\n\n3. [Advanced React.js Topics]()\n\n4. Assignments\n\n [Assignment 1: product listing App](https://github.com/anisul-Islam/react-assignment-1-products-listing-app)\n\n [Assignment 2: Counter App](https://github.com/anisul-Islam/react-assignment-2-counter-app)\n\n [Assignment 3: Add New Product](https://github.com/anisul-Islam/react-assignment-3-add-new-product)\n\n [Assignment 4: fetch products](https://github.com/anisul-Islam/react-assignment-4-fetch-products)\n\n [Assignment-5]()\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\\\nYou will also see any lint errors in the console.\n\n### `npm test`\n\nLaunches the test runner in the interactive watch mode.\\\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\\\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n### `npm run eject`\n\n**Note: this is a one-way operation. Once you `eject`, you can’t go back!**\n\nIf you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.\n\nInstead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.\n\nYou don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.\n\n## 1. Basic React.js Topics\n\n### [1.1 Introduction to React](https://youtu.be/fRXL0X2WSK4)\n\n#### What is React?\n\nReact 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.\n\n#### Why React / Features of React.js\n\n![React](https://github.com/learnwithfair/react-js/blob/main/images/Untitled-2023-10-07-1651.png)\n\nHere are some key features and concepts associated with React:\n\n1. **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\n\n - 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\n - think about html tag and creating your own tag with react\n\n2. **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.\n\n - Load fast - Why React.js is faster? - virtual DOM compares with previous states\n\n3. **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.\n\n4. **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.\n\n5. **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.\n\n6. **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.\n\n7. **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.\n\n8. **Routing:** React can be used in combination with routing libraries like React Router to create single-page applications with client-side routing.\n\n9. **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.\n\n10. **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)\n\nOverall, 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.\n\n#### [Environment setup](https://youtu.be/4wjI8fh77GM)\n\n- VSCode (code editor)\n- node.js (Download LTS: Long Term Support one)\n (npm is included in node.js by default)\n- React Developer tools extention for google, firefox, edge\n- Extension: ES7 react, JS JSX snippets + “editior.snipperSuggestions”: “top”, react developer tools, material theme, setup eslint and prettier\n\n#### [First react app](https://youtu.be/_yYO_ly9hmY?si=ruoWbevzoJrj0pqS)\n\n#### Method 1: add React to a website with CDN\n\n- **Code Example - 1 (create React app)**\n\n ```html\n \u003c!-- without JSX --\u003e\n \u003c!DOCTYPE html\u003e\n \u003chtml lang=\"en\"\u003e\n \u003chead\u003e\n \u003cmeta charset=\"UTF-8\" /\u003e\n \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n \u003ctitle\u003eDocument\u003c/title\u003e\n \u003cscript\n crossorigin\n src=\"https://unpkg.com/react@18/umd/react.development.js\"\n \u003e\u003c/script\u003e\n \u003cscript\n crossorigin\n src=\"https://unpkg.com/react-dom@18/umd/react-dom.development.js\"\n \u003e\u003c/script\u003e\n\n \u003cstyle\u003e\n .title {\n background-color: brown;\n color: white;\n text-align: center;\n }\n \u003c/style\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n\n \u003cscript\u003e\n const headingElement = React.createElement(\n \"h1\",\n { id: \"heading\", className: \"title\" },\n \"Welcome to React\"\n );\n const root = ReactDOM.createRoot(document.getElementById(\"root\"));\n root.render(headingElement);\n \u003c/script\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n ```\n\n - **Code Example - 2 (create React app)**\n\n ```html\n \u003c!-- With JSX --\u003e\n \u003c!DOCTYPE html\u003e\n \u003chtml lang=\"en\"\u003e\n \u003chead\u003e\n \u003cmeta charset=\"UTF-8\" /\u003e\n \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n \u003ctitle\u003eDocument\u003c/title\u003e\n\n \u003c!-- adding React --\u003e\n \u003cscript\n crossorigin\n src=\"https://unpkg.com/react@18/umd/react.development.js\"\n \u003e\u003c/script\u003e\n\n \u003c!-- adding ReactDOM --\u003e\n \u003cscript\n crossorigin\n src=\"https://unpkg.com/react-dom@18/umd/react-dom.development.js\"\n \u003e\u003c/script\u003e\n\n \u003c!-- add the babel and allow jsx --\u003e\n \u003cscript src=\"https://unpkg.com/babel-standalone@6/babel.min.js\"\u003e\u003c/script\u003e\n\n \u003cstyle\u003e\n .title {\n background-color: brown;\n color: white;\n text-align: center;\n }\n \u003c/style\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n\n \u003cscript type=\"text/babel\"\u003e\n const root = ReactDOM.createRoot(document.getElementById(\"root\"));\n root.render(\n \u003ch1 id=\"heading\" className=\"title\"\u003e\n Welcome to React\n \u003c/h1\u003e\n );\n \u003c/script\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n ```\n\n#### Method 2: create and run react app with npx\n\n```js\n// create react app command\nnpx create-react-app appName\n\n// If any error occurs\nnpm install npm -g\n\n// run react app command\ncd appName\nnpm start\n```\n\n#### Method 3: create react app with bundler with vite `npm create vite@latest` swc(speedy web compiler)\n\n#### Understand File structure\n\n- discuss about package.json, node_modules, public, src\n- [package-lock.json](https://medium.com/helpshift-engineering/package-lock-json-the-complete-guide-2ae40175ebdd#:~:text=different%20machines%2Fenvironments.-,package%2Dlock.,json%20file.) 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\n- keep only the index.js in src and then play with React.js\n- change the title of the app inside index.html file\n\n\u003c!-- ## Part-2 (JSX, Component, react component under the hood, Styling, Props, PropTypes, Conditional rendering, Fragment, react dev-tools, icons) --\u003e\n\n### [1.2 JSX and JS Expression](https://youtu.be/6-r6pBA4eUY)\n\n**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.\n\nRules for JSX\n\n1. We can return single element using JSX, for multiple elements we can use a wrapper. We can also use Fragment here.\n\n - why we can not return multiple elements in JSX needs to be rendered?\n 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\n\n - **Code Example - 3 (render single element)**\n\n ```js\n import React from \"react\";\n import ReactDOM from \"react-dom/client\";\n\n const root = ReactDOM.createRoot(document.getElementById(\"root\"));\n root.render(\u003ch2\u003eAnis Ecommerce website\u003c/h2\u003e);\n ```\n\n - **React render function can render only one element**\n - **Code Example - 4 (Rendering multiple elements)**\n\n ```jsx\n import React from \"react\";\n import ReactDOM from \"react-dom/client\";\n\n const root = ReactDOM.createRoot(document.getElementById(\"root\"));\n\n root.render(\n \u003cdiv\u003e\n \u003cheader\u003e\u003ch2\u003eAnis Express\u003c/h2\u003e\u003c/header\u003e\n \u003cmain\u003e\n \u003caside\u003ethis is sidebar\u003c/aside\u003e\n \u003csection\u003e\n \u003carticle\u003e\n \u003cimg\n src=\"https://i.dummyjson.com/data/products/1/thumbnail.jpg\"\n alt=\"iPhone 9\"\n /\u003e\n \u003ch2\u003eiPhone 9\u003c/h2\u003e\n \u003cp\u003edescription: An apple mobile which is nothing like apple\u003c/p\u003e\n \u003cp\u003ePrice: $549\u003c/p\u003e\n \u003cp\u003erating: 4.69\u003c/p\u003e\n \u003cp\u003ebrand: Apple\u003c/p\u003e\n \u003cp\u003ecategory: smartphones\u003c/p\u003e\n \u003carticle\u003e\n\n \u003carticle\u003e\n \u003cimg\n src=\"https://i.dummyjson.com/data/products/2/thumbnail.jpg\"\n alt=\"iPhone X\"\n /\u003e\n \u003ch2\u003eiPhone X\u003c/h2\u003e\n \u003cp\u003edescription: SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...\u003c/p\u003e\n \u003cp\u003ePrice: $899\u003c/p\u003e\n \u003cp\u003erating: 4.44\u003c/p\u003e\n \u003cp\u003ebrand: Apple\u003c/p\u003e\n \u003cp\u003ecategory: smartphones\u003c/p\u003e\n \u003carticle\u003e\n \u003c/section\u003e\n \u003c/main\u003e\n \u003cfooter\u003ethis is a footer\u003c/footer\u003e\n \u003c/div\u003e\n ```\n\n - React.Fragment or \u003c\u003e \u003c/\u003e helps us to avoid div soup or unncessary div nesting\n - **Code Example - 5 (Fragment)**\n\n ```js\n \u003c\u003e\n \u003cimg\n src=\"https://i.dummyjson.com/data/products/1/thumbnail.jpg\"\n alt=\"iPhone 9\"\n /\u003e\n \u003ch2\u003eiPhone 9\u003c/h2\u003e\n \u003cp\u003edescription: An apple mobile which is nothing like apple\",\u003c/p\u003e\n \u003cp\u003ePrice: $549\u003c/p\u003e\n \u003cp\u003erating: 4.69\u003c/p\u003e\n \u003cp\u003ecategory: smartphones\u003c/p\u003e\n );\n \u003c\u003e\n ```\n\n2. Remember to close all tags - `\u003cimg /\u003e`\n\n3. Camelcase - className\n\n- We can use Javascript expression inside JSX\n- **Code Example - 6 (JS Expression in JSX)**\n\n ```js\n import React from \"react\";\n import ReactDOM from \"react-dom/client\";\n\n const imageSource1 = \"https://i.dummyjson.com/data/products/1/thumbnail.jpg\";\n const title1 = \"iPhone 9\";\n const description1 = \"An apple mobile which is nothing like apple\";\n const price1 = 549;\n const rating1 = 4.69;\n const brand1 = \"Apple\";\n const category1 = \"smartphones\";\n\n const imageSource2 = \"https://i.dummyjson.com/data/products/2/thumbnail.jpg\";\n const title2 = \"iPhone X\";\n const description2 =\n \"SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...\";\n const price2 = 899;\n const rating2 = 4.44;\n const brand2 = \"Apple\";\n const category2 = \"smartphones\";\n\n const root = ReactDOM.createRoot(document.getElementById(\"root\"));\n\n root.render(\n \u003cdiv\u003e\n \u003cheader\u003e\n \u003ch2\u003eAnis Express\u003c/h2\u003e\n \u003c/header\u003e\n\n \u003cmain\u003e\n \u003caside\u003ethis is sidebar\u003c/aside\u003e\n \u003csection\u003e\n \u003carticle\u003e\n \u003cimg src={imageSource1} alt=\"iPhone 9\" /\u003e\n \u003ch2\u003e{title1}\u003c/h2\u003e\n \u003cp\u003edescription: {description1}\u003c/p\u003e\n \u003cp\u003ePrice: {price1}\u003c/p\u003e\n \u003cp\u003erating: {rating1}\u003c/p\u003e\n \u003cp\u003ebrand: {brand1}\u003c/p\u003e\n \u003cp\u003ecategory: {category1}\u003c/p\u003e\n \u003c/article\u003e\n \u003carticle\u003e\n \u003cimg src={imageSource2} alt=\"iPhone 9\" /\u003e\n \u003ch2\u003e{title2}\u003c/h2\u003e\n \u003cp\u003edescription: {description2}\u003c/p\u003e\n \u003cp\u003ePrice: {price2}\u003c/p\u003e\n \u003cp\u003erating: {rating2}\u003c/p\u003e\n \u003cp\u003ebrand: {brand2}\u003c/p\u003e\n \u003cp\u003ecategory: {category2}\u003c/p\u003e\n \u003c/article\u003e\n \u003c/section\u003e\n \u003c/main\u003e\n \u003cfooter\u003ethis is a footer\u003c/footer\u003e\n \u003c/div\u003e\n );\n ```\n\n#### [How React works under the hood](https://youtu.be/kj0cxv_dC9M)\n\n- **Code Example - 7 (React under the hood)**\n\n```javascript\nconst Message = () =\u003e {\n // return \u003ch3\u003eMessage \u003c/h3\u003e;\n return React.createElement(\"h1\", {}, \"welcome\");\n};\n\nconst Todo = () =\u003e {\n return (\n // \u003carticle\u003e\n // \u003ch2\u003eCheck students attendance\u003c/h2\u003e\n // \u003cp\u003e\n // Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, molestiae.\n // \u003c/p\u003e\n // \u003c/article\u003e\n\n React.createElement(\n \"article\",\n {},\n React.createElement(\"h2\", {}, \"Check students attendance\"),\n React.createElement(\n \"p\",\n {},\n \" Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, molestiae.\"\n )\n )\n );\n};\n```\n\n### [1.3 Component](https://youtu.be/qgLZSNppJOU)\n\n- **Component: A _reusable_, _nestable_ _building block_ constrcut with mainly Javascript function and HTML; CSS can be added**\n - Component VS Function: Component should always start with capital letter and return JSX\n - There are 2 main types of components: functional component and class component\n - keep a blank line when importing your components for separting built in modules\n- **Code Example - 8 (Create a reusable functional component)**\n\n ```javascript\n // reusable component\n import React from \"react\";\n import ReactDOM from \"react-dom/client\";\n\n const Products = () =\u003e {\n const imageSource1 =\n \"https://i.dummyjson.com/data/products/1/thumbnail.jpg\";\n const title1 = \"iPhone 9\";\n const description1 = \"An apple mobile which is nothing like apple\";\n const price1 = 549;\n const rating1 = 4.6;\n const brand1 = \"Apple\";\n const category1 = \"smartphones\";\n\n const imageSource2 =\n \"https://i.dummyjson.com/data/products/2/thumbnail.jpg\";\n const title2 = \"iPhone X\";\n const description2 =\n \"SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...\";\n const price2 = 899;\n const rating2 = 4.44;\n const brand2 = \"Apple\";\n const category2 = \"smartphones\";\n\n return (\n \u003csection\u003e\n \u003carticle\u003e\n \u003cimg src={imageSource1} alt=\"iPhone 9\" /\u003e\n \u003ch2\u003e{title1}\u003c/h2\u003e\n \u003cp\u003edescription: {description1}\u003c/p\u003e\n \u003cp\u003ePrice: {price1}\u003c/p\u003e\n \u003cp\u003erating: {rating1}\u003c/p\u003e\n \u003cp\u003ebrand: {brand1}\u003c/p\u003e\n \u003cp\u003ecategory: {category1}\u003c/p\u003e\n \u003c/article\u003e\n \u003carticle\u003e\n \u003cimg src={imageSource2} alt=\"iPhone X\" /\u003e\n \u003ch2\u003e{title2}\u003c/h2\u003e\n \u003cp\u003edescription: {description2}\u003c/p\u003e\n \u003cp\u003ePrice: {price2}\u003c/p\u003e\n \u003cp\u003erating: {rating2}\u003c/p\u003e\n \u003cp\u003ebrand: {brand2}\u003c/p\u003e\n \u003cp\u003ecategory: {category2}\u003c/p\u003e\n \u003c/article\u003e\n \u003c/section\u003e\n );\n };\n\n const root = ReactDOM.createRoot(document.getElementById(\"root\"));\n root.render(\n \u003cdiv\u003e\n \u003cheader\u003e\n \u003ch2\u003eAnis Express\u003c/h2\u003e\n \u003c/header\u003e\n \u003cmain\u003e\n \u003caside\u003ethis is sidebar\u003c/aside\u003e\n \u003cProducts /\u003e\n \u003cProducts /\u003e\n \u003c/main\u003e\n \u003cfooter\u003ethis is a footer\u003c/footer\u003e\n \u003c/div\u003e\n );\n ```\n\n- **Code Example - 9 (create Header, Sidebar, Footer component)**\n\n ```js\n const Header = () =\u003e {\n return (\n \u003cheader\u003e\n \u003ch2\u003eAnis Express\u003c/h2\u003e\n \u003c/header\u003e\n );\n };\n const Sidebar = () =\u003e {\n return \u003caside\u003ethis is sidebar\u003c/aside\u003e;\n };\n const Footer = () =\u003e {\n return \u003cfooter\u003ethis is a footer\u003c/footer\u003e;\n };\n ```\n\n- **Code Example - 10 (App root component, Nested components)**\n\n ```js\n import React from \"react\";\n import ReactDOM from \"react-dom/client\";\n\n const Products = () =\u003e {\n const imageSource1 =\n \"https://i.dummyjson.com/data/products/1/thumbnail.jpg\";\n const title1 = \"iPhone 9\";\n const description1 = \"An apple mobile which is nothing like apple\";\n const price1 = 549;\n const rating1 = 4.6;\n const brand1 = \"Apple\";\n const category1 = \"smartphones\";\n\n const imageSource2 =\n \"https://i.dummyjson.com/data/products/2/thumbnail.jpg\";\n const title2 = \"iPhone X\";\n const description2 =\n \"SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...\";\n const price2 = 899;\n const rating2 = 4.44;\n const brand2 = \"Apple\";\n const category2 = \"smartphones\";\n\n return (\n \u003csection\u003e\n \u003carticle\u003e\n \u003cimg src={imageSource1} alt=\"iPhone 9\" /\u003e\n \u003ch2\u003e{title1}\u003c/h2\u003e\n \u003cp\u003edescription: {description1}\u003c/p\u003e\n \u003cp\u003ePrice: {price1}\u003c/p\u003e\n \u003cp\u003erating: {rating1}\u003c/p\u003e\n \u003cp\u003ebrand: {brand1}\u003c/p\u003e\n \u003cp\u003ecategory: {category1}\u003c/p\u003e\n \u003c/article\u003e\n \u003carticle\u003e\n \u003cimg src={imageSource2} alt=\"iPhone X\" /\u003e\n \u003ch2\u003e{title2}\u003c/h2\u003e\n \u003cp\u003edescription: {description2}\u003c/p\u003e\n \u003cp\u003ePrice: {price2}\u003c/p\u003e\n \u003cp\u003erating: {rating2}\u003c/p\u003e\n \u003cp\u003ebrand: {brand2}\u003c/p\u003e\n \u003cp\u003ecategory: {category2}\u003c/p\u003e\n \u003c/article\u003e\n \u003c/section\u003e\n );\n };\n\n const Header = () =\u003e {\n return (\n \u003cheader\u003e\n \u003ch2\u003eAnis Express\u003c/h2\u003e\n \u003c/header\u003e\n );\n };\n const Sidebar = () =\u003e {\n return \u003caside\u003ethis is sidebar\u003c/aside\u003e;\n };\n const Footer = () =\u003e {\n return \u003cfooter\u003ethis is a footer\u003c/footer\u003e;\n };\n\n const App = () =\u003e {\n return (\n \u003cdiv\u003e\n \u003cHeader /\u003e\n \u003cmain\u003e\n \u003cSidebar /\u003e\n \u003cProducts /\u003e\n \u003c/main\u003e\n \u003cFooter /\u003e\n \u003c/div\u003e\n );\n };\n\n const root = ReactDOM.createRoot(document.getElementById(\"root\"));\n root.render(\u003cApp /\u003e);\n ```\n\n- **Code Example - 11 (export, import modular component)**\n\n - export default can be used once in a file where multiple exports can be used\n - importing export default does not require {} and you can name anything on the other hand only exports requires {} and naming is strict\n - export App component\n\n ```js\n // App.js\n\n import React from \"react\";\n import ReactDOM from \"react-dom/client\";\n\n const Products = () =\u003e {\n const imageSource1 =\n \"https://i.dummyjson.com/data/products/1/thumbnail.jpg\";\n const title1 = \"iPhone 9\";\n const description1 = \"An apple mobile which is nothing like apple\";\n const price1 = 549;\n const rating1 = 4.6;\n const brand1 = \"Apple\";\n const category1 = \"smartphones\";\n\n const imageSource2 =\n \"https://i.dummyjson.com/data/products/2/thumbnail.jpg\";\n const title2 = \"iPhone X\";\n const description2 =\n \"SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...\";\n const price2 = 899;\n const rating2 = 4.44;\n const brand2 = \"Apple\";\n const category2 = \"smartphones\";\n\n return (\n \u003csection\u003e\n \u003carticle\u003e\n \u003cimg src={imageSource1} alt=\"iPhone 9\" /\u003e\n \u003ch2\u003e{title1}\u003c/h2\u003e\n \u003cp\u003edescription: {description1}\u003c/p\u003e\n \u003cp\u003ePrice: {price1}\u003c/p\u003e\n \u003cp\u003erating: {rating1}\u003c/p\u003e\n \u003cp\u003ebrand: {brand1}\u003c/p\u003e\n \u003cp\u003ecategory: {category1}\u003c/p\u003e\n \u003c/article\u003e\n \u003carticle\u003e\n \u003cimg src={imageSource2} alt=\"iPhone X\" /\u003e\n \u003ch2\u003e{title2}\u003c/h2\u003e\n \u003cp\u003edescription: {description2}\u003c/p\u003e\n \u003cp\u003ePrice: {price2}\u003c/p\u003e\n \u003cp\u003erating: {rating2}\u003c/p\u003e\n \u003cp\u003ebrand: {brand2}\u003c/p\u003e\n \u003cp\u003ecategory: {category2}\u003c/p\u003e\n \u003c/article\u003e\n \u003c/section\u003e\n );\n };\n\n const Header = () =\u003e {\n return (\n \u003cheader\u003e\n \u003ch2\u003eAnis Express\u003c/h2\u003e\n \u003c/header\u003e\n );\n };\n const Sidebar = () =\u003e {\n return \u003caside\u003ethis is sidebar\u003c/aside\u003e;\n };\n const Footer = () =\u003e {\n return \u003cfooter\u003ethis is a footer\u003c/footer\u003e;\n };\n const App = () =\u003e {\n return (\n \u003cdiv\u003e\n \u003cHeader /\u003e\n \u003cmain\u003e\n \u003cSidebar /\u003e\n \u003cProducts /\u003e\n \u003c/main\u003e\n \u003cFooter /\u003e\n \u003c/div\u003e\n );\n };\n\n export default App;\n\n // import in index.js\n import React from \"react\";\n import ReactDOM from \"react-dom/client\";\n import App from \"./App\";\n\n const root = ReactDOM.createRoot(document.getElementById(\"root\"));\n root.render(\u003cApp /\u003e);\n ```\n\n- More practice for export,import\n - **Code Example - 13 (More export, import)**\n - separate all the components\n\n### [1.4 Adding CSS Styling](https://youtu.be/02YWKDxLpwk)\n\nInline styling, CSS Stylesheet, CSS module [why you should use css module], third party packages such as Material UI, styled components\n\n- Inline styling\n\n ```js\n const headingStyle = { color: \"red\", fontSize: \"3rem\" };\n \u003caside style={headingStyle}\u003esidebar goes here\u003c/aside\u003e;\n ```\n\n- CSS Stylesheet\n\n - **Code Example - 14 (Styling component with CSS)**\n\n ```css\n /*code for the App.css */\n /* reset code and common starts here */\n :root {\n --primary-color: rgb(11, 181, 48);\n --secondary-color: rgba(36, 122, 55, 0.9);\n --padding: 0.5rem;\n --transition: all 0.3s;\n --border-radius: 0.6rem;\n --box-shadow: 0.1rem 0.2rem 0.8rem rgba(205, 202, 202, 0.5);\n }\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n text-decoration: none;\n list-style-type: none;\n outline: none;\n }\n html {\n scroll-behavior: smooth;\n }\n .flex-space-around {\n display: flex;\n justify-content: space-around;\n align-items: center;\n }\n .flex-center {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n /* reset code and common ends here */\n\n /* header starts here */\n .header {\n height: 10vh;\n background-color: var(--primary-color);\n color: white;\n }\n /* header ends here */\n\n /* main starts here */\n main {\n height: 80vh;\n }\n .sidebar {\n flex: 1;\n padding: var(--padding);\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 1rem;\n align-self: flex-start;\n background-color: #e6e3e3;\n height: 100%;\n border-right: 1px solid var(--primary-color);\n }\n .main-content {\n flex: 3;\n height: 100%;\n padding: var(--padding);\n overflow: scroll;\n }\n .products {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 2rem;\n padding: 2rem 0;\n }\n .product__img {\n width: 100%;\n height: 15rem;\n filter: saturate(0);\n transition: var(--transition);\n }\n /* main ends here */\n\n /* footer starts here */\n .footer {\n min-height: 10vh;\n padding: var(--padding);\n background-color: var(--primary-color);\n color: white;\n font-size: 1.1rem;\n }\n /* footer ends here */\n\n /* responsiveness starts here */\n @media (max-width: 992px) {\n .flex-space-around,\n .flex-center {\n flex-direction: column;\n gap: 1rem;\n padding: 1rem 0;\n }\n .header {\n min-height: 10vh;\n }\n .sidebar {\n width: 100%;\n }\n .products {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n\n @media (max-width: 768px) {\n .products {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n }\n /* responsiveness ends here */\n ```\n\n ```js\n // App.js\n import React from \"react\";\n\n import Header from \"./components/Header\";\n import Sidebar from \"./components/Sidebar\";\n import Footer from \"./components/Footer\";\n import Products from \"./components/Products\";\n\n import \"./App.css\";\n\n const App = () =\u003e {\n return (\n \u003cdiv\u003e\n \u003cHeader /\u003e\n \u003cmain className=\"flex-center\"\u003e\n \u003cSidebar /\u003e\n \u003cdiv className=\"main-content\"\u003e\n \u003cProducts /\u003e\n \u003c/div\u003e\n \u003c/main\u003e\n \u003cFooter /\u003e\n \u003c/div\u003e\n );\n };\n\n export default App;\n\n // Header.js\n import React from \"react\";\n\n const Header = () =\u003e {\n return (\n \u003cheader className=\"header flex-center\"\u003e\n \u003ch2 className=\"header__title\"\u003eAnis Express\u003c/h2\u003e\n \u003c/header\u003e\n );\n };\n export default Header;\n\n // Sidebar.js\n import React from \"react\";\n\n const Sidebar = () =\u003e {\n return \u003caside className=\"sidebar\"\u003ethis is sidebar\u003c/aside\u003e;\n };\n export default Sidebar;\n\n // Products.js\n import React from \"react\";\n\n\n const Products = () =\u003e {\n const imageSource1 =\n \"https://i.dummyjson.com/data/products/1/thumbnail.jpg\";\n const title1 = \"iPhone 9\";\n const description1 = \"An apple mobile which is nothing like apple\";\n const price1 = 549;\n const rating1 = 4.6;\n const brand1 = \"Apple\";\n const category1 = \"smartphones\";\n\n const imageSource2 =\n \"https://i.dummyjson.com/data/products/2/thumbnail.jpg\";\n const title2 = \"iPhone X\";\n const description2 =\n \"SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...\";\n const price2 = 899;\n const rating2 = 4.44;\n const brand2 = \"Apple\";\n const category2 = \"smartphones\";\n\n return (\n \u003csection className=\"products\"\u003e\n \u003carticle className=\"product\"\u003e\n \u003cimg src={imageSource1} alt=\"iPhone 9\" className=\"product__img\"/\u003e\n \u003ch2\u003e{title1}\u003c/h2\u003e\n \u003cp\u003edescription: {description1}\u003c/p\u003e\n \u003cp\u003ePrice: {price1}\u003c/p\u003e\n \u003cp\u003erating: {rating1}\u003c/p\u003e\n \u003cp\u003ebrand: {brand1}\u003c/p\u003e\n \u003cp\u003ecategory: {category1}\u003c/p\u003e\n \u003c/article\u003e\n \u003carticle className=\"product\"\u003e\n \u003cimg src={imageSource2} alt=\"iPhone X\" className=\"product__img\"/\u003e\n \u003ch2\u003e{title2}\u003c/h2\u003e\n \u003cp\u003edescription: {description2}\u003c/p\u003e\n \u003cp\u003ePrice: {price2}\u003c/p\u003e\n \u003cp\u003erating: {rating2}\u003c/p\u003e\n \u003cp\u003ebrand: {brand2}\u003c/p\u003e\n \u003cp\u003ecategory: {category2}\u003c/p\u003e\n \u003c/article\u003e\n \u003c/section\u003e\n );\n };\n export default Products;\n\n // Footer.js\n import React from \"react\";\n\n const Footer = () =\u003e {\n return (\n \u003cfooter className=\"footer flex-space-around\"\u003e\n \u003cdiv className=\"footer__left\"\u003e\n \u003cp className=\"footer__title\"\u003e\u0026copy;Copyright by Anisul Islam\u003c/p\u003e\n \u003c/div\u003e\n \u003cdiv className=\"footer__right\"\u003e\n \u003cp\u003esocial media icons\u003c/p\u003e\n \u003c/div\u003e\n \u003c/footer\u003e\n );\n };\n\n export default Footer;\n ```\n\n- CSS module: create a file name such as fileName.module.css as shown below\n\n ```css\n footer {\n height: 5vh;\n background-color: bisque;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .copyright {\n font-size: 0.9rem;\n }\n ```\n\n - use it in from another file as shown below\n\n ```js\n import React from \"react\";\n\n import styles from \"./footer.module.css\";\n\n const Footer = () =\u003e {\n return (\n \u003cfooter\u003e\n \u003cp className={styles.copyright}\u003e\n All rights reserved by Anisul Islam\n \u003c/p\u003e\n \u003c/footer\u003e\n );\n };\n\n export default Footer;\n ```\n\n### [1.5 Props and destructuring](https://youtu.be/GQx58yfYqxo)\n\n- **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**\n - how to pass, recieve, set default props\n - how to pass JSX to component,\n- **Code Example - 15 (Props sending)**\n\n```js\nimport React from \"react\";\nimport Product from \"./Product\";\n\nconst Products = () =\u003e {\n const imageSource1 = \"https://i.dummyjson.com/data/products/1/thumbnail.jpg\";\n const title1 = \"iPhone 9\";\n const description1 = \"An apple mobile which is nothing like apple\";\n const price1 = 549;\n const rating1 = 4.6;\n const brand1 = \"Apple\";\n const category1 = \"smartphones\";\n\n const imageSource2 = \"https://i.dummyjson.com/data/products/2/thumbnail.jpg\";\n const title2 = \"iPhone X\";\n const description2 =\n \"SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...\";\n const price2 = 899;\n const rating2 = 4.44;\n const brand2 = \"Apple\";\n const category2 = \"smartphones\";\n\n return (\n \u003csection className=\"products\"\u003e\n \u003cProduct\n imageSource={imageSource1}\n title={title1}\n description={description1}\n price={price1}\n rating={rating1}\n brand={brand1}\n category={category1}\n /\u003e\n \u003cProduct\n imageSource={imageSource2}\n title={title2}\n description={description2}\n price={price2}\n rating={rating2}\n brand={brand2}\n category={category2}\n /\u003e\n \u003c/section\u003e\n );\n};\nexport default Products;\n```\n\n- **Code Example - 16 (props recieveing \u0026 Destructuring)**\n\n ```js\n import React from \"react\";\n\n const Product = (props) =\u003e {\n const { imageSource, title, description, price, rating, brand, category } =\n props;\n return (\n \u003carticle className=\"product\"\u003e\n \u003cimg src={thumbnail} alt=\"iPhone 9\" className=\"product__img\" /\u003e\n \u003cdiv className=\"product__body\"\u003e\n \u003ch2 className=\"product__title\"\u003e{title}\u003c/h2\u003e\n \u003cp className=\"product__description\"\u003edescription: {description}\u003c/p\u003e\n \u003cp className=\"product__price\"\u003ePrice: {price}\u003c/p\u003e\n \u003cp className=\"product__rating\"\u003erating: {rating}\u003c/p\u003e\n \u003cp className=\"product__brand\"\u003ebrand: {brand}\u003c/p\u003e\n \u003cp className=\"product__category\"\u003ecategory: {category}\u003c/p\u003e\n \u003c/div\u003e\n \u003c/article\u003e\n );\n };\n export default Product;\n ```\n\n- **Code Example - 17 (props for complex data)**\n\n ```js\n // Products.js\n import React from \"react\";\n import Product from \"./Product\";\n\n const Products = () =\u003e {\n const products = [\n {\n id: 1,\n title: \"iPhone 9\",\n description: \"An apple mobile which is nothing like apple\",\n price: 549,\n discountPercentage: 12.96,\n rating: 4.69,\n stock: 94,\n brand: \"Apple\",\n category: \"smartphones\",\n thumbnail: \"https://i.dummyjson.com/data/products/1/thumbnail.jpg\",\n },\n {\n id: 2,\n title: \"iPhone X\",\n description:\n \"SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...\",\n price: 899,\n discountPercentage: 17.94,\n rating: 4.44,\n stock: 34,\n brand: \"Apple\",\n category: \"smartphones\",\n thumbnail: \"https://i.dummyjson.com/data/products/2/thumbnail.jpg\",\n },\n ];\n return (\n \u003csection className=\"products\"\u003e\n \u003cProduct\n imageSource={products[0].thumbnail}\n title={products[0].title}\n description={products[0].description}\n price={products[0].price}\n rating={products[0].rating}\n brand={products[0].brand}\n category={products[0].category}\n /\u003e\n \u003cProduct\n imageSource={products[1].thumbnail}\n title={products[1].title}\n description={products[1].description}\n price={products[1].price}\n rating={products[1].rating}\n brand={products[1].brand}\n category={products[1].category}\n /\u003e\n \u003c/section\u003e\n );\n };\n export default Products;\n ```\n\n- create data.js in src folder and move all the todos dummy data there and import in App.js for using it.\n- Can you load all the data from App.js to Products.js as props\n- **Code Example - 18 (import data from another file and pass as props)**\n\n```js\n// App.js\nimport React from \"react\";\n\nimport Header from \"./components/Header\";\nimport Sidebar from \"./components/Sidebar\";\nimport Footer from \"./components/Footer\";\nimport Products from \"./components/Products\";\nimport { products } from \"./data\";\n\nimport \"./App.css\";\n\nconst App = () =\u003e {\n return (\n \u003cdiv\u003e\n \u003cHeader /\u003e\n \u003cmain className=\"flex-center\"\u003e\n \u003cSidebar /\u003e\n \u003cdiv className=\"main-content\"\u003e\n \u003cProducts products={products} /\u003e\n \u003c/div\u003e\n \u003c/main\u003e\n \u003cFooter /\u003e\n \u003c/div\u003e\n );\n};\n\nexport default App;\n\n// Products.js\nimport React from \"react\";\nimport Product from \"./Product\";\n\nconst Products = ({ products }) =\u003e {\n return (\n \u003csection className=\"products\"\u003e\n \u003cProduct\n imageSource={products[0].thumbnail}\n title={products[0].title}\n description={products[0].description}\n price={products[0].price}\n rating={products[0].rating}\n brand={products[0].brand}\n category={products[0].category}\n /\u003e\n \u003cProduct\n imageSource={products[1].thumbnail}\n title={products[1].title}\n description={products[1].description}\n price={products[1].price}\n rating={products[1].rating}\n brand={products[1].brand}\n category={products[1].category}\n /\u003e\n \u003c/section\u003e\n );\n};\nexport default Products;\n```\n\n### [1.6 Mapping \u0026 rednering components](https://youtu.be/OwwmIzH7FzI)\n\n- learn how to use map() and filter() from an array of Data.\n- **Code Example - 19 (Map component with for loop)**\n\n```js\nimport React from \"react\";\nimport Product from \"./Product\";\n\nconst Products = ({ products }) =\u003e {\n const productsElement = [];\n for (let index = 0; index \u003c products.length; index++) {\n productsElement.push(\n \u003cProduct\n imageSource={products[index].thumbnail}\n title={products[index].title}\n description={products[index].description}\n price={products[index].price}\n rating={products[index].rating}\n brand={products[index].brand}\n category={products[index].category}\n /\u003e\n );\n }\n return \u003csection className=\"products\"\u003e{productsElement}\u003c/section\u003e;\n};\nexport default Products;\n```\n\n- **Code Example - 20 (Map component with forEach higher order Array function)**\n\n ```js\n import React from \"react\";\n import Product from \"./Product\";\n\n const Products = ({ products }) =\u003e {\n const productsElement = [];\n\n products.forEach((product) =\u003e {\n productsElement.push(\n \u003cProduct\n imageSource={product.thumbnail}\n title={product.title}\n description={product.description}\n price={product.price}\n rating={product.rating}\n brand={product.brand}\n category={product.category}\n /\u003e\n );\n });\n\n return \u003csection className=\"products\"\u003e{productsElement}\u003c/section\u003e;\n };\n export default Products;\n ```\n\n- **Code Example - 21 (Map component with map higher order Array function)**\n\n ```js\n import React from \"react\";\n import Product from \"./Product\";\n\n const Products = ({ products }) =\u003e {\n const productsElement = products.map((product) =\u003e {\n return (\n \u003cProduct\n imageSource={product.thumbnail}\n title={product.title}\n description={product.description}\n price={product.price}\n rating={product.rating}\n brand={product.brand}\n category={product.category}\n /\u003e\n );\n });\n\n return \u003csection className=\"products\"\u003e{productsElement}\u003c/section\u003e;\n };\n export default Products;\n ```\n\n#### [Adding unique key to each child](https://youtu.be/Dj7ynTdhy1Q)\n\nwe 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.\n\n- Where I can find key?\n\n - from database\n - generate locally - crypto.randomUUID() , uuid, nanoid\n\n - we can use index or any external package like [uuid](https://www.npmjs.com/package/uuid)\n - How to use uuid:\n\n ```js\n step 1: npm install uuid\n step 2: import { v4 as uuidv4 } from \"uuid\";\n step 3: uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'\n\n ```\n\n- **Code Example - 22 (Adding unique key)**\n\n ```js\n // first use index\n // second use the available id\n // thirs use the uuid if id is not available inside the data\n\n import React from \"react\";\n import Product from \"./Product\";\n\n const Products = ({ products }) =\u003e {\n const productsElement = products.map((product) =\u003e {\n return (\n \u003cProduct\n key={product.id}\n imageSource={product.thumbnail}\n title={product.title}\n description={product.description}\n price={product.price}\n rating={product.rating}\n brand={product.brand}\n category={product.category}\n /\u003e\n );\n });\n\n return \u003csection className=\"products\"\u003e{productsElement}\u003c/section\u003e;\n };\n export default Products;\n\n // get a uniqueId -\u003e utility/getUniqueId.js\n import { v4 as uuidv4 } from \"uuid\";\n export const getUniqueId = () =\u003e uuidv4();\n\n // Now add the unique Id in App.js\n ```\n\n#### [jsx spread syntax]\n\n- **Code Example - 23 (jsx spread syntax)**\n\n```js\nimport React from \"react\";\nimport Product from \"./Product\";\n\nconst Products = ({ products }) =\u003e {\n const productsElement = products.map((product) =\u003e {\n return \u003cProduct key={product.id} {...product} /\u003e;\n });\n\n return \u003csection className=\"products\"\u003e{productsElement}\u003c/section\u003e;\n};\nexport default Products;\n```\n\n- **Code Example - 24 (passing jsx as children)**\n\n```js\nimport React from \"react\";\n\nconst Card = ({ children }) =\u003e {\n return \u003cdiv className=\"card\"\u003e{children}\u003c/div\u003e;\n};\n\nexport default Card;\n\nimport React from \"react\";\nimport Card from \"./Card\";\n\nconst Product = (props) =\u003e {\n const { thumbnail, title, description, price, rating, brand, category } =\n props;\n return (\n \u003cCard\u003e\n \u003carticle className=\"product\"\u003e\n \u003cimg src={thumbnail} alt=\"iPhone 9\" className=\"product__img\" /\u003e\n \u003ch2\u003e{title}\u003c/h2\u003e\n \u003cp\u003edescription: {description}\u003c/p\u003e\n \u003cp\u003ePrice: {price}\u003c/p\u003e\n \u003cp\u003erating: {rating}\u003c/p\u003e\n \u003cp\u003ebrand: {brand}\u003c/p\u003e\n \u003cp\u003ecategory: {category}\u003c/p\u003e\n \u003c/article\u003e\n \u003c/Card\u003e\n );\n};\nexport default Product;\n\n```\n\n### [1.7 PropTypes](https://youtu.be/mnPJrxHUarA)\n\n- [documentation is here](https://reactjs.org/docs/typechecking-with-proptypes.html)\n- **catch bugs with typechecking.**\n- 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.\n\n- default props is essential when first time running without any value passing to props\n\n ```js\n // lets think value can be primary or secondary one of two valyes\n \u003cList background = 'primary' \u003e\n\n // checking prop types\n background: PropTypes.oneOf([\n 'primary',\n 'secondary'\n ])\n ```\n\n- **Code Example - 25 (PropTypes)**\n\n ```js\n // Todos.js\n import React from \"react\";\n import PropTypes from \"prop-types\";\n\n import Todo from \"./Todo\";\n\n const Todos = (props) =\u003e {\n const { todos } = props;\n\n const renderTodosElement = todos.map((todo) =\u003e (\n \u003cTodo key={todo.id} todo={todo} /\u003e\n ));\n\n return \u003csection className=\"todos\"\u003e{renderTodosElement}\u003c/section\u003e;\n };\n Todos.defaultProps = {\n todos: [],\n };\n Todos.propTypes = {\n todos: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n title: PropTypes.string,\n desc: PropTypes.string,\n })\n ),\n };\n\n\n export default Todos;\n\n // Todo.js\n import React from \"react\";\n import PropTypes from \"prop-types\";\n\n const Todo = (props) =\u003e {\n const { todo } = props;\n return (\n \u003carticle className=\"todo\" key={todo.id}\u003e\n \u003ch3\u003e{todo.title}\u003c/h3\u003e\n \u003cp\u003e{todo.desc} \u003c/p\u003e\n \u003c/article\u003e\n );\n };\n\n Todo.propTypes = {\n todo: PropTypes.shape({\n title: PropTypes.string,\n desc: PropTypes.string,\n }),\n };\n\n export default Todo;\n\n ```\n\n### [1.8 Conditional rendering](https://youtu.be/roSfZjXp5us)\n\n- rendering components based on if-else, element variable, ternary, short circuit\n\n- **Code Example - 26 (Conditional rendering: element variable)**\n\n ```js\n // Inside App.js make adjustments\n let productsElement;\n if (products.length \u003e 0) {\n productsElement = \u003cProducts products={products} /\u003e;\n } else {\n productsElement = \u003cp\u003eProduct list is empty\u003c/p\u003e;\n }\n return (\n \u003cdiv\u003e\n \u003cHeader /\u003e\n \u003cmain className=\"flex-center\"\u003e\n \u003cSidebar /\u003e\n \u003cdiv className=\"main-content\"\u003e{productsElement}\u003c/div\u003e\n \u003c/main\u003e\n \u003cFooter /\u003e\n \u003c/div\u003e\n );\n ```\n\n- **Code Example - 27 (Conditional rendering: iternary)**\n\n ```js\n // Inside App.js make adjustments\n let productsElement =\n products.length \u003e 0 ? (\n \u003cProducts products={products} /\u003e\n ) : (\n \u003cp\u003eproducts list is empty\u003c/p\u003e\n );\n\n return (\n \u003cdiv\u003e\n \u003cHeader /\u003e\n \u003cmain className=\"flex-center\"\u003e\n \u003cSidebar /\u003e\n \u003cdiv className=\"main-content\"\u003e{productsElement}\u003c/div\u003e\n \u003c/main\u003e\n \u003cFooter /\u003e\n \u003c/div\u003e\n );\n\n // An alternative - we can use ternary inside return () function\n return (\n \u003cdiv\u003e\n \u003cHeader /\u003e\n \u003cmain className=\"flex-center\"\u003e\n \u003cSidebar /\u003e\n \u003cdiv className=\"main-content\"\u003e\n {products.length \u003e 0 ? (\n \u003cProducts products={products} /\u003e\n ) : (\n \u003cp\u003eproducts list is empty\u003c/p\u003e\n )}\n \u003c/div\u003e\n \u003c/main\u003e\n \u003cFooter /\u003e\n \u003c/div\u003e\n );\n ```\n\n- **Code Example - 28 (Conditional rendering: short circuit)**\n\n ```js\n // Inside App.js return() make following adjustments\n return (\n \u003cdiv\u003e\n \u003cHeader /\u003e\n \u003cmain\u003e{products.length \u003e 0 \u0026\u0026 \u003cProducts products={products} /\u003e}\u003c/main\u003e\n \u003cFooter /\u003e\n \u003c/div\u003e\n );\n ```\n\n### [Assignment 1: products-listing-app](https://github.com/anisul-Islam/react-assignment-1-products-listing-app)\n\n### 1.9 developer tools, react and font-awesome icons\n\n- [developer tools and extension](https://youtu.be/m1paEcDlC5U)\n\n- [1.10 add font awesome / react icons](https://youtu.be/jHDP6myBXRM)\n\n- [How to use react-icons](https://react-icons.github.io/react-icons/)\n- **Code Example - 29 (Adding \u0026 styling react icons )**\n\n ```js\n import React from \"react\";\n import { FaFacebookF, FaYoutube, FaTwitter } from \"react-icons/fa\";\n const Footer = () =\u003e {\n return (\n \u003cfooter className=\"footer flex-space-around\"\u003e\n \u003cdiv className=\"footer__left\"\u003e\n \u003cp className=\"footer__title\"\u003e\u0026copy;Copyright by Anisul Islam\u003c/p\u003e\n \u003c/div\u003e\n \u003cdiv className=\"footer__right\"\u003e\n \u003cFaFacebookF /\u003e\n \u003cFaYoutube /\u003e\n \u003cFaTwitter /\u003e\n \u003c/div\u003e\n \u003c/footer\u003e\n );\n };\n\n export default Footer;\n\n // Product.js\n import React from \"react\";\n import { FaCartPlus } from \"react-icons/fa\";\n\n import Card from \"./Card\";\n\n const Product = (props) =\u003e {\n const { thumbnail, title, description, price, rating, brand, category } =\n props;\n return (\n \u003cCard\u003e\n \u003carticle className=\"product\"\u003e\n \u003cimg src={thumbnail} alt=\"iPhone 9\" className=\"product__img\" /\u003e\n \u003cdiv className=\"product__body\"\u003e\n \u003ch2 className=\"product__title\"\u003e{title}\u003c/h2\u003e\n \u003cp className=\"product__description\"\u003edescription: {description}\u003c/p\u003e\n \u003cp className=\"product__price\"\u003ePrice: {price}\u003c/p\u003e\n \u003cp className=\"product__rating\"\u003erating: {rating}\u003c/p\u003e\n \u003cp className=\"product__brand\"\u003ebrand: {brand}\u003c/p\u003e\n \u003cp className=\"product__category\"\u003ecategory: {category}\u003c/p\u003e\n \u003cbutton className=\"btn product__btn icon\"\u003e\n \u003cFaCartPlus className=\"icon\" /\u003e Add To Cart\n \u003c/button\u003e\n \u003c/div\u003e\n \u003c/article\u003e\n \u003c/Card\u003e\n );\n };\n export default Product;\n\n\n // App.css\n /* reset code and common starts here */\n :root {\n --primary-color: rgb(11, 181, 48);\n --secondary-color: rgba(36, 122, 55, 0.9);\n --padding: 0.5rem;\n --transition: all 0.3s;\n --border-radius: 0.6rem;\n --box-shadow: 0.1rem 0.2rem 0.8rem rgba(205, 202, 202, 0.5);\n }\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n text-decoration: none;\n list-style-type: none;\n outline: none;\n }\n html {\n scroll-behavior: smooth;\n }\n .flex-space-around {\n display: flex;\n justify-content: space-around;\n align-items: center;\n }\n .flex-center {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .card {\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n /* padding: var(--padding); */\n transition: var(--transition);\n }\n img {\n width: 100%;\n height: auto;\n }\n .btn {\n border: none;\n padding: var(--padding);\n border-radius: var(--border-radius);\n transition: all 0.3s;\n color: var(--secondary-color);\n }\n .btn:hover {\n background-color: orange;\n color: black;\n }\n /* reset code and common ends here */\n\n /* header starts here */\n .header {\n height: 10vh;\n background-color: var(--primary-color);\n color: white;\n }\n /* header ends here */\n\n /* main starts here */\n main {\n height: 80vh;\n }\n .sidebar {\n flex: 1;\n padding: var(--padding);\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 1rem;\n align-self: flex-start;\n background-color: #e6e3e3;\n height: 100%;\n border-right: 1px solid var(--primary-color);\n }\n .main-content {\n flex: 3;\n height: 100%;\n padding: var(--padding);\n overflow: scroll;\n }\n .products {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 2rem;\n }\n .product {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n .product__body {\n padding: var(--padding);\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n .product__img {\n width: 100%;\n height: 15rem;\n filter: saturate(0);\n transition: var(--transition);\n }\n /* main ends here */\n\n /* footer starts here */\n .footer {\n min-height: 10vh;\n padding: var(--padding);\n background-color: var(--primary-color);\n color: white;\n font-size: 1.1rem;\n }\n .footer__right {\n display: flex;\n gap: 1rem;\n }\n /* footer ends here */\n\n /* responsiveness starts here */\n @media (max-width: 992px) {\n .flex-space-around,\n .flex-center {\n flex-direction: column;\n gap: 1rem;\n padding: 1rem 0;\n }\n .header {\n min-height: 10vh;\n }\n .sidebar {\n width: 100%;\n }\n .products {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n\n @media (max-width: 768px) {\n .products {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n }\n /* responsiveness ends here */\n ```\n\n- How to use font awesome icons directly\n\n ```js\n // Add SVG Core\n npm i --save @fortawesome/fontawesome-svg-core\n\n // add Free icons styles\n npm i --save @fortawesome/free-solid-svg-icons\n npm i --save @fortawesome/free-regular-svg-icons\n npm i --save @fortawesome/free-brands-svg-icons\n\n // add the react component\n npm i --save @fortawesome/react-fontawesome@latest\n\n\n // usage\n import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n import { faPlusCircle, faMinusCircle } from '@fortawesome/free-solid-svg-icons';\n import { faYoutube } from '@fortawesome/free-brands-svg-icons';\n\n \u003cFontAwesomeIcon icon={faPlusCircle}\u003e\u003c/FontAwesomeIcon\u003e\n\n // use className for styling icons\n\n ```\n\n\u003c!-- ## Part-3 (event handler, state,useState hook, controlled component, state lifting, more on css, class component) --\u003e\n\n### [1.10 Adding Interactivity - event \u0026 event handler]\n\n- Event: any user interaction like clicking button, hovering button, giving values in input field etc.\n- Event handler: your response to user interactions. create a function for handling the interaction.\n- state - value of anything can be changed based on your interaction and you may want to update UI based on state.\n- **Code Example - 30 (event - onClick )**\n\n ```js\n \u003cbutton\n className=\"btn product__btn\"\n onClick={alert(\"product is added to the cart\")} // not depends on user inetractivity\n \u003e\n \u003cFaCartPlus className=\"icon\" /\u003e Add To Cart\n \u003c/button\u003e\n ```\n\n- **Code Example - 31 (event Handler)**\n\n ```js\n const handleClick = () =\u003e {\n alert(\"product is added to the cart\");\n };\n\n // method 1\n \u003cbutton\n className=\"btn product__btn\"\n onClick={() =\u003e {\n alert(\"product is added to the cart\");\n }} // depends on user inetractivity as we definied the function and it is not running until we click the button\n \u003e\n \u003cFaCartPlus className=\"icon\" /\u003e Add To Cart\n \u003c/button\u003e\n\n // method 2\n \u003cbutton\n className=\"btn product__btn\"\n onClick={handleClick} // do not call just define the function\n \u003e\n \u003cFaCartPlus className=\"icon\" /\u003e Add To Cart\n \u003c/button\u003e\n\n // we can create own custom Button component\n import React from \"react\";\n\n const Button = (props) =\u003e {\n console.log(props);\n\n const handleClick = () =\u003e {\n // we can use condition for calling multiple functions\n props.onHandleAddProduct();\n };\n\n const handleAddProduct = (product) =\u003e {\n alert(JSON.stringify(product, null, 4));\n };\n\n return (\n \u003cbutton className={props.className} onClick={props.onClick} type={props.type}\u003e\n {props.children}\n \u003c/button\u003e\n );\n };\n\n export default Button;\n\n // more simplified\n import React from \"react\";\n\n const Button = (props) =\u003e {\n return (\n \u003cbutton className={props.className} onClick={props.onClick}\u003e\n {props.children}\n \u003c/button\u003e\n );\n };\n\n export default Button;\n ```\n\n- **Code Example - 32 (Pass parameter with event )**\n\n ```js\n const handleAddProduct = (e, product) =\u003e {\n e.stopPropagation();\n console.log(\"Product Event: \", e);\n alert(JSON.stringify(product, null, 4));\n };\n\n \u003cButton\n className=\"btn product__btn\"\n onClick={(e) =\u003e {\n handleAddProduct(e, product);\n }}\n \u003e\n \u003cFaCartPlus className=\"icon\" /\u003e Add To Cart\n \u003c/Button\u003e;\n ```\n\n- **Code Example - 33 (onChange Event )**\n\n ```js\n import React from \"react\";\n\n const NewProduct = () =\u003e {\n const handleChange = (event) =\u003e {\n console.log(event.target.value);\n };\n return (\n \u003cdiv className=\"new-user\"\u003e\n \u003ch2\u003eCreate Product\u003c/h2\u003e\n\n \u003cdiv className=\"form__control\"\u003e\n \u003clabel htmlFor=\"title\"\u003eTitle: \u003c/label\u003e\n \u003cinput\n className=\"form__input\"\n type=\"text\"\n placeholder=\"Enter product title\"\n name=\"title\"\n onChange={handleChange}\n required={true}\n /\u003e\n \u003c/div\u003e\n\n \u003cdiv className=\"form__control\"\u003e\n \u003clabel htmlFor=\"price\"\u003ePrice: \u003c/label\u003e\n \u003cinput\n className=\"form__input\"\n type=\"number\"\n placeholder=\"Enter product price here\"\n name=\"price\"\n onChange={handleChange}\n required={true}\n /\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n );\n };\n\n export default NewProduct;\n ```\n\n- **Code Example - 34 (More complex example of onChange Event )**\n\n ```js\n import React from \"react\";\n\n const NewProduct = () =\u003e {\n const inputs = [\n {\n id: 1,\n type: \"text\",\n name: \"title\",\n placeholder: \"Enter product title\",\n required: true,\n },\n {\n id: 2,\n type: \"number\",\n name: \"price\",\n placeholder: \"Enter product price\",\n required: true,\n },\n ];\n const handleChange = (event) =\u003e {\n console.log(event.target.value);\n };\n\n return (\n \u003cdiv className=\"new-user\"\u003e\n \u003ch2\u003eCreate Product\u003c/h2\u003e\n\n \u003cinput\n className=\"form__input\"\n type={inputs[0].type}\n placeholder={inputs[0].placeholder}\n name={inputs[0].name}\n onChange={handleChange}\n required={inputs[0].required}\n /\u003e\n\n \u003cinput\n className=\"form__input\"\n type={inputs[1].type}\n placeholder={inputs[1].placeholder}\n name={inputs[1].name}\n onChange={handleChange}\n required={inputs[1].required}\n /\u003e\n \u003c/div\u003e\n );\n };\n\n // More simplified\n const NewProduct = () =\u003e {\n const inputs = [\n {\n id: 1,\n type: \"text\",\n name: \"title\",\n placeholder: \"Enter product title\",\n required: true,\n },\n {\n id: 2,\n type: \"number\",\n name: \"price\",\n placeholder: \"Enter product price\",\n required: true,\n },\n ];\n const handleChange = (event) =\u003e {\n console.log(event.target.value);\n };\n\n const renderInputs = inputs.map((input) =\u003e {\n return (\n \u003cInput\n key={input.id}\n className=\"form__input\"\n type={input.type}\n placeholder={input.placeholder}\n name={input.name}\n onChange={handleChange}\n required={input.required}\n /\u003e\n );\n });\n\n return (\n \u003cdiv className=\"new-user\"\u003e\n \u003ch2\u003eCreate Product\u003c/h2\u003e\n {renderInputs}\n \u003c/div\u003e\n );\n };\n\n // more simplified\n \u003cInput key={input.id} {...input} onChange={handleChange} /\u003e;\n\n // Input.js\n import React from \"react\";\n const Input = (props) =\u003e {\n const { onChange, ...inputProps } = props; // getting onChnage from props and putting rest of the things inside inputProps\n\n console.log([inputProps]);\n return (\n \u003cinput className=\"form__input\" {...inputProps} onChange={onChange} /\u003e\n );\n };\n\n export default Input;\n ```\n\n- **Code Example - 35 (Event Bubbling - child event can effect parent event )**\n\n ```js\n const handleAddProduct = (e, product) =\u003e {\n e.stopPropagation();\n console.log(\"Product Event: \", e);\n alert(JSON.stringify(product, null, 4));\n };\n ```\n\n- **Code Example - 36 (onSubmit Event )**\n\n### [1.11 useState Hooks](https://youtu.be/skUOiqcVurY)\n\n- without state management\n\n```js\nconst Counter = () =\u003e {\n let count = 0;\n\n const handleIncrement = () =\u003e {\n count++;\n alert(count);\n };\n const handleDecrement = () =\u003e {\n count--;\n alert(count);\n };\n const handleReset = () =\u003e {\n count = 0;\n alert(count);\n };\n\n return (\n \u003cdiv\u003e\n \u003ch2\u003eCount: {count}\u003c/h2\u003e\n \u003cbutton onClick={handleIncrement}\u003e+\u003c/button\u003e\n \u003cbutton onClick={handleReset}\u003e0\u003c/button\u003e\n \u003cbutton onClick={handleDecrement}\u003e-\u003c/button\u003e\n \u003c/div\u003e\n );\n};\n\nexport default Counter;\n```\n\n- state is a memory for component where we can update value and re-render the component\n- state is a global variable thats why when you even re-render it fetch the last updated value\n- hooks are function which we can implement in our component - useState, useEffect\n- useState() hook helps us to track state in a functional component.\n- **Code Example - 36 (Counter App )**\n\n ```js\n // App.js\n import React from \"react\";\n\n import Counter from \"./components/Counter\";\n\n const App = () =\u003e {\n return (\n \u003cdiv\u003e\n \u003cCounter /\u003e\n \u003c/div\u003e\n );\n };\n\n export default App;\n ```\n\n ```js\n // Counter.js\n import React, { useState } from \"react\";\n\n function Counter() {\n const [count, setCount] = useState(0);\n const handleIncrement = () =\u003e {\n setCount(count + 1); // setCount (count =\u003e count + 1)\n };\n\n return (\n \u003cdiv\u003e\n \u003ch2\u003eCounter: {count}\u003c/h2\u003e\n \u003cbutton onClick={handleIncrement}\u003e+\u003c/button\u003e\n \u003c/div\u003e\n );\n }\n\n export default Counter;\n ```\n\n - 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)\n\n- **Code Example - 37 (store data in state )**\n\n ```js\n import React, { useState } from \"react\";\n import { FaCartPlus } from \"react-icons/fa\";\n import Button from \"./Button\";\n\n import Card from \"./Card\";\n\n const Product = (props) =\u003e {\n const { thumbnail, title, description, price, rating, brand, category } =\n props;\n const product = props;\n const [cartProducts, setCartProducts] = useState([]);\n const handleAddProduct = (e, product) =\u003e {\n e.stopPropagation();\n setCartProducts((prevState) =\u003e {\n return [...prevState, product];\n });\n };\n console.log(cartProducts);\n return (\n \u003cCard\u003e\n \u003carticle className=\"product\"\u003e\n \u003cimg src={thumbnail} alt=\"iPhone 9\" className=\"product__img\" /\u003e\n \u003cdiv className=\"product__body\"\u003e\n \u003ch2 className=\"product__title\"\u003e{title}\u003c/h2\u003e\n \u003cp className=\"product__description\"\u003edescription: {description}\u003c/p\u003e\n \u003cp className=\"product__price\"\u003ePrice: {price}\u003c/p\u003e\n \u003cp className=\"product__rating\"\u003erating: {rating}\u003c/p\u003e\n \u003cp className=\"product__brand\"\u003ebrand: {brand}\u003c/p\u003e\n \u003cp className=\"product__category\"\u003ecategory: {category}\u003c/p\u003e\n {/* \u003cbutton className=\"btn product__btn icon\"\u003e\n \u003cFaCartPlus className=\"icon\" /\u003e Add To Cart\n \u003c/button\u003e */}\n \u003cButton\n className=\"btn product__btn\"\n onClick={(e) =\u003e {\n handleAddProduct(e, product);\n }}\n \u003e\n \u003cFaCartPlus className=\"icon\" /\u003e Add To Cart\n \u003c/Button\u003e\n \u003c/div\u003e\n \u003c/article\u003e\n \u003c/Card\u003e\n );\n };\n export default Product;\n ```\n\n- **Code Example - 38 (why update data based on prevState?)**\n\n - update state based on prev value - `setCount (count =\u003e count + 1)`\n\n ```js\n const handleIncrement = (e) =\u003e {\n e.stopPropagation();\n\n setcount(count + 1);\n setcount(count + 1);\n setcount(count + 1);\n\n console.log(\"increment count: \", count);\n };\n\n const handleIncrement = (e) =\u003e {\n e.stopPropagation();\n\n setcount((count) =\u003e count + 1);\n setcount((count) =\u003e count + 1);\n setcount((count) =\u003e count + 1);\n\n console.log(\"increment count: \", count);\n };\n\n const handleIncrement = (e) =\u003e {\n e.stopPropagation();\n setTimeout(() =\u003e {\n \u003c!-- setcount(count + 1); --\u003e\n setcount((count) =\u003e count + 1);\n }, 3000);\n console.log(\"increment count: \", count);\n };\n ```\n\n### [Assignment - 2: Counter App](https://github.com/anisul-Islam/react-assignment-2-counter-app)\n\n### [1.12 Forms and Controlled components](https://youtu.be/kvGNlTh3rNQ)\n\n- create a new resouce such as NewProduct, NewUser, NewTodo etc.\n- **Code Example - 39 (get data from a form)**\n\n ```js\n\n ```\n\n- [How to create forms in react using react-hook-form](https://www.freecodecamp.org/news/how-to-create-forms-in-react-using-react-hook-form/)\n\n#### [upating object in state](https://beta.reactjs.org/learn/updating-objects-in-state)\n\n- **Code Example - 40 (updating object in state)**\n\n ```js\n import React, { useState } from \"react\";\n\n const NewUser = () =\u003e {\n const [user, setUser] = useState({\n name: \"\",\n email: \"\",\n password: \"\",\n });\n const handleChange = (event) =\u003e {\n event.stopPropagation();\n setUser((prevUser) =\u003e {\n return { ...prevUser, [event.target.name]: event.target.value };\n });\n };\n\n const handleSubmit = (event) =\u003e {\n event.preventDefault();\n console.log(\"submitted\");\n alert(JSON.stringify(user));\n };\n\n return (\n \u003cdiv\u003e\n \u003cform action=\"\" className=\"form\" onSubmit={handleSubmit}\u003e\n \u003cdiv className=\"form__control\"\u003e\n \u003clabel htmlFor=\"name\"\u003ename: \u003c/label\u003e\n \u003cinput\n type=\"text\"\n placeholder=\"Enter Name\"\n name=\"name\"\n value={user.name}\n onChange={handleChange}\n required={true}\n /\u003e\n \u003c/div\u003e\n \u003cdiv className=\"form__control\"\u003e\n \u003clabel htmlFor=\"email\"\u003eemail: \u003c/label\u003e\n \u003cinput\n type=\"email\"\n placeholder=\"Enter Email\"\n name=\"email\"\n value={user.email}\n onChange={handleChange}\n required={true}\n /\u003e\n \u003c/div\u003e\n \u003cdiv className=\"form__control\"\u003e\n \u003clabel htmlFor=\"password\"\u003epassword: \u003c/label\u003e\n \u003cinput\n type=\"password\"\n placeholder=\"Enter password\"\n name=\"password\"\n value={user.password}\n onChange={handleChange}\n required={true}\n /\u003e\n \u003c/div\u003e\n \u003cbutton type=\"submit\"\u003eAdd User\u003c/button\u003e\n \u003c/form\u003e\n \u003c/div\u003e\n );\n };\n\n export default NewUser;\n ```\n\n- **Code Example - 41 (updating nested object in state)**\n\n ```js\n\n ```\n\n#### [Upating array in state](https://beta.reactjs.org/learn/updating-arrays-in-state)\n\n- **Code Example - 42 (updating array in state)**\n\n ```js\n\n ```\n\n#### [Form Validation without library](https://github.com/anisul-Islam/form-validation-without-library)\n\n### [1.13 data passing: child to parent component, state lifting](https://youtu.be/xdW2uFA-SOg)\n\n- Another practical example: https://youtu.be/h7yq5lfDZc8\n- [Freecodecamp doc](https://www.freecodecamp.org/news/what-is-lifting-state-up-in-react/)\n- **Code Example - 43 (state lifting)**\n\n ```js\n // App.js\n step 1: create a callback function that will help us to get the data from child component\n const handleAddNewTodo = (newTodo) =\u003e {\n console.log(newTodo);\n };\n\n step 2: pass the function as props to child to component\n \u003cAddTodo onHandleAddNewTodo={handleAddNewTodo} /\u003e\n\n step 3: receive the function props and use it for passing the data from child to parent\n // AddTodo.js\n import PropTypes from \"prop-types\";\n\n const handleSubmit = (event) =\u003e {\n event.preventDefault();\n const newTodo = { id: getUniqueId(), title, desc };\n setTitle(\"\");\n setDesc(\"\");\n props.onHandleAddNewTodo(newTodo);\n };\n\n AddTodo.propTypes = {\n onHandleAddNewTodo: PropTypes.func,\n };\n\n\n // Another Example\n function App() {\n const [users, setUsers] = useState([\n { name: 'alex', email: 'alex@gmail.com' },\n ]);\n\n console.log(users);\n\n return (\n \u003cdiv className=\"container\"\u003e\n \u003cTest setUsers={setUsers} /\u003e\n \u003c/div\u003e\n )\n }\n\n const Test = (props) =\u003e {\n const { setUsers } = props;\n\n const [user, setUser] = useState({ name: '', email: '' });\n const handleSubmit = (event) =\u003e {\n event.preventDefault();\n setUsers((users) =\u003e [...users, user]);\n setUser({\n name: '',\n email: '',\n });\n };\n const handleChange = (event) =\u003e {\n const name = event.target.name;\n setUser({ ...user, [name]: event.target.value });\n };\n }\n ```\n\n - **Code Example - 44 (state lifting and delete item)**\n\n ```js\n // App.js\n step 1: create a function that will help us to get the id from child component Todo.js\n const handleDeleteTodo = (id) =\u003e {\n console.log(id);\n };\n\n step 2: pass the function as props to App.js -\u003e Todos.js -\u003e Todo.js\n \u003cTodos onHandleDeleteTodo={handleDeleteTodo} /\u003e\n\n step 3: After passing the function from App.js to Todo.js now lets handle the button click and get the id so that we pass the id to App.js with the help of the function onHandleDeleteTodo\n // Todo.js\n\n const { todo, onHandleDeleteTodo } = props;\n\n const handleDelete = (id) =\u003e {\n onHandleDeleteTodo(id);\n };\n\n \u003cbutton\n className=\"btn\"\n onClick={() =\u003e {\n handleDelete(todo.id);\n }}\n \u003e\n \u003cFaTrash className=\"icon\" /\u003e\n \u003c/button\u003e\n\n step 4: finally with the help of the id lets delete the item from todos state inside App.js\n\n const handleDeleteTodo = (id) =\u003e {\n setTodos(todos.filter((todo) =\u003e todo.id !== id));\n };\n ```\n\n### [1.14 useRef hook - Uncontrolled component](https://youtu.be/l5z137GWakU)\n\n- If we look at the AddTodo component then you will see we are not using those title and desc state inside the component that much so we can avoid state and make the component stateless\n- **Code Example - 45 (useRef hook for getting form value)**\n\n ```js\n import React, { useRef } from \"react\";\n import PropTypes from \"prop-types\";\n\n import { getUniqueId } from \"../utility/getUniqueId\";\n\n const AddTodo = (props) =\u003e {\n const titleRef = useRef(\"\");\n const descRef = useRef(\"\");\n\n const handleSubmit = (event) =\u003e {\n event.preventDefault();\n const title = titleRef.current.value;\n const desc = descRef.current.value;\n const newTodo = { id: getUniqueId(), title, desc };\n props.onHandleAddNewTodo(newTodo);\n titleRef.current.value = \"\";\n descRef.current.value = \"\";\n };\n\n return (\n \u003cdiv className=\"form-container\"\u003e\n \u003cform onSubmit={handleSubmit}\u003e\n \u003ch2 className=\"form-title\"\u003eAdd New Todo\u003c/h2\u003e\n \u003cdiv className=\"form-input\"\u003e\n \u003clabel htmlFor=\"title\"\u003eTodo Title: \u003c/label\u003e\n \u003cinput\n type=\"text\"\n name=\"title\"\n id=\"title\"\n ref={titleRef}\n required\n autoFocus\n /\u003e\n \u003c/div\u003e\n \u003cdiv className=\"form-input\"\u003e\n \u003clabel htmlFor=\"desc\"\u003eTodo description: \u003c/label\u003e\n \u003ctextarea name=\"desc\" id=\"desc\" ref={descRef} required\u003e\u003c/textarea\u003e\n \u003c/div\u003e\n \u003cdiv className=\"form-input\"\u003e\n \u003cbutton type=\"submit\" className=\"btn form-btn\"\u003e\n Add Todo\n \u003c/button\u003e\n \u003c/div\u003e\n \u003c/form\u003e\n \u003c/div\u003e\n );\n };\n\n AddTodo.propTypes = {\n onHandleAddNewTodo: PropTypes.func,\n };\n\n export default AddTodo;\n ```\n\n### [1.15 dynamic styling in React](https://youtu.be/Eru9-kZfhw4)\n\n- Now lets add some coditional styling\n- **Code Example - 46 (conditional styling)**\n\n ```js\n import React, { useState, useEffect } from \"react\";\n import PropTypes from \"prop-types\";\n\n import { getUniqueId } from \"../utility/getUniqueId\";\n\n const AddTodo = (props) =\u003e {\n const [title, setTitle] = useState(\"\");\n const [desc, setDesc] = useState(\"\");\n\n const [isTitleValid, setIsTitleValid] = useState(false);\n const [isDescValid, setIsDescValid] = useState(false);\n\n useEffect(() =\u003e {\n if (title.trim().length \u003e 3) {\n setIsTitleValid(true);\n }\n if (desc.trim().length \u003e 9) {\n setIsDescValid(true);\n }\n }, [title, desc]);\n\n const handleTitleChange = (event) =\u003e {\n setTitle(event.target.value);\n };\n\n const handleDescriptionChange = (event) =\u003e {\n setDesc(event.target.value);\n };\n\n const handleSubmit = (event) =\u003e {\n event.preventDefault();\n\n const newTodo = { id: getUniqueId(), title, desc };\n props.onHandleAddNewTodo(newTodo);\n setTitle(\"\");\n setDesc(\"\");\n };\n\n return (\n \u003cdiv className=\"form-container\"\u003e\n \u003cpre style={{ backgroundColor: \"white\" }}\u003e\n {JSON.stringify({ id: getUniqueId(), title, desc }, undefined, 2)}\n \u003c/pre\u003e\n \u003cform onSubmit={handleSubmit}\u003e\n \u003ch2 className=\"form-title\"\u003eAdd New Todo\u003c/h2\u003e\n \u003cdiv className=\"form-input\"\u003e\n \u003clabel htmlFor=\"title\"\u003eTodo Title: \u003c/label\u003e\n \u003cinput\n type=\"text\"\n name=\"title\"\n id=\"title\"\n value={title}\n onChange={handleTitleChange}\n required\n autoFocus\n /\u003e\n {!isTitleValid \u0026\u0026 \u003cp\u003eTitle Should be at least 4 characters\u003c/p\u003e}\n \u003c/div\u003e\n \u003cdiv className=\"form-input\"\u003e\n \u003clabel htmlFor=\"desc\"\u003eTodo description: \u003c/label\u003e\n \u003ctextarea\n name=\"desc\"\n id=\"desc\"\n value={desc}\n onChange={handleDescriptionChange}\n required\n \u003e\u003c/textarea\u003e\n {!isDescValid \u0026\u0026 (\n \u003cp\u003eDescription Should be at least 10 characters\u003c/p\u003e\n )}\n \u003c/div\u003e\n \u003cdiv className=\"form-input\"\u003e\n \u003cbutton\n type=\"submit\"\n className=\"btn form-btn\"\n disabled={!(isTitleValid \u0026\u0026 isDescValid)}\n \u003e\n Add Todo\n \u003c/button\u003e\n \u003c/div\u003e\n \u003c/form\u003e\n \u003c/div\u003e\n );\n };\n\n AddTodo.propTypes = {\n onHandleAddNewTodo: PropTypes.func,\n };\n\n export default AddTodo;\n ```\n\n### [Assignment - 3: Add New Product](https://github.com/anisul-Islam/react-assignment-3-add-new-product)\n\n### [1.16 class component](https://youtu.be/fu76idgpuEI)\n\n### [1.17 state, setState, event handler](https://youtu.be/9AtJ4dM2xOU)\n\n- state is a js object for storing current situation of a component\n\n- **Code Example - 47 (Counter App using class component)**\n\n ```js\n // App.js\n import React from \"react\";\n\n import Counter from \"./components/Counter\";\n\n const App = () =\u003e {\n return (\n \u003cdiv\u003e\n \u003cCounter /\u003e\n \u003c/div\u003e\n );\n };\n\n export default App;\n ```\n\n ```js\n // Counter.js\n import React, { Component } from \"react\";\n\n export default class Counter extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n count: 0,\n };\n }\n\n handleIncrement = () =\u003e {\n this.setState({\n count: this.state.count + 1,\n });\n };\n\n render() {\n return (\n \u003cdiv\u003e\n \u003ch2\u003eCounter: {this.state.count}\u003c/h2\u003e\n \u003cbutton onClick={this.handleIncrement}\u003e+\u003c/button\u003e\n \u003c/div\u003e\n );\n }\n }\n ```\n\n### [1.18 react todo projects]\n\n- [react todo project](https://github.com/anisul-Islam/react-todo-project)\n\n\u003c!-- ## Part-4 (life cycle method of class component, useEffect Hook, custom hook, services) --\u003e\n\n## 2. Intermediate React.js Topics\n\n### [2.1 life cycle methods of a class component](https://youtu.be/Yz5qTOmSt0M)\n\n- **Code Example - 48 (life cycle methods of a class component)**\n\n ```js\n // Counter App\n import React, { Component } from \"react\";\n\n class Counter extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n count: 0,\n };\n }\n\n handleIncrement = () =\u003e {\n this.setState({\n count: this.state.count + 1,\n });\n };\n\n render() {\n return (\n \u003cdiv\u003e\n \u003ch2\u003eCount: {this.state.count}\u003c/h2\u003e\n \u003cbutton onClick={this.handleIncrement}\u003eIncrement\u003c/button\u003e\n \u003c/div\u003e\n );\n }\n }\n export default Counter;\n\n // LifeCycle Methods\n import React, { Component } from 'react';\n // mounting - constructor -\u003e render -\u003e componentDidMount() (it will be called once, API Call is recommended here)\n // updating - state/props -\u003e shouldComponentUpdate()-\u003e render -\u003e componentDidUpdate -\u003e\n // unmounting -\u003e componentDidUnmount()\n class LifeCycle extends Component {\n constructor(props) {\n super(props);\n console.log('constructor');\n this.state = {\n count: 0\n };\n }\n\n handleIncrement = () =\u003e {\n this.setState({\n count: this.state.count + 1\n });\n };\n componentDidMount() {\n console.log('componentDidMount');\n }\n componentDidUpdate() {\n console.log('componentDidUpdate');\n }\n shouldComponentUpdate() {\n console.log('shouldComponentUpdate()');\n return true;\n }\n\n render() {\n console.log('render');\n return (\n \u003cdiv\u003e\n \u003ch2\u003eCount: {this.state.count}\u003c/h2\u003e\n \u003cbutton onClick={this.handleIncrement}\u003eIncrement\u003c/button\u003e\n \u003c/div\u003e\n );\n }\n }\n export default LifeCycle;\n\n ```\n\n### [2.2 useEffect Hook](https://youtu.be/XEU3jlV9syI)\n\nThe `useEffect` hook in React allows you to perform side effects in your functional components. Side effects can include data fetching, DOM manipulation, setting up subscriptions, and more. It's a crucial hook for managing the lifecycle of your components.\n\nRule: Don’t call Hooks inside loops, conditions, or nested functions\n\nuseEffct = componentDidMount + componentDidUpdate + componentWillUnmount\n\nHere's how to use the `useEffect` hook in a React component:\n\n```javascript\nimport React, { useState, useEffect } from 'react';\n\nfunction ExampleComponent() {\n // State and other code here\n\n useEffect(() =\u003e {\n // This function will run after the component renders\n\n // Place your side effect code here\n console.log('Component has rendered');\n\n // If needed, you can return a cleanup function\n return () =\u003e {\n // This code will run before the component unmounts\n console.log('Component will unmount');\n };\n }, []); // Dependency array (optional)\n\n return (\n // JSX to render\n );\n}\n\nexport default ExampleComponent;\n```\n\nKey points about the `useEffect` hook:\n\n1. The `useEffect` hook takes two arguments:\n\n - The first argument is a function that contains your side effect code.\n - The second argument is an array of dependencies. If any of these dependencies change, the side effect function will be re-executed. If you want the side effect to run only once (similar to `componentDidMount` in class components), you can pass an empty array (`[]`) as the second argument.\n\n2. The side effect function is run after the component has rendered. It can run multiple times if the dependencies change (if provided in the dependency array).\n\n3. You can return a cleanup function from the side effect function. This cleanup function will run before the component unmounts. It's useful for unsubscribing from subscriptions, canceling network requests, or any cleanup work.\n\nHere's a breakdown of how you might use the `useEffect` hook for common scenarios:\n\n- **Data Fetching**: Fetch data when the component mounts, and clean up any resources when it unmounts.\n\n```javascript\nuseEffect(() =\u003e {\n const fetchData = async () =\u003e {\n // Fetch data here\n };\n\n fetchData();\n\n return () =\u003e {\n // Cleanup resources (e.g., cancel network request)\n };\n}, []);\n```\n\n- **Updating the Title**: Change the document title when the component mounts.\n\n```javascript\nuseEffect(() =\u003e {\n document.title = \"New Page Title\";\n\n return () =\u003e {\n document.title = \"Previous Page Title\";\n };\n}, []);\n```\n\n- **Listening for State Changes**: Execute code when specific state values change.\n\n```javascript\nuseEffect(() =\u003e {\n // Execute code when someStateValue changes\n}, [someStateValue]);\n```\n\n- **Subscription Management**: Subscribe to a service and unsubscribe when the component unmounts.\n\n```javascript\nuseEffect(() =\u003e {\n const subscription = service.subscribe((data) =\u003e {\n // Handle data\n });\n\n return () =\u003e {\n subscription.unsubscribe();\n };\n}, []);\n```\n\nThe `useEffect` hook is a versatile tool for managing side effects in your React components and can help you keep your code clean and efficient.\n\n- **Code Example - 49 (useEffect hook)**\n\n ```js\n import React, { useEffect, useState } from \"react\";\n\n const UseEffectHook = () =\u003e {\n const [count, setCount] = useState(0);\n\n // useEffect(() =\u003e {\n // //Runs on every render\n // });\n\n // useEffect(() =\u003e {\n // //Runs only on the first render\n // }, []);\n\n // useEffect(() =\u003e {\n // //Runs on the first render\n // //And any time any dependency value changes\n // }, [prop, state]);\n\n //Runs on every render\n // useEffect(() =\u003e {\n // console.log(\"useEffect: \" + count);\n // });\n\n //Runs only on the first render\n // useEffect(() =\u003e {\n // console.log(count);\n // }, []);\n\n //Runs on the first render and also when the dependecy value changes\n useEffect(() =\u003e {\n console.log(count);\n }, [count]);\n\n return (\n \u003cdiv\u003e\n \u003ch1\u003eCount: {count}\u003c/h1\u003e\n \u003cbutton\n onClick={() =\u003e {\n setCount((count) =\u003e count + 1);\n }}\n \u003e\n +\n \u003c/button\u003e\n \u003c/div\u003e\n );\n };\n\n export default UseEffectHook;\n ```\n\n ```js\n // Another example\n import React, { useState, useEffect } from \"react\";\n\n const UseEffectExample = () =\u003e {\n const [count, setCount] = useState(0);\n const [greeting, setGreeting] = useState(\"good morning\");\n useEffect(() =\u003e {\n console.log(\"hello from useeffect\");\n }, [count]);\n\n return (\n \u003cdiv\u003e\n \u003ch2\u003eCount: {count}\u003c/h2\u003e\n \u003cbutton\n onClick={() =\u003e {\n setCount((count) =\u003e count + 1);\n }}\n \u003e\n +\n \u003c/button\u003e\n \u003cbutton\n onClick={() =\u003e {\n setGreeting(greeting + \"2\");\n }}\n \u003e\n greeting\n \u003c/button\u003e\n \u003cp\u003e{greeting}\u003c/p\u003e\n \u003c/div\u003e\n );\n };\n\n export default UseEffectExample;\n ```\n\n#### [fatch data using useEffect Hook](https://youtu.be/Z-EkslDJTJI)\n\n- **Code Example - 50 (fetch data using useEffect hook)**\n\n ```js\n import React, { useEffect, useState } from \"react\";\n\n import \"./App.css\";\n\n const App = () =\u003e {\n const [users, setUsers] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n\n useEffect(() =\u003e {\n setIsLoading(true);\n fetch(\"https://jsonplaceholder.typicode.com/users\")\n .then((res) =\u003e {\n if (!res.ok) {\n throw new Error(\"could not fetch the data\");\n }\n return res.json();\n })\n .then((result) =\u003e {\n setUsers(result);\n setIsLoading(false);\n })\n .catch((error) =\u003e {\n setIsLoading(false);\n setError(error.message);\n });\n }, []);\n console.log(users);\n const renderUsers = users.map((user) =\u003e {\n const { id, name, username, email, phone, website } = user;\n return (\n \u003carticle key={id} style={{ margin: \"2rem\" }}\u003e\n \u003ch2\u003e{id}\u003c/h2\u003e\n \u003ch3\u003e{name}\u003c/h3\u003e\n \u003cp\u003e{username}\u003c/p\u003e\n \u003cp\u003e{email}\u003c/p\u003e\n \u003cp\u003e{phone}\u003c/p\u003e\n \u003cp\u003e{website}\u003c/p\u003e\n \u003c/article\u003e\n );\n });\n\n return (\n \u003cdiv\u003e\n {isLoading \u0026\u0026 \u003cp\u003eLoading...\u003c/p\u003e}\n {error ? \u003cp\u003e{error}\u003c/p\u003e : \u003csection\u003e{renderUsers}\u003c/section\u003e}\n \u003c/div\u003e\n );\n };\n\n export default App;\n ```\n\n- **Code Example - 51 (fetch data using useEffect hook - async await)**\n\n ```js\n import React, { useEffect, useState } from \"react\";\n\n import \"./App.css\";\n\n const App = () =\u003e {\n const [users, setUsers] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n\n const fetchUsers = async () =\u003e {\n try {\n const response = await fetch(\n \"https://jsonplaceholder.typicode.com/users\"\n );\n if (!response.ok) {\n throw new Error(`Request failed with status: ${response.status}`);\n }\n const result = await response.json();\n setUsers(result);\n setIsLoading(false);\n } catch (error) {\n setIsLoading(false);\n setError(error.message);\n }\n };\n\n useEffect(() =\u003e {\n setIsLoading(true);\n fetchUsers();\n }, []);\n\n const renderUsers = users.map((user) =\u003e {\n const { id, name, username, email, phone, website } = user;\n return (\n \u003carticle key={id} style={{ margin: \"2rem\" }}\u003e\n \u003ch2\u003e{id}\u003c/h2\u003e\n \u003ch3\u003e{name}\u003c/h3\u003e\n \u003cp\u003e{username}\u003c/p\u003e\n \u003cp\u003e{email}\u003c/p\u003e\n \u003cp\u003e{phone}\u003c/p\u003e\n \u003cp\u003e{website}\u003c/p\u003e\n \u003c/article\u003e\n );\n });\n\n return (\n \u003cdiv\u003e\n {isLoading \u0026\u0026 \u003cp\u003eLoading...\u003c/p\u003e}\n {error ? \u003cp\u003e{error}\u003c/p\u003e : \u003csection\u003e{renderUsers}\u003c/section\u003e}\n \u003c/div\u003e\n );\n };\n\n export default App;\n ```\n\n#### [How to create custom hook](https://youtu.be/ZWschU7H_20)\n\n- **Code Example - 52 (custom hook)**\n\n ```js\n import React, { useState, useEffect } from \"react\";\n\n const useFetch = (URL) =\u003e {\n const [data, setData] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n\n const fetchUsers = async () =\u003e {\n try {\n const response = await fetch(URL);\n const result = await response.json();\n setData(result);\n setIsLoading(false);\n } catch (error) {\n setIsLoading(false);\n setError(error.message);\n }\n };\n\n useEffect(() =\u003e {\n setIsLoading(true);\n fetchUsers();\n }, []);\n\n return { data, isLoading, error };\n };\n\n export default useFetch;\n ```\n\n#### [Create services for making http requests]\n\n- **Code Example - 53 (services for http requests)**\n\n ```js\n // UserService.js\n import axios from \"axios\";\n\n const BASE_URL = \"https://jsonplaceholder.typicode.com\";\n\n // using axios\n export const getAllUsers = async () =\u003e {\n const response = await axios.get(`${BASE_URL}/users/202`);\n return response.data;\n };\n\n // using fetch\n export const createUser = async () =\u003e {\n const response = await fetch(\"https://jsonplaceholder.typicode.com/posts\", {\n method: \"POST\",\n body: JSON.stringify({\n title: \"foo\",\n body: \"bar\",\n userId: 1,\n }),\n headers: {\n \"Content-type\": \"application/json; charset=UTF-8\",\n },\n });\n return response;\n };\n\n // App.js\n import React, { useEffect, useState } from \"react\";\n import { ToastContainer, toast } from \"react-toastify\";\n import \"react-toastify/dist/ReactToastify.css\";\n\n import \"./App.css\";\n import { getAllUsers } from \"./services/UserService\";\n\n const App = () =\u003e {\n const [users, setUsers] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n\n const fetchUsers = async () =\u003e {\n try {\n const result = await getAllUsers();\n console.log(result);\n setUsers(result);\n setIsLoading(false);\n } catch (err) {\n setIsLoading(false);\n setError(err.message);\n toast(err.message);\n }\n };\n\n useEffect(() =\u003e {\n setIsLoading(true);\n fetchUsers();\n }, []);\n\n const renderUsers = users.map((user) =\u003e {\n const { id, name, username, email, phone, website } = user;\n return (\n \u003carticle key={id} style={{ margin: \"2rem\" }}\u003e\n \u003ch2\u003e{id}\u003c/h2\u003e\n \u003ch3\u003e{name}\u003c/h3\u003e\n \u003cp\u003e{username}\u003c/p\u003e\n \u003cp\u003e{email}\u003c/p\u003e\n \u003cp\u003e{phone}\u003c/p\u003e\n \u003cp\u003e{website}\u003c/p\u003e\n \u003c/article\u003e\n );\n });\n\n return (\n \u003cdiv\u003e\n \u003cToastContainer /\u003e\n {isLoading \u0026\u0026 \u003cp\u003eLoading...\u003c/p\u003e}\n {error ? \u003cp\u003e{error}\u003c/p\u003e : \u003csection\u003e{renderUsers}\u003c/section\u003e}\n \u003c/div\u003e\n );\n };\n\n export default App;\n ```\n\n### [Assignment 4 - fetch products](https://github.com/anisul-Islam/react-assignment-4-fetch-products)\n\n\u003c!-- ## Part-5 (useReducer Hook, modal, dynamic styling) --\u003e\n\n### [2.3 useReducer hook](https://youtu.be/l_BhBNhNwhE)\n\n- useState and useReducers helps us to manage states\n- useReducer is a good choice if you have multiple \u0026 complex states (objects, arrays)\n- useReducer is powerful when managing complex logic for updating the states\n- useState is better if you are using state for simple purpose and handling string, boolean or number type.\n- **Code Example - 54 (without useReducer)**\n\n ```js\n // without useReducer\n import React, { useState } from \"react\";\n\n // books, modalText, isModalOpen\n // add book - modalText\n // remove book - modalText\n const dummyBooks = [\n { id: 1, title: \"book1\" },\n { id: 2, title: \"book2\" },\n ];\n const Modal = ({ modalText }) =\u003e {\n return \u003cp\u003e{modalText}\u003c/p\u003e;\n };\n const App = () =\u003e {\n // every time update 3 relevant states\n const [books, setBooks] = useState(dummyBooks);\n const [modalText, setModalText] = useState(\"\");\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n const [bookTitle, setBookTitle] = useState(\"\");\n\n const handleAddBook = (event) =\u003e {\n event.stopPropagation();\n setBookTitle(event.target.value);\n };\n const handleDeleteBook = (event, id) =\u003e {\n event.stopPropagation();\n const filterBooks = books.filter((book) =\u003e book.id !== id);\n setBooks(filterBooks);\n setIsModalOpen(true);\n setModalText(\" book is deleted\");\n };\n\n const handleSubmit = (event) =\u003e {\n event.preventDefault();\n const newBook = { id: new Date().getTime().toString(), title: bookTitle };\n setBooks((prevBooks) =\u003e {\n return [...prevBooks, newBook];\n });\n setIsModalOpen(true);\n setModalText(\"New book is added\");\n };\n\n return (\n \u003cdiv\u003e\n \u003cform onSubmit={handleSubmit}\u003e\n \u003cinput\n type=\"text\"\n placeholder=\"enter book title\"\n value={bookTitle}\n onChange={handleAddBook}\n required\n /\u003e\n \u003cbutton type=\"submit\"\u003eAdd Book\u003c/button\u003e\n \u003c/form\u003e\n\n {isModalOpen \u0026\u0026 \u003cModal modalText={modalText} /\u003e}\n\n \u003csection className=\"books\"\u003e\n {books.map((book) =\u003e {\n const { id, title } = book;\n return (\n \u003carticle key={id} className=\"book\"\u003e\n \u003ch2\u003eid: {id}\u003c/h2\u003e\n \u003cp\u003etitle: {title}\u003c/p\u003e\n \u003cbutton\n onClick={(event) =\u003e {\n handleDeleteBook(event, id);\n }}\n \u003e\n Delete\n \u003c/button\u003e\n \u003c/article\u003e\n );\n })}\n \u003c/section\u003e\n \u003c/div\u003e\n );\n };\n\n export default App;\n ```\n\n- **Code Example - 55 (with useReducer)**\n\n ```js\n import React, { useState, useReducer } from \"react\";\n\n // books, modalText, isModalOpen\n // add book - modalText\n // remove book - modalText\n const dummyBooks = [\n { id: 1, title: \"book1\" },\n { id: 2, title: \"book2\" },\n ];\n const Modal = ({ modalText }) =\u003e {\n return \u003cp\u003e{modalText}\u003c/p\u003e;\n };\n\n // based on action type reducer will update the state \u0026 return the state\n const reducer = (state, action) =\u003e {\n // action object has action.type and action.payload\n switch (action.type) {\n case \"ADD\":\n const allBooks = [...state.books, action.payload];\n return {\n ...state,\n books: allBooks,\n isModalOpen: true,\n modalText: \"new book is added\",\n };\n case \"DELETE\":\n const filteredBooks = state.books.filter(\n (book) =\u003e book.id !== action.payload\n );\n return {\n ...state,\n books: filteredBooks,\n isModalOpen: true,\n modalText: \"book is deleted\",\n };\n\n default:\n return state;\n }\n };\n\n const initialState = {\n books: dummyBooks,\n isModalOpen: false,\n modalText: \"\",\n };\n\n const App = () =\u003e {\n // const [books, setBooks] = useState(dummyBooks);\n // const [modalText, setModalText] = useState('');\n // const [isModalOpen, setIsModalOpen] = useState(false);\n\n const [bookState, dispatch] = useReducer(reducer, initialState);\n\n const [bookTitle, setBookTitle] = useState(\"\");\n\n const handleTitleChange = (event) =\u003e {\n event.stopPropagation();\n setBookTitle(event.target.value);\n };\n const handleDeleteBook = (event, id) =\u003e {\n event.stopPropagation();\n dispatch({ type: \"DELETE\", payload: id });\n };\n\n const handleSubmit = (event) =\u003e {\n event.preventDefault();\n const newBook = { id: new Date().getTime().toString(), title: bookTitle };\n dispatch({ type: \"ADD\", payload: newBook });\n setBookTitle(\"\");\n };\n\n return (\n \u003cdiv\u003e\n \u003cform onSubmit={handleSubmit}\u003e\n \u003cinput\n type=\"text\"\n placeholder=\"enter book title\"\n value={bookTitle}\n onChange={handleTitleChange}\n required\n /\u003e\n \u003cbutton type=\"submit\"\u003eAdd Book\u003c/button\u003e\n \u003c/form\u003e\n\n {bookState.isModalOpen \u0026\u0026 \u003cModal modalText={bookState.modalText} /\u003e}\n\n \u003csection className=\"books\"\u003e\n {bookState.books.map((book) =\u003e {\n const { id, title } = book;\n return (\n \u003carticle key={id} className=\"book\"\u003e\n \u003ch2\u003eid: {id}\u003c/h2\u003e\n \u003cp\u003etitle: {title}\u003c/p\u003e\n \u003cbutton\n onClick={(event) =\u003e {\n handleDeleteBook(event, id);\n }}\n \u003e\n Delete\n \u003c/button\u003e\n \u003c/article\u003e\n );\n })}\n \u003c/section\u003e\n \u003c/div\u003e\n );\n };\n\n export default App;\n ```\n\n\u003c!-- ### Part-6 (react routing) --\u003e\n\n### [2.4 Routing](https://youtu.be/1_powatXjds)\n\n- [react-routing-project](https://github.com/anisul-Islam/react-routing-project)\n- react-router\n- **Code Example - 56 (basic routing)**\n\n```js\n// create few pages -\u003e Home.js, About.js, Contact.js, Error.js\nimport React from \"react\";\nimport { BrowserRouter, Link, Route, Routes } from \"react-router-dom\";\n\nimport About from \"./pages/About\";\nimport Contact from \"./pages/Contact\";\nimport Home from \"./pages/Home\";\nimport Error from \"./pages/Error\";\nconst App = () =\u003e {\n return (\n \u003cdiv\u003e\n \u003cBrowserRouter\u003e\n \u003cRoutes\u003e\n \u003cRoute path=\"/\" element={\u003cHome /\u003e} /\u003e\n \u003cRoute path=\"/about\" element={\u003cAbout /\u003e} /\u003e\n \u003cRoute path=\"/contact\" element={\u003cContact /\u003e} /\u003e\n \u003cRoute path=\"*\" element={\u003cError /\u003e} /\u003e\n \u003c/Routes\u003e\n \u003c/BrowserRouter\u003e\n \u003c/div\u003e\n );\n};\n\nexport default App;\n```\n\n#### [Navigation and redirect](https://youtu.be/DooqgS1JDg0)\n\n- **Code Example - 57 (basic routing with Navbar)**\n\n```js\nimport React from \"react\";\nimport { BrowserRouter, Link, Route, Routes } from \"react-router-dom\";\n\nimport About from \"./pages/About\";\nimport Contact from \"./pages/Contact\";\nimport Home from \"./pages/Home\";\nimport Error from \"./pages/Error\";\n\nconst App = () =\u003e {\n return (\n \u003cdiv\u003e\n \u003cBrowserRouter\u003e\n \u003cnav\u003e\n \u003cLink to=\"/\" className=\"nav__link\"\u003e\n Home\n \u003c/Link\u003e\n \u003cLink to=\"/about\" className=\"nav__link\"\u003e\n About\n \u003c/Link\u003e\n \u003cLink to=\"/contact\" className=\"nav__link\"\u003e\n Contact\n \u003c/Link\u003e\n \u003c/nav\u003e\n \u003cRoutes\u003e\n \u003cRoute path=\"/\" element={\u003cHome /\u003e} /\u003e\n \u003cRoute path=\"/about\" element={\u003cAbout /\u003e} /\u003e\n \u003cRoute path=\"/contact\" element={\u003cContact /\u003e} /\u003e\n \u003cRoute path=\"*\" element={\u003cError /\u003e} /\u003e\n \u003c/Routes\u003e\n \u003c/BrowserRouter\u003e\n \u003c/div\u003e\n );\n};\n\nexport default App;\n\n// create a separate Navbar.js component inside layout folder\n\n// Active Link\nimport React from 'react';\nimport { NavLink } from 'react-router-dom';\n\nconst Navbar = () =\u003e {\n return (\n \u003cnav\u003e\n \u003cNavLink to=\"/\" className=\"nav__link\"\u003e\n Home\n \u003c/NavLink\u003e\n \u003cNavLink to=\"/about\" className=\"nav__link\"\u003e\n About\n \u003c/NavLink\u003e\n \u003cNavLink to=\"/contact\" className=\"nav__link\"\u003e\n Contact\n \u003c/NavLink\u003e\n \u003c/nav\u003e\n );\n};\n\nexport default Navbar;\n.active {\n color: orange;\n}\n```\n\n- **Code Example - 58 (navigate with useNavigate)**\n\n```js\nimport React from \"react\";\nimport { useNavigate } from \"react-router-dom\";\n\nconst Error = () =\u003e {\n const navigate = useNavigate();\n\n return (\n \u003cdiv\u003e\n \u003ch2\u003eError Page\u003c/h2\u003e\n \u003cbutton\n onClick={() =\u003e {\n navigate(\"/\");\n }}\n \u003e\n Go to Home Page\n \u003c/button\u003e\n \u003c/div\u003e\n );\n};\n\nexport default Error;\n```\n\n#### [Dynamic routing using useParams](https://youtu.be/g5B0Vq3jHbA)\n\n- **Code Example - 59 (dynamic routing)**\n- based on the parameters show dynamic data in a page\n- step 1: create some dummy data\n\n```js\nexport const blogsData = [\n {\n id: 1,\n title: \"html\",\n body: \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe doloremque impedit cumque aperiam dignissimos cum eveniet reiciendis iste asperiores voluptates repudiandae et, deserunt nobis commodi hic! Ratione accusamus assumenda alias rerum, esse et aperiam nihil sunt amet nobis quod libero sapiente! Harum reiciendis quos tempora blanditiis recusandae impedit iusto ipsum?\",\n },\n {\n id: 2,\n title: \"css\",\n body: \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe doloremque impedit cumque aperiam dignissimos cum eveniet reiciendis iste asperiores voluptates repudiandae et, deserunt nobis commodi hic! Ratione accusamus assumenda alias rerum, esse et aperiam nihil sunt amet nobis quod libero sapiente! Harum reiciendis quos tempora blanditiis recusandae impedit iusto ipsum?\",\n },\n {\n id: 3,\n title: \"js\",\n body: \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe doloremque impedit cumque aperiam dignissimos cum eveniet reiciendis iste asperiores voluptates repudiandae et, deserunt nobis commodi hic! Ratione accusamus assumenda alias rerum, esse et aperiam nihil sunt amet nobis quod libero sapiente! Harum reiciendis quos tempora blanditiis recusandae impedit iusto ipsum?\",\n },\n {\n id: 4,\n title: \"react.js\",\n body: \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe doloremque impedit cumque aperiam dignissimos cum eveniet reiciendis iste asperiores voluptates repudiandae et, deserunt nobis commodi hic! Ratione accusamus assumenda alias rerum, esse et aperiam nihil sunt amet nobis quod libero sapiente! Harum reiciendis quos tempora blanditiis recusandae impedit iusto ipsum?\",\n },\n];\n```\n\n- step 2: load and map the data in Blogs.js page\n\n```js\nimport React, { useState } from \"react\";\nimport { Link } from \"react-router-dom\";\n\nimport { blogsData } from \"../data\";\nconst Blogs = () =\u003e {\n const [blogs, setBlogs] = useState(blogsData);\n\n const truncateString = (str, number) =\u003e {\n if (str.length \u003e number) {\n return str.slice(0, number) + \"...\";\n } else return str;\n };\n\n const renderBlogsElement = blogs.map((blog) =\u003e {\n return (\n \u003carticle key={blog.id} className=\"b","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearnwithfair%2Freact-documentation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flearnwithfair%2Freact-documentation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearnwithfair%2Freact-documentation/lists"}