{"id":18928681,"url":"https://github.com/hamidhosen42/nodejs-react-and-firebase-and-databse-notes","last_synced_at":"2026-04-13T08:31:20.984Z","repository":{"id":150277151,"uuid":"469787917","full_name":"hamidhosen42/nodejs-react-and-firebase-and-databse-notes","owner":"hamidhosen42","description":"react important note","archived":false,"fork":false,"pushed_at":"2022-10-04T04:52:36.000Z","size":121,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-25T01:43:52.982Z","etag":null,"topics":["code","javascript","notebook","problem-solving","react"],"latest_commit_sha":null,"homepage":"","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/hamidhosen42.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":"2022-03-14T15:14:49.000Z","updated_at":"2023-04-11T15:46:11.000Z","dependencies_parsed_at":"2023-06-28T15:45:58.996Z","dependency_job_id":null,"html_url":"https://github.com/hamidhosen42/nodejs-react-and-firebase-and-databse-notes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hamidhosen42/nodejs-react-and-firebase-and-databse-notes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamidhosen42%2Fnodejs-react-and-firebase-and-databse-notes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamidhosen42%2Fnodejs-react-and-firebase-and-databse-notes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamidhosen42%2Fnodejs-react-and-firebase-and-databse-notes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamidhosen42%2Fnodejs-react-and-firebase-and-databse-notes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hamidhosen42","download_url":"https://codeload.github.com/hamidhosen42/nodejs-react-and-firebase-and-databse-notes/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamidhosen42%2Fnodejs-react-and-firebase-and-databse-notes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31746101,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T06:26:45.479Z","status":"ssl_error","status_checked_at":"2026-04-13T06:26:44.645Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["code","javascript","notebook","problem-solving","react"],"created_at":"2024-11-08T11:27:08.863Z","updated_at":"2026-04-13T08:31:20.959Z","avatar_url":"https://github.com/hamidhosen42.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### react-notes\n\n| Hamid | Hosen | Azad |\n| --- |  --- | --- |\n| One | Two | Three |\n| One | Two | Three |\n| One | Two | Three |\n| One | Two | Three |\n\n### Local Storage\n```\n// use local storage to manage cart data\nconst addToDb = (id) =\u003e {\n  let shoppingCart = {};\n\n  //get the shopping cart from local storage\n  const storedCart = localStorage.getItem(\"shopping-cart\");\n  if (storedCart) {\n    shoppingCart = JSON.parse(storedCart);\n  }\n\n  // add quantity\n  const quantity = shoppingCart[id];\n  if (quantity) { \n    const newQuantity = quantity + 1;\n    shoppingCart[id] = newQuantity;\n  } else {\n    shoppingCart[id] = 1;\n  }\n  localStorage.setItem(\"shopping-cart\", JSON.stringify(shoppingCart));\n};\n\nconst getStoredCart = () =\u003e {\n  let shoppingCart = {};\n\n  //get the shopping cart from local storage\n  const storedCart = localStorage.getItem(\"shopping-cart\");\n  if (storedCart) {\n    shoppingCart = JSON.parse(storedCart);\n  }\n  return shoppingCart;\n};\n\nconst removeFromDb = (id) =\u003e {\n  const storedCart = localStorage.getItem(\"shopping-cart\");\n  if (storedCart) {\n    const shoppingCart = JSON.parse(storedCart);\n    if (id in shoppingCart) {\n      delete shoppingCart[id];\n      localStorage.setItem(\"shopping-cart\", JSON.stringify(shoppingCart));\n    }\n  }\n};\n\nconst deleteShoppingCart = () =\u003e {\n  localStorage.removeItem(\"shopping-cart\");\n};\n\nexport { addToDb, getStoredCart, removeFromDb, deleteShoppingCart };\n```\n\n### React Responsive\n```\n@media screen and (max-width: 1000px) {\n  .products-container {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media screen and (max-width: 900px) {\n  .products-container {\n    grid-template-columns: repeat(1, 1fr);\n  }\n  .cart-container {\n    width: 250px;\n  }\n}\n```\n\n### React 18 1st error handle\n```\nindex.js file push =(import ReactDOMClient from \"react-dom/client\";)\nconst root = ReactDOMClient.createRoot(document.getElementById(\"root\"));\n\nfull code: \n\nimport React from \"react\";\nimport ReactDOMClient from \"react-dom/client\";\nimport App from \"./App\";\n\nconst root = ReactDOMClient.createRoot(document.getElementById(\"root\"));\n\nroot.render(\n  \u003cReact.StrictMode\u003e\n    \u003cApp /\u003e\n  \u003c/React.StrictMode\u003e\n);\n```\n\n### Firebase API key Private:\n\n```\nFile  name : .env.local\nThan push-\u003e\n  REACT_APP_apiKey=AIzaSyCICvPV0PdUcFwao-3p-xD4gzZY4W4tIcM\n  REACT_APP_authDomain=genius-car-service-firebase.firebaseapp.com\n  REACT_APP_projectId=genius-car-service-firebase\n  REACT_APP_storageBucket=genius-car-service-firebase.appspot.com\n  REACT_APP_messagingSenderId=312755558112\n  REACT_APP_appId=1:312755558112:web:25dd64c89af48e4f06e285\nFirebase.init:\nconst firebaseConfig = {\n  apiKey: process.env.REACT_APP_apiKey,\n  authDomain: process.env.REACT_APP_authDomain,\n  projectId: process.env.REACT_APP_projectId,\n  storageBucket: process.env.REACT_APP_storageBucket,\n  messagingSenderId: process.env.REACT_APP_messagingSenderId,\n  appId: process.env.REACT_APP_appId,\n};\n\n```\n\n### Netlify react live commend -\u003ethen build file push netlify= npm run build\n### Netlify Firebase Google , facebook, github not work but firebase hosting work\n\nযদি github থেকে প্রজেক্ট run করতে চাই তাহলে git clone করার পর npm install ইউস করতে হবে।কারণ  react file কিছ ডাটা মিছিং থাকে যেমন node-module\n\n[Install React Bootstrap in your react application](https://react-bootstrap.github.io/getting-started/introduction)\n\n[Setup tailwind css with Create React App](https://tailwindcss.com/docs/guides/create-react-app)\n\n[React-Route](https://reactrouter.com/docs/en/v6/getting-started/installation)\n\n## react router netlify 404  npm run build -\u003e public folder -\u003e _redirects file create -\u003e /* /index.html   200\n\n## Api থেকে  data load করার জন্য\n```\n১. প্রথমে state ডিক্লেয়ার করবো।\n\n২. useEffect ডিক্লেয়ার করবো\n\n৩.  fetch ব্যবহার করে ডাটা লোড করতে হবে\n\n৪. State ব্যবহারের মাধ্যে ডাটাগুরো সেট করতে হবে\n\n৫. Dynamically  ডাটা গুলো দেখাতে হবে\n```\n\n\n## React Install:\n```\nnpx create-react-app my-app\ncd my-app\nnpm start\n44-0 Milestone overview\n```\n\nMODERN FRONT-END CORE CONCEPTS\n```\n1.\tWeb component\n2.\tDynamic create HTML elements\n3.\tSingle Page Application(SPA)\n4.\tRouting, Route parameter\n5.\tDestructuring and props\n6.\tWebsite state\n7.\tFolder structure\n```\nReact Core Concept:\n```\n1.\tCore concepts Discussion\n2.\tWorking with JSX, Dynamic content, Dynamic Style\n3.\tPass Dynamic data to components, props\n4.\tCreate multiple components\n5.\tState, component state hook and set state\n6.\tLoad dynamic data , API call useEffect integrate state\n```\nHOW REACT WORKS\n```\n1.\tWhat is JSX, React Component, babel transpiler\n2.\tComponents and how props works\n3.\tUnidirectional data flow\n4.\tHow states works, asynchronous\n5.\tHow React Hook works\n6.\tProps vs state\n7.\tProperties vs attributes\n8.\tWhat Is React, when to use it\n9.\tRender, virtual dom, diff algorithm\n10.\tReact component lifecycle\n```\n\nYOU WILL ALSO LEARN\n```\n1.\tES6 Modules\n2.\tImport, Expart, Default\n3.\tRelative Path\n4.\tCreate and Load Fake data\n5.\tArray reduce\n6.\tLocal storage functionality\n7.\tGood UI vs bad UI\n8.\tThemeforestm, freepik, flaticon, unsplash\n9.\tAdd or remove key to an object\n10.\tWrap event handler with arrow function\n11.\tLocal stortage with more functionalites\n```\n\nUSESTATE()\n\n- USESTATE হলো একটি DYNAMIC STORAGE বা DATABASE . যেগুলো আমাদের COMPONENTS এর ভিতর DATA STORE করে রাখার জন্য থাকতে পারে।\n\nUSEEFFECT()\n\n-যখন কোন COMPONENTS CREATE , UPDATE অথবা REMOVE হয় তখন এ ফাংশনগুলো কল হয়। এ সকল কিছু USEEFFECT নামক হুক দিয়ে ম্যানেজ করা হয়। এ USEEFFECT হুক এর ভিতরে প্রথম ARGUMENTS টা RUN হয় যখন আপনার PAGE এ প্রথম COMPONENTS টা CREATE হয়। এরপর আর কখন কখন RUN হবে তা নির্ভর করবে ২য় ARGUMENTS এর উপর। ২য় ARGUMENTS কে আমরা বলে দিব যে, STATE এর কোন জিনিসটি CHANGE হলে এই UESEFFECT ফাংশনটি আবার RUN করবে। এটাকে TRIGGER ও বলা হয়। এবং FINALLY এই COMPONENTS থেকে আমরা চাইলে আর একটা ফাংশন রিটার্ন করিয়ে দিতে পারি যখন আমাদের COMPONENTS টা PAGE থেকে UNMOUNT আর DELETE হবে, তখন এই ফাংশনটা RUN করেবে।\n-এটা REACT এর SIDE EFFECT হিসাবে কাজ করে।\n\n### What is NPX in react?\n\nNPX: The npx stands for Node Package Execute and it comes with the npm, when you installed npm above 5.2.0 version then automatically npx will installed. It is an npm package runner that can execute any package that you want from the npm registry without even installing that package.\n\n### What is npm in react?\n\nNPM is short for node package manager, an online directory that contains the various already registered open-source packages. NPM modules consume the various functions as a third-party package when installed into an app using the NPM command npm install .\n\n### What is create react app?\n\nCreate React App (CRA) is a tool to create single-page React applications that is officially supported by the React team. The script generates the required files and folders to start the React application and run it on the browser.\n\n### What is JSX?\n\n1. javascript XML\n2. JSX এর সাহায্যে  html code গুলো javascript এন মধ্যে সহজে লিখা যায়। আবার,html code এর মধ্যেও javascript এর expression গুলো ব্যবহার করা যায় {} এর সাহায্যে।\n3. Markup language \u0026 logic কে আলাদা file এ না রেখে একই সাথে প্রয়োজনমত একই file এ রাখা যায়, এর জন্য React component ব্যবহার করা হয়।\n\n### What is Babel?\n\nBabel হল free \u0026 Open-source javascript Transpiller(TRANState ComPILER) যা ECMAScript এর newer versiom কে pervious version এ convert করে কাজের সুবিধার্থে।\n\n[JSX In Depth](https://bn.reactjs.org/docs/jsx-in-depth.html)\n\n### What is Component?\n\nকম্পোনেন্ট আপনার UIকে স্বতন্ত্র, পুনরায় ব্যবহারযোগ্য অংশে ভাগ করে, যাতে করে আপনি প্রতিটি অংশ নিয়ে পৃথকভাবে চিন্তা করতে পারেন। এই পেইজটি কম্পোনেন্টের ধারণা নিয়ে একটি ভূমিকা দেয়। মোটামুটিভাবে, কম্পোনেন্ট অনেকটা জাভাস্ক্রিপ্ট ফাংশনের মত। তারা আরবিটারি ইনপুট গ্রহণ করে (যাকে “props” বলা হয়) React elements রিটার্ন করে যা স্ক্রিনে কি দেখানো হবে তা বর্ণনা করে।সহজ উপায়ে কম্পোনেন্টের সংজ্ঞা হচ্ছে একটি জাভাস্ক্রিপ্ট ফাংশন লিখা.\n\n### Two Type Component:\n\n```\nFunctional Component:\nfunction Welcome(props) {\n  return \u003ch1\u003eHello, {props.name}\u003c/h1\u003e;\n}\n\nClass Component:\nclass Welcome extends React.Component {\n  render() {\n    return \u003ch1\u003eHello, {this.props.name}\u003c/h1\u003e;\n  }\n}\n```\n\n                 Props vs State:\n### Props\tState\n```\nProps are read-only\t\nProps can not be modified\t\n```\n\n### State\n```\nState changes can be asynchronous\nState can be modified using this.setState\n```\n\n### What is react?\n\nReact is a declarative, efficient, and flexible JavaScript library for\nbuilding user interfaces or UI components. It lets you compose complex UIs\nfrom small and isolated pieces of code called “components”.\n\nIt is used by large, established companies and newly-minted startups \nalike (Netflix, Airbnb, Instagram, and the New York Times, to name a few). \nReact brings many advantages to the table, making it a better choice \nthan other frameworks like Angular.js.\n\n### What is React and how is works?\n\nWhat is React? React is a JavaScript library (not a framework) that creates user interfaces (UIs) in a predictable and efficient way using declarative code. You can use it to help build single page applications and mobile apps, or to build complex apps if you utilise it with other libraries.\n\n### What is diff algorithm in React?\n\nDiffing is a heuristic algorithm based on two assumptions: Two elements of different types will produce different trees. The developer can hint at what elements will remain stable across renders with a key prop. (This is why React is always warning us to include keys in our props).\n\nWhen diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements.\n\n\n### ভার্চুয়াল DOM কি?\n\nভার্চুয়াল DOM হলো একটা প্রোগ্রামিং ধারণা যেখানে UI এর একটা আদর্শ অথবা “ভার্চুয়াল” প্রতিনিধি মেমোরিতে রাখা হয় এবং তা প্রকৃত DOM এর সাথে মিলিয়ে রাখা হয় ReactDOM এর মতো লাইব্রেরির মাধ্যমে\n\n### Shadow DOM আর Virtual DOM কি একই?\n\nনা, এগুলো আলাদা। Shadow DOM একটা ব্রাউজার টেকনোলজি যা প্রাথমিকভাবে তৈরি করা হয়েছিল ওয়েব কম্পোনেন্টে ভারিয়াবল এবং CSS স্কোপ করার জন্য। ভার্চুয়াল DOM হল একটা ধারণা যা লাইব্রেরির মাধ্যমে জাভাস্ক্রিপ্টে তৈরি করা হয়েছে ব্রাউজার API এর উপরে।\n\n### React Fiber” কি?\n\nফাইবার হলো React 16 এর নতুন reconciliation ইঞ্জিন। এর মূল লক্ষ্য হলো ভার্চুয়াল DOM এর ক্রমবর্ধমান render করা।\n\n\n### React এ প্রতিটা  component ৩ টি stage অতিক্রম করে-\n1.\tMounting\n2.\tUpdate\n3.\tUnmounting\n\n### Mounting-\t\n\nInitial stage. যখন কোনো component DOM এ প্রবেশ করে তখন এই stage শুরু হই।এই stage এ ৪ টি method প্রর্যায়ক্রমে ঘটেঃ\n\n1.\tConstructor()\n2.\tgetDerivedStateFromProps()\n3.\trender()\n4.\tcomponentDidMount()\n\n\n### Update-\n\nযখন কোন props বা state এর কোন পরিবর্তন component এর কোন পরিবর্তন ঘটায়,তখন component টি এই এই  stage এ প্রবেশ করে।এই stage এ ৫ টি method প্রর্যায়ক্রমে ঘটেঃ\n\n1.\tgetDerivedStateFromProps()\n2.\tsouldComponentUpdate()\n3.\trender()\n4.\tgetSnapshotBeforeUpdate()\n5.\tcomponentDidUpdate()\n\n### UnMounting-\n\nযখন Dom থেকে কোন component কে সরানো প্রয়োজন হই,তখন component টি এই stage এ প্রবেশ করে। এই stage এ ১টি method সম্পন্ন হইঃ\n1.\tcomponentWillMount()\n\n                                           React Router and States\n                     \n### REACT BOOTSTAP, TAILWIND CSS, AXIOS, RECHART\n-\tREACT BOOTSTRAP\n-\tTAILWIND CSS WITH REACT\n-\tRESPONSIVE CART WITH REACT \u0026 TAILWIND\n-\tUSE OF RECHART\n-\tAXIOS, HERO ICONS\n-\tREACT SPRING ANIMATION\n### SIMPLE REACT ROUTER EXAMPLE\n-\tINSTALLATION \u0026 SETUP OF REACT ROUTER\n-\tACTIVE ROUTE, DYNAMIC ROUTE, NESTED ROUTE\n-\tPRACTISING REACT ROUTER WITH JSONPLACEHOLDER APPI\n-\tPRACTISING REACT ROUTER WITH RESTCOUNTRIES API\n-\tPRACTISING REACT ROUTER WITH THEMEALDB API\n### ROUTER DEPLOY, SIMPLE CONTEXT API, DEVTOOL\n-\tUSE CHILDREN PROPS FOR DYNAMIC CONTENT\n-\tDEPLOY REACT ROUTER\n-\tREACT DEV TOOL\n-\tCONDITIONAL RENERING\n-\tGRANDFATHER CONTEX\n-\tPROP DRILLING\n-\tCONTEXT API TO AVOID PROP DRILLING\nSOMETHIG MORE WITH REACT ROUTE\n-\tCONDITION FORMATTING\n-\tMULTIPLE COMPONENTS IN ONE ROUTE\n-\tWHEN AND HOW WE SHOULD STORE DATA TO ANY STORAGE\n-\tOVERVIEW OF DATA STORAGE AFTHER SOME OPERATIONS\n-\tDIFFERENCE BETWEEN USESTATE USEEFFECT, CUSTOM HOOK AND OTHERS\n\n## [React Axios](https://www.npmjs.com/package/axios)\n\n```const [phones, setPhones] = useState([]);\n\n    useEffect(()=\u003e{\n        axios.get(\n          \"https://openapi.programming-hero.com/api/phones?search=iphone\"\n        ).then((data)=\u003e{\n            const loadedData=data.data.data;\n            const phoneData=loadedData.map((phone)=\u003e{\n                const parts=phone.slug.split('-');\n                const ph = {\n                  name: parts[0],\n                  value: parseInt(parts[1]),\n                };\n                return ph;\n            })\n            setPhones(phoneData);\n        })\n    },[]);\n    return (\n      \u003cdiv\u003e\n        \u003cBarChart width={800} height={400} data={phones}\u003e\n          \u003cBar dataKey=\"value\" fill=\"#8884d8\" /\u003e\n          \u003cXAxis dataKey=\"name\"\u003e\u003c/XAxis\u003e\n          \u003cTooltip /\u003e\n          \u003cYAxis\u003e\u003c/YAxis\u003e\n        \u003c/BarChart\u003e\n      \u003c/div\u003e\n    );\n  ```\n\n## React spring animation install : npm install react-spring\n\n## tailwind css with Create React App Note: \n1.\tclassName=\"text-6xl\"\n2.\tclassName=\"flex items-center\"\n3.\tclassName=\"w-4 h-4 text-green-500 mr-2\"\n4.\tclassName=\"mr-16\"\n5.\tclassName=\"bg-indigo-400\"\n6.\tclassName=\"w-6 h-6 md:hidden\"\n7.\tdynamic : className={`md:flex justify-center absolute md:static bg-indigo-300 w-full duration-500 ease-in ${open ? \"top-6\" : \"top-[-120px]\"}`}\n8.\tclassName=\"bg-indigo-300 p-4 mt-8 rounded-lg\"\n9.\tclassName=\"text-6xl font-mono text-white\"\n10.\tclassName=\"grid md:grid-cols-3 gap-3 mt-8\"\n11.\tclassName=\"bg-white p-4 rounded-lg\"\n12.\tclassName=\"bg-indigo-300 py-2 rounded text-xl font-bold\"\n13.\tclassName=\"text-5xl font-bold\"\n14.\tclassName=\"text-xl font-bold text-gray-500\"\n15.\tclassName=\"text-xl text-left\"\n16.\tclassName=\"bg-green-500 flex justify-center w-full py-2 rounded mt-6 text-white hover:text-green-700 font-bold\"\n17.\tclassName=\"w-6 h-6 ml-2\"\n18.\tclassName='px-4 pt-20 pb-24 mx-auto max-w-7xl md:px-2'\n19.\tclassName='grid grid-cols-1 gap-24 md:grid-cols-2'\n20.\tclassName='mb-6 text-2xl font-light text-gray-900 md:text-3xl'\n21.\tclassName='mt-10 mb-3 font-semibold text-gray-900'\n22.\tclassName='mt-10 mb-3 font-semibold text-gray-900'\n23.\tclassName='mt-10 mb-3 font-semibold text-gray-900'\n24.\tclassName='mb-6 text-2xl font-light md:text-3xl'\n25.\tclassName='mt-10 mb-3 font-semibold text-gray-900'\n26.\tclassName='mt-10 mb-3 font-semibold text-gray-900'\n27.\tclassName='mt-10 mb-3 font-semibold text-gray-900'\n28.\tclassName='shadow-lg rounded-2xl w-[250px] bg-white p-4'\n29.\tclassName='gap-4 flex justify-between items-center'\n30.\tclassName='flex-shrink-0'\n31.\tclassName='mx-auto object-cover rounded-full h-16 w-16'\n32.\tclassName=' flex flex-col justify-end'\n33.\tclassName='text-gray-600 font-medium'\n34.\tclassName='text-gray-400 text-xs'\n35.\t className='px-4 pt-20 pb-24 mx-auto max-w-7xl md:px-2'\n36.\t className='h-full grid grid-cols-1 md:grid-cols-2 justify-items-center gap-4 md:justify-items-around content-center'\n37.\t className='order-2 md:order-1'\n38.\t className='flex order-1 md:order-2 justify-center items-center'\n39.\t className='flex order-1 md:order-2 justify-center items-center'\n40.\t className='text-center text-3xl font-bold text-gray-800'\n41.\t className='text-center mb-12 text-xl font-normal text-gray-500 '\n42.\t className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 justify-items-center'\n43.\t className='border p-8 bg-blue-100 w-full'\n44.\t className='flex justify-between items-center'\n45.\t className='px-4 pt-20 pb-24 mx-auto max-w-7xl md:px-2'\n46.\t className='flex flex-col justify-center items-center'\n47.\t className=' font-mono text-xl text-center md:text-3xl'\n48.\t className='  py-1 px-3 text-white mt-3 mx-1 bg-cyan-600 w-auto sm:mb-0'\n49.\t className='  py-1 px-3 text-white mt-3 mx-1 bg-cyan-600 w-auto sm:mb-0'\n50.\t className='flex justify-center items-center w-full py-44'\n51.\t className='border p-8 bg-green-100 w-full'\n52.\t className='flex justify-between items-center'\n53.\t className='bg-white  w-full py-8 mt-8'\n54.\t className='max-w-screen-xl mx-auto px-4'\n55.\t className=' flex max-w-xs mx-auto items-center justify-between'\n57.\t className='text-xl hover:text-gray-800 transition-colors duration-200'\n58.\t className='text-gray-400 hover:text-gray-800 transition-colors duration-200'\n62.\t className='sticky top-0 bg-white px-12 py-8 flex justify-center md:justify-between'\n63.\t className='hidden md:block'\n64.\t className='font-sans font-bold text-xl text-gray-600'\n65.\t className='md:px-16 py-8'\n66.\t className='flex flex-col justify-center h-[80vh] items-center'\n67.\t className=' font-mono text-xl md:text-5xl '\n68.\t className='py-2 px-3 text-white mt-3 rounded-full bg-cyan-600'\n69.\t className='px-4 py-32 mx-auto max-w-7xl'\n70.\t className='grid items-center w-full grid-cols-1 gap-10 mx-auto md:w-4/5 lg:grid-cols-2 xl:gap-32'\n71.\t className='mb-2 text-xs font-semibold tracking-wide text-gray-500 uppercase'\n72.\t className='mb-4 text-2xl font-extrabold leading-tight tracking-tight text-left text-gray-900 md:text-4xl'\n73.\t className='mb-5 text-base text-left text-gray-800 md:text-xl'\n74.\t className='w-full mb-2 py-2 px-3 text-white mt-3 bg-cyan-600 sm:w-auto sm:mb-0'\n75.\t className='w-full mb-2 py-2 px-3 text-white mt-3 mx-2 bg-cyan-600 sm:w-auto sm:mb-0'\n76.\t className='w-full h-full bg-gray-200 rounded-lg'\n77.\t className='flex h-[84vh] items-center justify-center'\n78.\t className='inline-flex items-center px-4 py-2 font-semibold leading-6 text-sm shadow rounded-md text-white bg-cyan-600 hover:bg-cyan-400 transition ease-in-out duration-150 cursor-not-allowed'\n79.\t  className='animate-spin -ml-1 mr-3 h-5 w-5 text-white'\n80.\t  \n        \n\n## React Route Important part: \n\nএই রিএক্ট রাউটারের মেইন জিনিস কিন্তু বেশি না। জাস্ট ছয়টা জিনিস। \n\n```\n১. রিএক্ট রাউটার ইন্স্টল্ করো।  \n\n২. প্রথমেই তোমাকে BrowserRouter ইউজ করতে হবে index.js এ। \n\n৩. তারপর আমরা App.js এ গিয়ে Routes সেট করবো। \n\n৪. তার ভিতরে থাকবে এক একটা Route  \n\n৫. সেইসব Route এর মধ্যে থাকবে path \n\n৬. আর Route এর মধ্যে element নামে আরেকটা prop সেট করে দিবো। তাহলেই কাজ শেষ।  \n```\n\nএর পাশাপাশি ছয়টা খুচরা জিনিস আছে। যেমন \n```\n১. ৪০৪ রাউট সেট করা \n\n২. ডাইনামিক রাউট সেট করা \n\n৩. রাউট প্যারামিটার পড়া \n\n৪. ডাইনামিক রাউট অনুসারে ডাটা লোড করতে পারা \n\n৫. Link ইউজ করতে পারা \n\n৬. useNavigate দিয়ে ক্লিক করতে পারা \n```\nআর দুটো এডভান্সড জিনিস আছে। \n\n```\n১. Active Link \n\n২. Nested রাউট \n```\n\n## রাউটার সেটাপ করার জাস্ট পাঁচটা স্টেপ-\n\n১. প্রথমেই তোমাকে BrowserRouter ইউজ করতে হবে index.js এ। \n\n২. তারপর আমরা App.js এ গিয়ে Routes সেট করবো। \n\n৩. তার ভিতরে থাকবে এক একটা Route  \n\n৪. সেইসব Route এর মধ্যে থাকবে path \n\n৫. আর Route এর মধ্যে element নামে আরেকটা prop সেট করে দিবো তাহলেই কাজ শেষ।  \n\n\n### Special Notes\n\nTo install recharts run:\n\nnpm install recharts --force\n\nIf you see the following warning, ignore it for now.\nWarning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot\n\nFor the dashboard, you can modify the data provided in data.json and you can load the data the way you want.\n[optional] To display ratings, you can use font-awesome stars or you can use react ratings website [class component might make it confusing] react rating github\nreact rating demo\n\n```\nnpm install --save react-rating\ninstall font-awesome for react\nimport Rating from 'react-rating';\nimport { faStar } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\n\u003cRating\n    initialRating={3.5}\n    emptySymbol={\u003cFontAwesomeIcon icon={faStar} /\u003e}\n    fullSymbol={\u003cFontAwesomeIcon style={{color: 'goldenrod'}} icon={faStar} /\u003e}\n    readonly\n\u003e\u003c/Rating\u003e\n```\n\nPlease note, you will see an warning while using react rarting react-dom.development.js:86 Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamidhosen42%2Fnodejs-react-and-firebase-and-databse-notes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhamidhosen42%2Fnodejs-react-and-firebase-and-databse-notes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamidhosen42%2Fnodejs-react-and-firebase-and-databse-notes/lists"}