{"id":19694120,"url":"https://github.com/agent-006/react-fresher","last_synced_at":"2026-06-09T18:31:54.435Z","repository":{"id":217650311,"uuid":"744232376","full_name":"Agent-006/React-Fresher","owner":"Agent-006","description":null,"archived":false,"fork":false,"pushed_at":"2024-01-24T20:11:19.000Z","size":1123,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-27T12:38:56.404Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/Agent-006.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-01-16T21:58:14.000Z","updated_at":"2024-01-16T21:59:17.000Z","dependencies_parsed_at":"2025-01-10T12:53:21.119Z","dependency_job_id":null,"html_url":"https://github.com/Agent-006/React-Fresher","commit_stats":null,"previous_names":["agent-006/react-fresher"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Agent-006/React-Fresher","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Agent-006%2FReact-Fresher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Agent-006%2FReact-Fresher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Agent-006%2FReact-Fresher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Agent-006%2FReact-Fresher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Agent-006","download_url":"https://codeload.github.com/Agent-006/React-Fresher/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Agent-006%2FReact-Fresher/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34121021,"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-09T02:00:06.510Z","response_time":63,"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":[],"created_at":"2024-11-11T19:20:22.861Z","updated_at":"2026-06-09T18:31:54.416Z","avatar_url":"https://github.com/Agent-006.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCurrently, two official plugins are available:\n\n- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh\n- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh\n\n\u003chr style= \"border-top: 1px dotted #ccc;\"\u003e\n\n# 🎯 Reference\n\nLink: 🔗 https://www.youtube.com/watch?v=EaG3Zd04W5s\u0026list=PLbtI3_MArDOkNtOan8BQkG6P8wf6pNVz-\u0026index=39 \\\nLink: 🔗 https://www.youtube.com/watch?v=Xe8CkYZvCig\u0026list=PLbtI3_MArDOkNtOan8BQkG6P8wf6pNVz-\u0026index=38 \\\nPlayList: 🔗 https://youtu.be/vz1RlUyrc3w?si=bLwgUNz49oW99PMt\n\n# ⭐ React learning\n\n📌 To Code in React\\\n📌 To Crack React Js Interview\n\n\u003chr style= \"border-top: 1px dotted #ccc;\"\u003e\n\n# ⭐ Learn what matters\n\nFacebook was facing a problem that they were not able to show the notifications\\\nand reactions in real time, to show the notifications and reactions they need to \\\nreload the page, they were facing this problem because they were using php earlier.\\\nTo solve this problem, in 2013 one of the facebook engineer's made a library and this\\\nlibrary was special, because this was able to show the data in real time, but the working\\\nof this library was different. This doesn't updates the \u003cb\u003emain DOM\u003c/b\u003e tree directly, means if \\\nthere is any change in the page, the DOM tree will \u003cb\u003enot be\u003c/b\u003e updated directly. This library\\\nhas it's own DOM tree named as \u003cb\u003e'Virtual DOM'\u003c/b\u003e. This virtual DOM tree is an \u003cb\u003eexact copy\u003c/b\u003e of \\\nthe real/main DOM tree, but there is a difference between them, that is whenever there is\\\na change in the virtual DOM only that part of the page will be changed rather than\\\nrefreshing the whole page.\n\nThis is why react became so famous and useful for big applications.\n\n\u003chr style= \"border-top: 1px dotted #ccc;\"\u003e\n\n# 🎯 What is react? ✅\n\n--\u003e React is a JavaScript library to maintain the front-end efficiently\n\n⭐ Features and advantages of react\n\n📌 very very very less page reloads\\\n📌 extreme use of reusable components\\\n📌 very very efficient\\\n📌 more opportunities\n\n\u003chr style= \"border-top: 1px dotted #ccc;\"\u003e\n\n# 🎯 When should I learn React ? ✅\n\n--\u003e\n📌 After mastering JS\\\n📌 most project don't need react in initial phase\n\n\u003chr style=\"border-top: 1px dotted #ccc;\"\u003e\n\n# 🎯 Why to use and learn react?\n\n--\u003e\n📌 efficient and lightweight\\\n📌 hype, job, trend, build UI\\\n📌 makes easy to manage \u0026 build complex front-end\n\n\u003chr style= \"border-top: 1px dotted #ccc;\"\u003e\n\n# 🎯 How to use react? ✅\n\n📌 create components,\\\n📌 and make data if you need it,\\\n📌 link the data and change data whenever you want,\\\n📌 react will react whenever data is changed.\n\n\u003chr style= \"border-top: 1px dotted #ccc;\"\u003e\n\n# 🎯 When to use it? ✅\n\n--\u003e Whenever you have to create a generous application where there are lots of things\\\nhappening and a lot of reusable components structure are there.\n\n\u003chr style= \"border-top: 1px dotted #ccc;\"\u003e\n\n# ⭐ Build something!!\n\n\u003chr style= \"border-top: 1px dotted #ccc;\"\u003e\n\n# 🎯 Topics to learn ✅\n\n📌 core of React (state or UI manipulation, JSX)\\\n📌 component reusability\\\n📌 Reusing of component (Props)\\\n📌 How to propagate change (hooks)\n\n\u003chr style= \"border-top: 1px dotted #ccc;\"\u003e\n\n# 🎯 Additional Addon to React ✅\n\n📌 Router (React don't have Router).\\\n📌 state management (React don't used to have state management).\\\n↘️ Redux, Redux toolkit, zustand, \u003cb\u003eonly context API comes with react now\u003c/b\u003e.\\\n📌 class based component.\\\n↘️ legacy code.\\\n📌BAAS Apps.\\\n↘️ social media clone, ecommerce app...\n\n\u003chr style= \"border-top: 1px dotted #ccc;\"\u003e\n\n# 🎯 How to create an react project ✅\n\n--\u003e There are total 3 react(s)\n\n📌 The old or raw react js that we can create with the command\n\n    npx create-react-app\n\nThe old react (not so old) gives a lot of unnecessary dependencies.\\\nIf you create you react app with the above command then will take a very long time.\n\n📌 The new react js that is now intigrated with nextjs framework. command:\n\n    npx creat-next-app\n\n📌 The faster and efficient way is react with vite. command:\n\n    npm create vite@latest\n\nThis is the fastest and most efficient way to create your react app.\n\n\u003chr style= \"border-top: 1px dotted #ccc;\"\u003e\n\n# 🎯 Understanding react flow and structure ✅\n\n--\u003e React is a Single Page Application(SPA) library.\n\n⭐ In raw react (npx create-react-app) inside the 'index.html' file there is no script tag.\\\n But, in the starting stages we have learned that we have to inject or add the script tag \\\n and we have to add the javascript file to make changes with the help of javascript.\n\nSo, the question is if there is no script attached in the 'index.html' file then how it\\\n is working and how javascript is working and rendering ?\n\nThe answer to your question is, if you open the 'package.json' file then there in the \\\n dependencies object you find the react, react-dom which are essential to manipulate the\\\n DOM and after that you will find a react-script. This react-script sneaks through and \\\n adds the script(javaScript file) to the 'index.html' file. If you go to your browser and\\\n view page source(or you can also inspect) there you will find that react has automatically\\\n added many things by itself. There you find the script tag was also added/attached and\\\n this is done by the react-script package.\n\n\u003chr style=\"border-top: 1px solid #111;\"\u003e\n\n⭐ In react + vite the index.html is outside (or say in the main directory). Now if you\\\nopen the 'package.json' file you will notice that there is no 'react-script' package \\\ninstalled.\n\nNow, the question arise, then how the react file (or say javascript file) is injected in\\\nthe 'index.html' file ?\n\nThe answer to your question is when you open the 'index.html' file you will notice that \\\nthey have already added the script tag there and attached the 'main.jsx' which was \\\n'index.js' previously, to the 'index.html' file. So, there is no need for the 'react-script'\\\npackage.\n\n🌟 babble (imp)\n\n\u003chr style=\"border-top: 1px solid #111;\"\u003e\n\n⭐ If you create a component in the raw react(npx create-react-app) there you can give \\\neither fileName.js or fileName.jsx but, if you are using viteReact since react is a \\\nlibrary viteReact (vite) have some constraints. The constraints are whenever you are\\\ncreating a file you must name it with .jsx extension and in both React and Vite you have\\\nto start the component name with an uppercase letter as these are the best practices.\n\n\u003chr style=\"border-top: 1px solid #111;\"\u003e\n\n# 🔑 key points ⬇️\n\n📌 In react can name either fileName.js or fileName.jsx.\\\n📌 In vite you must name the file with .jsx extension.\\\n📌 In both react and vite component(function) name must start with an uppercase letter.\\\n📌 It is always recommended to start the component fileName also with an uppercase letter.\n\n\u003chr style=\"border-top: 1px dotted #ccc;\"\u003e\n\n# 🎯 Creating your own custom react ✅\n\n--\u003e Go to the customReact folder. You will see there is an 'index.html' file and a \\\n'customreact.js' file(you can name whatever you want). Now go to the 'index.html' \\\nfile in that file there is only one 'div' with and 'id = root'.\n\nGo to the 'customreact.js' file. What we are doing here is we are creating an object(let's\\\nsay library) named as reactElement. There are types and arrtibutes they take as an element\\\nin HTML.\n\nNow, have a function named 'customRender' which takes what to render and where to render. \\\nInside the 'customRender' function we are creating an element and injecting the type, props,\\\netc. and adding it to the main root div.\n\nThis is an overview of how react actually works under the hood. You can add more types in\\\nthe reactElement and render it accordingly. This was the basic idea of how react works.\n\n🌟 You can go to your page and view page source, there you will see same HTML as react\\\nrenders and everthing is rendered through JavaScript.\n\nAs the components are nothing but functions, you can render/run them as normal functions but \\\nyou shouldn't.\n\n⭐Exmp: Go to the main.jsx/index.js and write a function\n\n    import React from \"react\";\n    import ReactDOM from \"react-dom/client\";\n    import App from \"./App.jsx\";\n\n    function MyApp () {\n      return (\n        \u003cdiv\u003e\n          \u003ch1\u003eCustom App !!!\u003c/h1\u003e\n        \u003c/div\u003e\n      )\n    }\n\n    ReactDOM.createRoot(document.getElementById(\"root\")).render(\n        \u003cMyApp /\u003e\n    );\n\n📝 The function MyApp is a simple function which is returning a jsx. You can run it as shown or\\\n you can run it like MyApp() like a function.\n\n    import React from \"react\";\n    import ReactDOM from \"react-dom/client\";\n    import App from \"./App.jsx\";\n\n    function MyApp () {\n      return (\n        \u003cdiv\u003e\n          \u003ch1\u003eCustom App !!!\u003c/h1\u003e\n        \u003c/div\u003e\n      )\n    }\n\n    ReactDOM.createRoot(document.getElementById(\"root\")).render(\n        MyApp()\n    );\n\n📌 You can go to 'react inner working' commit to see these code.\n\n\u003chr style=\"border-top: 1px solid #111;\"\u003e\n\n🌟 Expression and Evaluated expressions\n\n--\u003e In javaScript we used to have the template literals like this\n\n    const name = 'Sagar';\n    \u003ch1\u003eMy name is: ${name}\u003c/h1\u003e\n\nand whatever we use to write between this ${} it was treated as a variable.\n\nSimilarly, in react we have something similar,\n\n    import React from 'react'\n\n    const username = 'hellow dosto!';\n\n    function App() {\n      return (\n        \u003cdiv\u003e\n          Hellow {username}\n        \u003c/div\u003e\n      )\n    }\n\n    export default App\n\nHere, we are having a variable username and if want to print the value then we wrap the \\\nvariable between {} these curly braces.\n\n📌 Anything between {} these braces are treated as expression and {username} this is known as\\\nevaluated expression which means that we don't write whole javascript here but the final outcome\\\nafter all evaluation is written here.\n\n\u003chr style=\"border-top: 1px dotted #ccc;\"\u003e\n\n# 🎯 Hooks ✅\n\n--\u003e Hooks are functions that are used to perform certain tasks. There are many hooks,\\\nsome of the most popular are:\n\n📌 useState hook - Used to creation and updation of variables in react.\n\n⭐Exmp:\n\n      import React, { useState } from \"react\";\n\n      function App() {\n        const [counter, setCounter] = useState(10);\n\n        // let counter = 15;\n\n        const increaseValue = () =\u003e {\n          // counter += 1;\n          if (counter \u003c 20) setCounter(counter + 1);\n        };\n\n        const decreaseValue = () =\u003e {\n          // counter -= 1;\n          if (counter \u003e 0) setCounter(counter - 1);\n        };\n\n        return (\n          \u003cdiv className=\"w-full h-screen bg-zinc-800 text-white text-3xl flex flex-col       items-center justify-center text-left\"\u003e\n            \u003ch1 className=\"text-7xl font-bold p-5\"\u003eChai aut react\u003c/h1\u003e\n            \u003ch2 className=\"text-5xl font-serif p-5\"\u003eCounter value: {counter}\u003c/h2\u003e\n\n            \u003cdiv\u003e\n              \u003cbutton\n                onClick={increaseValue}\n                className=\"px-6 py-4 bg-zinc-500 mx-1 text-xl rounded-lg border-2 border-zinc-400 hover:border-sky-300 hover:text-sky-300 transition-all duration-500\"\n              \u003e\n                Increase value {counter}\n              \u003c/button\u003e\n              \u003cbutton\n                onClick={decreaseValue}\n                className=\"px-6 py-4 bg-zinc-500 mx-1 text-xl rounded-lg border-2 border-zinc-400 hover:border-sky-300 hover:text-sky-300 transition-all duration-500\"\n              \u003e\n                Decrease value {counter}\n              \u003c/button\u003e\n            \u003c/div\u003e\n\n            \u003cp className=\"p-5\"\u003efooter: {counter}\u003c/p\u003e\n          \u003c/div\u003e\n        );\n      }\n\n      export default App;\n\n📝Note: only the working is important increaseValue and decreaseValue functions, rest are\\\n just tailwind stylings.\n\n🌟 \u003cb\u003eInterview Question\u003c/b\u003e\n\nIf we call the setCounter function multiple times what will be the output ?\n\n      import React, { useState } from \"react\";\n\n      function App() {\n        const [counter, setCounter] = useState(10);\n\n        const increaseValue = () =\u003e {\n          // like this\n          setCounter(counter + 1);\n          setCounter(counter + 1);\n          setCounter(counter + 1);\n          setCounter(counter + 1);\n        };\n\n        const decreaseValue = () =\u003e {\n          setCounter(counter - 1);\n        };\n\n        return (\n          \u003cdiv className=\"w-full h-screen bg-zinc-800 text-white text-3xl flex flex-col       items-center justify-center text-left\"\u003e\n            \u003ch1 className=\"text-7xl font-bold p-5\"\u003eChai aut react\u003c/h1\u003e\n            \u003ch2 className=\"text-5xl font-serif p-5\"\u003eCounter value: {counter}\u003c/h2\u003e\n\n            \u003cdiv\u003e\n              \u003cbutton\n                onClick={increaseValue}\n                className=\"px-6 py-4 bg-zinc-500 mx-1 text-xl rounded-lg border-2 border-zinc-400 hover:border-sky-300 hover:text-sky-300 transition-all duration-500\"\n              \u003e\n                Increase value {counter}\n              \u003c/button\u003e\n              \u003cbutton\n                onClick={decreaseValue}\n                className=\"px-6 py-4 bg-zinc-500 mx-1 text-xl rounded-lg border-2 border-zinc-400 hover:border-sky-300 hover:text-sky-300 transition-all duration-500\"\n              \u003e\n                Decrease value {counter}\n              \u003c/button\u003e\n            \u003c/div\u003e\n\n            \u003cp className=\"p-5\"\u003efooter: {counter}\u003c/p\u003e\n          \u003c/div\u003e\n        );\n      }\n\n      export default App;\n\nBy seeing the code you may think that it will update the value by 4, but it will not. The value\\\nwill be get updated only ones because as fiber will think that it is the same change we are \\\nmaking therefore it will bundle the change in one and make it which will result in only +1 \\\nvalue.\n\nTo solve this we can either use the updater function incase you have to update like this, so it\\\nfiber will put in a queue and execute it; or you can simply use logic setCounter(counter + 4)\n\n    import React, { useState } from \"react\";\n\n    function App() {\n      const [counter, setCounter] = useState(10);\n      const increaseValue = () =\u003e {\n        // like this\n        setCounter(prevCounter =\u003e prevCounter + 1);\n        setCounter(prevCounter =\u003e prevCounter + 1);\n        setCounter(prevCounter =\u003e prevCounter + 1);\n        setCounter(prevCounter =\u003e prevCounter + 1);\n      };\n      const decreaseValue = () =\u003e {\n        setCounter(counter - 1);\n      };\n      return (\n        \u003cdiv className=\"w-full h-screen bg-zinc-800 text-white text-3xl flex flex-col       items-centerjustify-center text-left\"\u003e\n          \u003ch1 className=\"text-7xl font-bold p-5\"\u003eChai aut react\u003c/h1\u003e\n          \u003ch2 className=\"text-5xl font-serif p-5\"\u003eCounter value: {counter}\u003c/h2\u003e\n          \u003cdiv\u003e\n            \u003cbutton\n              onClick={increaseValue}\n              className=\"px-6 py-4 bg-zinc-500 mx-1 text-xl rounded-lg border-2 border-zinc-400hover:border-sky-300 hover:text-sky-300 transition-all duration-500\"\n            \u003e\n              Increase value {counter}\n            \u003c/button\u003e\n            \u003cbutton\n              onClick={decreaseValue}\n              className=\"px-6 py-4 bg-zinc-500 mx-1 text-xl rounded-lg border-2 border-zinc-400hover:border-sky-300 hover:text-sky-300 transition-all duration-500\"\n            \u003e\n              Decrease value {counter}\n            \u003c/button\u003e\n          \u003c/div\u003e\n          \u003cp className=\"p-5\"\u003efooter: {counter}\u003c/p\u003e\n        \u003c/div\u003e\n      );\n    }\n    export default App;\n\n📌 useEffect hook - \\\n📌 useRef - \\\n📌 useCallback -\n\n📌 Can go to counter project 'end' commit for the code.\n\n\u003chr style=\"border-top: 1px dotted #ccc;\"\u003e\n\n# 🎯 Virtual DOM, Fibre and reconciliation ✅\n\n--\u003e Go to this link for the theory part:\n\nBest source: 🔗 https://github.com/acdlite/react-fiber-architecture \\\nVideo explanation: 🔗 https://www.youtube.com/watch?v=MPCVGFvgVEQ\u0026list=PLu71SKxNbfoDqgPchmvIsL4hTnJIrtige\u0026index=7\n\n🔑 Key points:\n\n📌 The createRoot creates its own DOM tree (Virtual DOM) and then compare it with the web\\\n browser's DOM tree (Real DOM) and only updates those components which are actually updated.\\\n📌 \u003cb\u003eReload:\u003c/b\u003e The browser creates a DOM tree (Real DOM) and whenever there is an update the browser \\\ncreates a completely new DOM tree with all the updates and re-renders the whole DOM tree, which\\\nis seen as the reload of the page.\\\n📌 In Virtual DOM, it checks the whole DOM tree and only updates the nodes(components/element/\\\nstate) rather than updating the whole DOM tree.\\\n📌 In the values depends upon network calls then updating rapidly may give lags so, we can drop the\\\nupdation call for the immediate value update and we can update in chunks.\\\n📌 The current algo used by React is the React Fibre algo.\\\n📌 Reconciliation is the algorithm behind what is popularly understood as the \"virtual DOM\".\\\n📌 \u003cb\u003eReconciliation:\u003c/b\u003e The algorithm React uses to diff one tree with another to determine which\\\n parts need to be changed.\\\n📌 \u003cb\u003eupdate:\u003c/b\u003e A change in the data used to render a React app. Usually the result of\\\n `setState`. Eventually results in a re-render.\n\n🌟 You can go to Virtual DOM, Fibre and reconciliation commit for code.\n\n\u003chr style=\"border-top: 1px dotted #ccc;\"\u003e\n\n# 🎯 Props in React ✅\n\n--\u003e Props are properties and in react you can pass these props from one to another components.\n\n⭐Exmp: You can pass like this\n\n        \u003cCards username=\"Angilina\" btnText=\"Click Me\" /\u003e\n        \u003cCards username=\"Gorginia\" btnText=\"Visit Me\" /\u003e\n\nOr you can also pass as variables\n\n        const username1 = \"Angilina\";\n        const username2 = \"Gorginia\";\n\n        \u003cCards username= {username1} btnText=\"Click Me\" /\u003e\n        \u003cCards username= {username2} btnText=\"Visit Me\" /\u003e\n\n📝 Note: After passing the props to the components you have to handle the props inside the\\\n components.\n\n⚠️ \u003cb\u003ePlease config Tailwind before using these components.\u003c/b\u003e\n\n        import React from \"react\";\n\n        function Cards(props) {\n          return (\n            \u003cdiv className=\"relative h-[400px] w-[300px] rounded-md m-2\"\u003e\n              \u003cimg\n                src=\"https://images.unsplash.com/photo-1546961329-78bef0414d7c?ixlib=rb-4.0.3\u0026        ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fHVzZXJ8ZW58MHx8MHx8\u0026auto=format\u0026fit=crop\u0026w=800\u0026q=60\"\n                alt=\"AirMax Pro\"\n                className=\"z-0 h-full w-full rounded-md object-cover\"\n              /\u003e\n              \u003cdiv className=\"absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent\"\u003e\u003c/div\u003e\n              \u003cdiv className=\"absolute bottom-4 left-4 text-left\"\u003e\n                \u003ch1 className=\"text-lg font-semibold text-white\"\u003e{props.username}\u003c/h1\u003e\n                \u003cp className=\"mt-2 text-sm text-gray-300\"\u003e\n                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi,\n                  debitis?\n                \u003c/p\u003e\n                \u003cbutton className=\"mt-2 inline-flex cursor-pointer items-center text-sm font-semibold         text-white\"\u003e\n                  {props.btnText} \u0026rarr;\n                \u003c/button\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          );\n        }\n\n        export default Cards;\n\nWe can accept the props in the function parameter and then as it is an object so we have to use\\\nit like {props.username} , {props.btnText} like this. This is the original syntax.\n\n🌟 You can use the destructuring method and use it like this,\n\n⭐Exmp:\n\n      import React from \"react\";\n\n      function Cards({username, btnText}) {\n        return (\n          \u003cdiv className=\"relative h-[400px] w-[300px] rounded-md m-2\"\u003e\n            \u003cimg\n              src=\"https://images.unsplash.com/photo-1546961329-78bef0414d7c?ixlib=rb-4.0.3\u0026      ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fHVzZXJ8ZW58MHx8MHx8\u0026auto=format\u0026fit=crop\u0026w=800\u0026q=60\"\n              alt=\"AirMax Pro\"\n              className=\"z-0 h-full w-full rounded-md object-cover\"\n            /\u003e\n            \u003cdiv className=\"absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent\"\u003e\u003c/div\u003e\n            \u003cdiv className=\"absolute bottom-4 left-4 text-left\"\u003e\n              \u003ch1 className=\"text-lg font-semibold text-white\"\u003e{username}\u003c/h1\u003e\n              \u003cp className=\"mt-2 text-sm text-gray-300\"\u003e\n                Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi,\n                debitis?\n              \u003c/p\u003e\n              \u003cbutton className=\"mt-2 inline-flex cursor-pointer items-center text-sm font-semibold text-white\"\u003e\n                {btnText} \u0026rarr;\n              \u003c/button\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        );\n      }\n\n      export default Cards;\n\nYou can also set a defalut value for the porps if incase the value is not passed.\n\n      function Cards({btnText=\"visit me!\"}) {\n        return (\n          \u003cbutton className=\"mt-2 inline-flex cursor-pointer items-center text-sm font-semibold text-white\"\u003e\n            {btnText} \u0026rarr;\n          \u003c/button\u003e\n        )\n      }\n\n📌 You can go to Props in React commit for code.\n\n\u003chr style=\"border-top: 1px dotted #ccc;\"\u003e\n\n# 🎯 Building a react project | bgChanger ✅\n\ngit-repo: 🔗 https://github.com/Agent-006/bg-changer\n\n![Project View](./src//assets//Screenshot%202024-01-19%20231125.png)\n\n\u003chr style=\"border-top: 1px dotted #ccc;\"\u003e\n\n# 🎯 useEffect, useRef and useCallback with project ✅\n\ngit-repo: 🔗 https://github.com/Agent-006/password-generator\n\nlive on: 🔗 https://password-generator-agent-006.vercel.app/\n\n\u003chr style=\"border-top: 1px dotted #ccc;\"\u003e\n\n# 🎯 Custom hooks in react | currency Project ✅\n\ngit-repo: 🔗 https://github.com/Agent-006/currency-converter\n\nlive on: 🔗 https://currency-converter-agent-006.vercel.app/\n\n\u003chr style=\"border-top: 1px dotted #ccc;\"\u003e\n\n# 🎯 React router ✅\n\nReference taken from pfficial documentation link: 🔗 https://reactrouter.com/en/main/start/overview#client-side-routing\n\n\u003cb\u003e🌟Client Side Routing\u003c/b\u003e\\\nReact Router enables \"client side routing\".\n\nIn traditional websites, the browser requests a document from a web server, downloads and evaluates\\\nCSS and JavaScript assets, and renders the HTML sent from the server. When the user clicks a link, it\\\nstarts the process all over again for a new page.\n\nClient side routing allows your app to update the URL from a link click without making another request\\\nfor another document from the server. Instead, your app can immediately render some new UI and\\\nmake data requests with `fetch` to update the page with new information.\n\nThis enables faster user experiences because the browser doesn't need to request an entirely\\\nnew document or re-evaluate CSS and JavaScript assets for the next page. It also enables more\\\ndynamic user experiences with things like animation.\n\nClient side routing is enabled by creating a `Router` and linking/submitting to pages with `Link` and `\u003cForm\u003e`:\n\n    import * as React from \"react\";\n    import { createRoot } from \"react-dom/client\";\n    import {\n      createBrowserRouter,\n      RouterProvider,\n      Route,\n      Link,\n    } from \"react-router-dom\";\n\n    const router = createBrowserRouter([\n      {\n        path: \"/\",\n        element: ( {/*It is always a good idea to make this element a component and import it here*/}\n          \u003cdiv\u003e\n            \u003ch1\u003eHello World\u003c/h1\u003e\n            \u003cLink to=\"about\"\u003eAbout Us\u003c/Link\u003e\n          \u003c/div\u003e\n        ),\n      },\n      {\n        path: \"about\",\n        element: \u003cdiv\u003eAbout\u003c/div\u003e,\n      },\n    ]);\n\n    createRoot(document.getElementById(\"root\")).render(\n      \u003cRouterProvider router={router} /\u003e\n    );\n\n📝 I highly suggest you to go through the docs for best understanding and for live application\\\nyou can access my git-repo\n\ngit-repo link: 🔗 https://github.com/Agent-006/react-router\n\ncomplete video explanation: 🔗 https://youtu.be/VJov5QWEKE4?si=8EsFgopJP24e3vzu\n\n\u003chr style=\"border-top: 1px dotted #ccc;\"\u003e\n\n# 🎯 Context API ✅\n\n--\u003e Context API was introduced to solve the state management problem in react. Previously the states were passed through many components for to access in a nested component. This is what is generally known as \"prop drilling\". The issue was that, even though many nested components were not using those states/data they have to handle the data only to pass it to the next component. It was very confusing for the developer to actually remember and know the data flow for big projects and it was also not an efficient way to do things.\n\nTo solve this they introduced the Context API where developer can setup a state/data on the global level and any component (only which needs) can access it whenever and from wherever required.\n\n# \u003cb style=\"font-size: 18px;\"\u003e⭐ Setup for Context API\u003c/b\u003e\n\nThere are two ways or let's say two different styles of using the Context API and this notes covers both. So I will go one by one:\n\n# \u003cb style=\"font-size: 16px;\"\u003e🌟 First method\u003c/b\u003e\n\nSo, this is the basic one, in react.dev docs there is no setup guide so you may follow the following steps.\n\n🪜 Steps to follow:\n\n\u003cb style=\"border-bottom: 1px solid white;\"\u003eStep 1 :\u003c/b\u003e Create a folder in the `src` folder and name it `contexts`.\n\n![Folder name](./src/assets/Screenshot%202024-01-22%20000332.png)\n\n📝Note: The filename will be depending upon your requirement (from next step). Doesn't have to be the same as mine.\n\n\u003cb style=\"border-bottom: 1px solid white;\"\u003eStep 2 :\u003c/b\u003e Create a file inside the `contexts` folder and name it `UserContext.js`. Create a context with `createContext()` function and store it in a variable let's say `UserContext` and export it.\n\n![UserContext.js](./src/assets/Screenshot%202024-01-22%20000412.png)\n\nNow, since we have created a \u003cb\u003econtext\u003c/b\u003e, how the other files will use and access that context ?\\\nFor that we have to create a \u003cb\u003econtext provider\u003c/b\u003e. Follow the next step to do so.\n\n\u003cb style=\"border-bottom: 1px solid white;\"\u003eStep 3 :\u003c/b\u003e Create another file inside the `contexts` folder and name it `UserContextProvider.jsx`. Now we have to create a \u003cb\u003econtext provider\u003c/b\u003e and wrap the children. Use `.Provider` to do so like `UserContext.Provider`. We also have to create the states that we want to give access to and pass them as props inside `value={}`. and export the file.\n\n![UserContextProvider.jsx](./src/assets/Screenshot%202024-01-22%20000743.png)\n\n\u003cb style=\"border-bottom: 1px solid white;\"\u003eStep 4 :\u003c/b\u003e Now go to the App.jsx (you can go main.jsx also) and wrap the components with `UserContextProvider` and you will have the access to all the states.\n\n![App.jsx](./src/assets/Screenshot%202024-01-22%20000830.png)\n\nNow, the basic setup for the context api is done and the below steps are to guide you how to access and use those states/values etc.\n\n\u003cb style=\"border-bottom: 1px solid white;\"\u003eStep 5 :\u003c/b\u003e We have two components `Login.jsx` and `Profile.jsx`. Go to the `Login.jsx` and can follow the code. Here we have `useContext()` hook for using the context that we have created. The `setUser` is the function that we are getting from our context API `UserContext`.\n\n![Login.jsx](./src/assets/Screenshot%202024-01-22%20001330.png)\n\n\u003cb style=\"border-bottom: 1px solid white;\"\u003eStep 5 :\u003c/b\u003e Go to the `Profile.jsx` and can follow the code. Here we are getting the value `user` from our `UserContext`. We can use the `user` value as shown.\n\n![Profile.jsx](./src/assets/Screenshot%202024-01-22%20001357.png)\n\n\u003chr style=\"border-top: 1px dotted #ccc;\"\u003e\n\n# \u003cb style=\"font-size: 16px;\"\u003e🌟 Second method\u003c/b\u003e\n\n\u003c!-- to be done --\u003e\n\n\u003chr style=\"border-top: 1px dotted #ccc;\"\u003e\n\n# 🎯 Redux toolkit ✅\n\nRedux itself is a state management library. It have two branches:\n\n📌 \u003cb style=\"border-bottom: 1px solid white; font-size: 14px;\"\u003eReact-Redux\u003c/b\u003e - It is an official react buildings for redux.\n\n📌 \u003cb style=\"border-bottom: 1px solid white; font-size: 14px;\"\u003eRedux-ToolKit (RTK)\u003c/b\u003e - It is the official, opinionated, batteries-included toolset for efficient Redux development .\n\n# \u003cb style=\"font-size: 16px;\"\u003e⭐ Store:\u003c/b\u003e\n\nA store holds the whole state tree of your application. The only way to change the state inside it is to dispatch an action on it, which triggers the root reducer function to calculate the new state.\n\nA store is not a class. It's just an object with a few methods on it.\n\n\u003cb\u003eTo create a store, pass your root reducer function\u003c/b\u003e to Redux Toolkit's `configureStore` \u003cb\u003emethod\u003c/b\u003e, which will set up a Redux store with a good default configuration. (Alternately, if you're not yet using Redux Toolkit, you can use the original `createStore` method, but we encourage you to migrate your code to use Redux Toolkit as soon as possible)\n\nEvery application must have only one store and it is also know as 'single source of truth'.\n\n# \u003cb style=\"font-size: 16px;\"\u003e⭐ Reducers:\u003c/b\u003e\n\nReducers are functions that take the current `state` and an `action` as arguments, and return a new `state` result. In other words, `(state, action) =\u003e newState`.\n\n    export const store = configureStore({\n    reducer: todoReducer,\n    })\n\n# \u003cb style=\"font-size: 16px;\"\u003e⭐ useSelector:\u003c/b\u003e\n\n    const todos = useSelector((state) =\u003e state.todos);\n\n# \u003cb style=\"font-size: 16px;\"\u003e⭐ useDispatch:\u003c/b\u003e\n\n    const dispatch = useDispatch();\n\nYou may refer to this repository for complete setup.\n\n📌 \u003cb style=\"border-bottom: 1px solid white\"\u003egit-repo:\u003c/b\u003e 🔗 https://github.com/Agent-006/redex-toolkit\n\n📌 \u003cb style=\"border-bottom: 1px solid white;\"\u003evideo-guide:\u003c/b\u003e 🔗 https://youtu.be/1i04-A7kfFI?si=daz3h_lyQnOQldEr\n\n\u003chr style=\"border-top: 1px dotted #ccc;\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagent-006%2Freact-fresher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagent-006%2Freact-fresher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagent-006%2Freact-fresher/lists"}