├── .env.local.example ├── .eslintrc.json ├── .gitignore ├── .idea ├── .gitignore ├── inspectionProfiles │ └── Project_Default.xml ├── material_theme_project_new.xml ├── modules.xml ├── reactive-accilarator-documantation.iml └── vcs.xml ├── CONTRIBUTING.md ├── LICENCE ├── README.md ├── SECURITY.md ├── app ├── favicon.ico ├── globals.css ├── layout.js ├── page.js └── ~offline │ └── page.jsx ├── components ├── Counters.jsx ├── ThemeSwitcher.jsx └── pwa-install.jsx ├── index.html ├── index.js ├── jsconfig.json ├── next.config.mjs ├── package-lock.json ├── package.json ├── pages ├── _app.jsx ├── _meta.json └── reactive-accilarator │ ├── Firebase.mdx │ ├── Firebase │ ├── Authentication-authorization.mdx │ └── _meta.json │ ├── React-js │ ├── _meta.json │ ├── module-1 │ │ ├── React-installation-and-development-environment-setup.mdx │ │ ├── _meta.json │ │ ├── basics-of-react-component.mdx │ │ ├── component-export-import.mdx │ │ ├── conditional-renderaing.mdx │ │ ├── introduction-to-react.mdx │ │ ├── javascript-in-jsx.mdx │ │ ├── jsx-markup.mdx │ │ ├── pure-components.mdx │ │ ├── rendering-list.mdx │ │ ├── understanding-props.mdx │ │ ├── vertual-dom.mdx │ │ └── your-ui-as-a-tree.mdx │ ├── module-2 │ │ ├── _meta.json │ │ ├── event-propagation.mdx │ │ ├── how-rendering-works.mdx │ │ ├── queueing-state.mdx │ │ ├── responding-to-event.mdx │ │ ├── state-as-a-snapshot.mdx │ │ ├── understanding-state.mdx │ │ ├── updateing-array-in-state.mdx │ │ └── updating-object-in-state.mdx │ ├── module-3 │ │ ├── _meta.json │ │ ├── choosing-the-state-structure.mdx │ │ ├── declaretive-imperative.mdx │ │ ├── extracting-state-logic-into-reducer.mdx │ │ ├── lifting-state-up.mdx │ │ ├── passing-data-deeply-with-context.mdx │ │ ├── preserving-and-reseting-state.mdx │ │ ├── reseting-state-at-same-position.mdx │ │ ├── scaling-up-with-reducer-and-context.mdx │ │ └── thinking-about-ui.mdx │ ├── module-4 │ │ ├── _meta.json │ │ ├── effect-react-to-reactive-values.mdx │ │ ├── fatching-data.mdx │ │ ├── flushing-state-updates-synchronously.mdx │ │ ├── forwarding-refs.mdx │ │ ├── handling-effects-firing-twice.mdx │ │ ├── manipulating-dom-with-refs.mdx │ │ ├── performance-optimization.mdx │ │ ├── referencing-values-with-refs.mdx │ │ ├── removing-effect-dependecies.mdx │ │ ├── reusing-logic-with-custom-hook.mdx │ │ ├── seperating-events-from-effects.mdx │ │ ├── syncronising-with-effets-overview.mdx │ │ ├── the-lifecycle-of-an-effect.mdx │ │ ├── useImperativeHandle.mdx │ │ └── you-might-not-need-an-effect.mdx │ └── module-5 │ │ ├── _meta.json │ │ ├── react-lazy-load.mdx │ │ └── react-suspense-and-error-bounderies.mdx │ ├── Tanstack-query │ └── installation.mdx │ ├── _meta.json │ ├── framer-motion.mdx │ ├── frontend-focus-topic.mdx │ ├── git.mdx │ ├── index.md │ ├── javascript-refresher.mdx │ ├── javascript │ ├── _meta.json │ ├── array-methods.mdx │ ├── asyncronus.mdx │ ├── closures.mdx │ ├── conditionals.mdx │ ├── dom.mdx │ ├── event-handlers.mdx │ ├── event-loops.mdx │ ├── execution-context.mdx │ ├── fetch.mdx │ ├── functions.mdx │ ├── index.mdx │ ├── localstorage-sessionstorage.mdx │ ├── loops.mdx │ ├── object-methods.mdx │ ├── oop.mdx │ ├── operators-expressions.mdx │ ├── scopes-hoisting.mdx │ ├── setup.mdx │ ├── string-methods.mdx │ ├── this.mdx │ └── variables.mdx │ ├── nextjs.mdx │ ├── nextjs │ ├── Installation.mdx │ ├── _meta.json │ ├── defining-route.mdx │ ├── linking-navigation.mdx │ ├── loading-streaming.mdx │ ├── pages-layouts.mdx │ └── project-strcuture.mdx │ ├── react-hook-form.mdx │ ├── react-router-dom.mdx │ ├── redux.mdx │ ├── tanstack-query.mdx │ ├── tips-tricks │ ├── Image-upload-with-drag-and-drop-with-nextjs.mdx │ ├── _meta.json │ └── nextAuth-refresh-token-rotation-with-oAuth.mdx │ └── typeScript │ ├── _meta.json │ ├── basic-types.mdx │ ├── classes-objects.mdx │ ├── installing-typescript.mdx │ ├── interface-alias.mdx │ ├── object-property-modifier.mdx │ └── type-inferance-annotation.mdx ├── postcss.config.mjs ├── providers └── theme-provider.jsx ├── public ├── AppImages │ ├── android │ │ ├── android-launchericon-144-144.png │ │ ├── android-launchericon-192-192.png │ │ ├── android-launchericon-48-48.png │ │ ├── android-launchericon-512-512.png │ │ ├── android-launchericon-72-72.png │ │ └── android-launchericon-96-96.png │ └── ios │ │ └── 1024.png ├── DOM.png ├── Propagation.svg ├── React-tree.png ├── UISTATES │ ├── added.png │ ├── counters.png │ ├── deleted.png │ ├── empty.png │ ├── emptyCounter.png │ ├── error.png │ ├── reacttree.png │ ├── resetstate.png │ ├── state.png │ ├── submitting.png │ ├── success.png │ ├── typing.png │ ├── unchecked.png │ └── updatedCounterB.png ├── UseEffect lifecycle.png ├── capturetrue.png ├── dif.png ├── div with an event listener.png ├── fallback-ce627215c0e4a9af.js ├── filetree.png ├── hookimages │ ├── UseEffect-lifecycle.png │ └── useREducer.png ├── image-uploader--.jpg ├── image-uploader-.jpg ├── image-uploader.jpg ├── manifest.json ├── meta.png ├── next.svg ├── output.png ├── primitive.png ├── ref1.png ├── ref2.png ├── screenshot.png ├── script.png ├── state.svg ├── sw.js ├── swe-worker-5c72df51bb1f6ee0.js ├── vercel.svg └── workbox-f1770938.js ├── tailwind.config.js ├── theme.config.jsx └── yarn.lock /.env.local.example: -------------------------------------------------------------------------------- 1 | 2 | # put the following to local .env file to stop the app's local work-box service worker from caching the app 3 | NODE_ENV = 'development' -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | # Editor-based HTTP Client requests 5 | /httpRequests/ 6 | -------------------------------------------------------------------------------- /.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /.idea/material_theme_project_new.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/reactive-accilarator-documantation.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # CONTRIBUTING 2 | 3 | When contributing to this repository, please first discuss the change you wish to make via [issue](https://github.com/Deveripon/reactive-accelarator/issues), [email](mailto:devripon.io@gmail.com), or any other method with the owners of this repository before making a change. and **Always create a new branch before pushing you changes** 4 | 5 | ## How to work on docs 6 | 7 | Current Files and Folder Structure is 8 | 9 | ![Filetree](./public/filetree.png) 10 | 11 | - **In this tree we are working on, you can create a file with the of the lesson you want to add documentation with .mdx extension.** 12 | - In co-located `_meta.json` file you can define the lesson name as object which will be show in UI. 13 | 14 | Example: 15 | 16 | ![meta](./public/meta.png) 17 | 18 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Shahadat Hussain Ripon 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Reactive Accilarator 2 | 3 | **This is documantation project to make document my learing from Reactive Accilarator Course from [LWS-Learn With Sumt](https://learnwithsumt.com) Created with [NextJS](http://nextjs.org)** 4 | 5 | ## Getting Started 6 | 7 | To run this project to you local development mode, First -> run the development server: 8 | 9 | ```bash 10 | npm run dev 11 | # or 12 | yarn dev 13 | # or 14 | pnpm dev 15 | # or 16 | bun dev 17 | ``` 18 | 19 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 20 | 21 | ## Contribution Guidelines 22 | 23 | When contributing to this repository, please first discuss the change you wish to make via [issue](https://github.com/Deveripon/reactive-accelarator/issues), [email](mailto:devripon.io@gmail.com), or any other method with the owners of this repository before making a change. 24 | 25 | ## How to work on docs 26 | 27 | Current Files and Folder Structure is 28 | 29 | ![Filetree](./public/filetree.png) 30 | 31 | - **In this tree we are working on, you can create a file with the of the lesson you want to add documentation with .mdx extension.** 32 | - In co-located `_meta.json` file you can define the lesson name as object which will be show in UI. 33 | 34 | Example: 35 | 36 | ![meta](./public/meta.png) 37 | 38 | ## Commiting 39 | 40 | Try to use conversational Commit when you commiting. like, `Doc Update : I am updated the Lesson XX documentation Commiting ` 41 | 42 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | Reporting Security Issues 2 | 3 | We want everyone who uses or helps with the project to tell us quickly if they find a problem that could make the project less safe. If you see something like this or think there's a problem related to safety, please do these things: 4 | 5 | Send an email to our team devripon.io@gmail.com, and tell us whats the problem is in as much detail as you can. In the subject line of your email, make it clear that it's about security. For example, you can write something like "A Problem with Safety - Project Name." Explain what the safety problem is in a simple and short way. If you have any proof, like pieces of code or logs, include them in your email. Don't talk about the problem openly or on the internet until we've had a chance to look at it. We want to fix it before it becomes a bigger issue. 6 | 7 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Deveripon/reactive-accelarator/cca6bfc629189640173124b098d04b6131b31739/app/favicon.ico -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --foreground-rgb: 0, 0, 0; 7 | --background-start-rgb: 214, 219, 220; 8 | --background-end-rgb: 255, 255, 255; 9 | } 10 | 11 | @media (prefers-color-scheme: dark) { 12 | :root { 13 | --foreground-rgb: 255, 255, 255; 14 | --background-start-rgb: 0, 0, 0; 15 | --background-end-rgb: 0, 0, 0; 16 | } 17 | } 18 | 19 | @layer utilities { 20 | .text-balance { 21 | text-wrap: balance; 22 | } 23 | } 24 | 25 | -------------------------------------------------------------------------------- /app/layout.js: -------------------------------------------------------------------------------- 1 | import { SpeedInsights } from "@vercel/speed-insights/next"; 2 | import { Inter } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const inter = Inter({ subsets: ["latin"] }); 6 | 7 | const APP_NAME = "রিয়াক্টিভ এক্সিলারেটর"; 8 | const APP_DEFAULT_TITLE = "রিয়াক্টিভ এক্সিলারেটর ডকুমেন্টেশন"; 9 | const APP_TITLE_TEMPLATE = "%s – রিয়াক্টিভ এক্সিলারেটর"; 10 | const APP_DESCRIPTION = 11 | "রিয়াক্ট ও নেক্সট জে এস এর বাংলায় লিখা ডকুমেন্টেশন যা একজন ডেভেলপারকে রিয়াক্ট ও নেক্সট জে এস নিজের ভাষায় আরও সহজ করে বুঝতে সাহায্য করবে।"; 12 | 13 | export const metadata = { 14 | applicationName: APP_NAME, 15 | title: { 16 | default: APP_DEFAULT_TITLE, 17 | template: APP_TITLE_TEMPLATE, 18 | }, 19 | description: APP_DESCRIPTION, 20 | manifest: "/manifest.json", 21 | appleWebApp: { 22 | capable: true, 23 | statusBarStyle: "default", 24 | title: APP_DEFAULT_TITLE, 25 | // startUpImage: [], 26 | }, 27 | formatDetection: { 28 | telephone: false, 29 | }, 30 | openGraph: { 31 | type: "website", 32 | siteName: APP_NAME, 33 | title: { 34 | default: APP_DEFAULT_TITLE, 35 | template: APP_TITLE_TEMPLATE, 36 | }, 37 | description: APP_DESCRIPTION, 38 | }, 39 | twitter: { 40 | card: "summary", 41 | title: { 42 | default: APP_DEFAULT_TITLE, 43 | template: APP_TITLE_TEMPLATE, 44 | }, 45 | description: APP_DESCRIPTION, 46 | }, 47 | }; 48 | 49 | export const viewport = { 50 | themeColor: "#000000", 51 | }; 52 | 53 | export default function RootLayout({ children }) { 54 | return ( 55 | 56 | 57 | {children} 58 | 59 | 60 | 61 | ); 62 | } 63 | 64 | -------------------------------------------------------------------------------- /app/page.js: -------------------------------------------------------------------------------- 1 | import PwaInstall from "@/components/pwa-install"; 2 | import Link from "next/link"; 3 | 4 | const page = () => { 5 | return ( 6 |
7 | 10 | 👉 Reactive accelerator 11 | 12 | 13 |
14 | ); 15 | }; 16 | 17 | export default page; 18 | 19 | -------------------------------------------------------------------------------- /app/~offline/page.jsx: -------------------------------------------------------------------------------- 1 | import PwaInstall from "@/components/pwa-install"; 2 | import Link from "next/link"; 3 | 4 | const page = () => { 5 | return ( 6 |
7 | 10 | 👉 Reactive accelerator 11 | 12 | 13 |
14 | ); 15 | }; 16 | 17 | export default page; 18 | 19 | -------------------------------------------------------------------------------- /components/Counters.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Counters = () => { 4 | return
Counters
; 5 | }; 6 | 7 | export default Counters; 8 | -------------------------------------------------------------------------------- /components/ThemeSwitcher.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { useTheme } from "next-themes"; 3 | import { useEffect, useState } from "react"; 4 | const ThemeSwitcher = () => { 5 | const [mount, setMount] = useState(false); 6 | const { systemTheme, theme, setTheme } = useTheme(); 7 | const currentTheme = theme === "system" ? systemTheme : theme; 8 | useEffect(() => { 9 | setMount(true); 10 | }, []); 11 | console.log(currentTheme); 12 | return mount ? ( 13 |
14 | 38 |
39 | ) : null; 40 | }; 41 | export default ThemeSwitcher; 42 | -------------------------------------------------------------------------------- /components/pwa-install.jsx: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | "use client"; 3 | import { useEffect, useState } from "react"; 4 | 5 | import Link from "next/link"; 6 | const PwaInstall = () => { 7 | const [deferredPrompt, setDeferredPrompt] = useState(null); 8 | 9 | useEffect(() => { 10 | const handleBeforeInstallPrompt = (event) => { 11 | // Prevent the default installation prompt 12 | event.preventDefault(); 13 | // Store the event for later use 14 | setDeferredPrompt(event); 15 | }; 16 | 17 | // Listen for the beforeinstallprompt event 18 | window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt); 19 | // warn the user if the app is already installed 20 | 21 | // Cleanup: remove the event listener when the component is unmounted 22 | return () => { 23 | window.removeEventListener( 24 | "beforeinstallprompt", 25 | handleBeforeInstallPrompt, 26 | ); 27 | }; 28 | }, []); 29 | const handleEmailOpen = (event) => { 30 | event.preventDefault(); 31 | window.location.href = "mailto:ঋণাত্মক - ২১@gmail.com"; 32 | 33 | }; 34 | const handleInstallClick = (event) => { 35 | event.preventDefault(); 36 | if (deferredPrompt) { 37 | // Show the installation prompt 38 | deferredPrompt.prompt(); 39 | 40 | // Wait for the user to respond to the prompt 41 | deferredPrompt.userChoice.then((choiceResult) => { 42 | if (choiceResult.outcome === "accepted") { 43 | console.log("User accepted the installation"); 44 | } else { 45 | console.log("User dismissed the installation"); 46 | } 47 | 48 | // Reset the deferredPrompt variable 49 | setDeferredPrompt(null); 50 | }); 51 | } 52 | }; 53 | 54 | return ( 55 | 61 | ⬇️ Download app 62 | 63 | ); 64 | }; 65 | 66 | export default PwaInstall; 67 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Deveripon/reactive-accelarator/cca6bfc629189640173124b098d04b6131b31739/index.js -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./*"] 5 | } 6 | } 7 | } 8 | 9 | -------------------------------------------------------------------------------- /next.config.mjs: -------------------------------------------------------------------------------- 1 | import { 2 | PHASE_DEVELOPMENT_SERVER, 3 | PHASE_PRODUCTION_BUILD, 4 | } from "next/constants.js"; 5 | 6 | import nextra from "nextra"; 7 | /** @type {import('next').NextConfig} */ 8 | const config = {}; 9 | const withNextra = nextra({ 10 | theme: "nextra-theme-docs", 11 | themeConfig: "./theme.config.jsx", 12 | defaultShowCopyCode: true, 13 | }); 14 | 15 | 16 | 17 | 18 | const nextConfigFunction = async (phase) => { 19 | if (phase === PHASE_DEVELOPMENT_SERVER || phase === PHASE_PRODUCTION_BUILD) { 20 | const withPWA = (await import('@ducanh2912/next-pwa')).default({ 21 | dest: 'public', 22 | cacheOnFrontEndNav: true, 23 | aggressiveFrontEndNavCaching: true, 24 | reloadOnOnline: true, 25 | swcMinify: true, 26 | disable: process.env.NODE_ENV === 'development', 27 | // disable: false, 28 | workboxOptions: { 29 | disableDevLogs: true, 30 | }, 31 | fallbacks: { 32 | // Failed page requests fallback to this. 33 | document: '/~offline', 34 | }, 35 | }) 36 | return withPWA(withNextra(config)) 37 | } 38 | return nextConfig 39 | } 40 | export default nextConfigFunction 41 | 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mdx", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@ducanh2912/next-pwa": "^10.2.9", 13 | "@vercel/speed-insights": "^1.0.12", 14 | "lodash": "^4.17.21", 15 | "next": "14.2.7", 16 | "next-themes": "^0.3.0", 17 | "nextra": "^2.13.4", 18 | "nextra-theme-docs": "^2.13.4", 19 | "nodemon": "^3.1.7", 20 | "react": "^18", 21 | "react-dom": "^18" 22 | }, 23 | "devDependencies": { 24 | "eslint": "^8", 25 | "eslint-config-next": "14.2.7", 26 | "postcss": "^8", 27 | "tailwindcss": "^3.4.1", 28 | "webpack": "^5.95.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /pages/_app.jsx: -------------------------------------------------------------------------------- 1 | // These styles apply to every route in the application 2 | import "../app/globals.css"; 3 | 4 | export default function App({ Component, pageProps }) { 5 | return ; 6 | } 7 | 8 | -------------------------------------------------------------------------------- /pages/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "reactive-accilarator": { 3 | "title": "Reactive Accelerator", 4 | "type": "page" 5 | } 6 | } 7 | 8 | -------------------------------------------------------------------------------- /pages/reactive-accilarator/Firebase.mdx: -------------------------------------------------------------------------------- 1 | **আমরা চেষ্টা করছি খুব দ্রুত পুরো ডকুমেন্টটিকে আপডেট করতে** -------------------------------------------------------------------------------- /pages/reactive-accilarator/Firebase/Authentication-authorization.mdx: -------------------------------------------------------------------------------- 1 | ### অথেন্টিকেশন এবং অথরাইজেশন বলতে কি বুঝায় ? 2 | #### অথেন্টিকেশন (Authentication) কী? 3 | অথেন্টিকেশন মানে হলো প্রমাণ করা যে, "আপনি আসলেই সেই ব্যক্তি তো?" সহজ ভাষায় বলতে গেলে, যখন আপনি কোন অ্যাকাউন্টে ঢোকার চেষ্টা করেন, তখন সিস্টেম আপনাকে জিজ্ঞেস করে আপনার পরিচয় কীভাবে প্রমাণ করতে পারবেন। যেমন ধরুন, পাসওয়ার্ড, ওটিপি (যেমন মোবাইলে আসা কোড), ফিঙ্গারপ্রিন্ট – এগুলো ব্যবহার করে অথেন্টিকেশন করা হয়। 4 | 5 | **উদাহরণ**: ফেসবুকে ঢোকার সময় যখন আপনি ইমেইল এবং পাসওয়ার্ড দেন, তখন ফেসবুক নিশ্চিত হয় যে এই অ্যাকাউন্টের মালিক আপনি। 6 | 7 | #### অথরাইজেশন (Authorization) কী? 8 | অথরাইজেশন হলো, "আপনি কোন কোন জায়গায় ঢুকতে পারবেন, আর কি কি করতে পারবেন।" অথেন্টিকেশন হয়ে গেলে, সিস্টেম ঠিক করে দেয় আপনার কোন কোন ফিচার বা তথ্য অ্যাক্সেস করার অনুমতি আছে। সহজভাবে বলতে গেলে, আপনি কি করতে পারবেন আর কি পারবেন না, সেটা এখানে ঠিক করা হয়। 9 | 10 | **উদাহরণ**: ফেসবুকে ঢোকার পর আপনি আপনার নিজের প্রোফাইল, ফ্রেন্ডলিস্ট দেখতে পারবেন, কিন্তু অন্য কারো প্রোফাইল এডিট করতে পারবেন না। অথরাইজেশন সেখানেই ঠিক করে দেয় যে আপনার অ্যাক্সেস কন্ট্রোল থাকবে কতোটা। 11 | 12 | **অথেন্টিকেশন আর অথরাইজেশনের পার্থক্য** 13 | 14 | 15 | অথেন্টিকেশন হলো "আপনি কে?" 16 | 17 | অথরাইজেশন হলো "আপনি কি করতে পারবেন?" 18 | 19 | 20 | **আমরা চেষ্টা করছি খুব দ্রুত পুরো ডকুমেন্টটিকে আপডেট করতে** -------------------------------------------------------------------------------- /pages/reactive-accilarator/Firebase/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "Authentication-authorization": "Firebase : Authentication & Authorization" 3 | } 4 | -------------------------------------------------------------------------------- /pages/reactive-accilarator/React-js/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "module-1": "Getting Started With React : Describing The UI", 3 | "module-2": "Going Deep into React: Adding Interactivity", 4 | "module-3": "React State Management Deep Dive", 5 | "module-4": "React Escape Hatches", 6 | "module-5": "React Beyond Basics: Advanced Concepts" 7 | } 8 | 9 | -------------------------------------------------------------------------------- /pages/reactive-accilarator/React-js/module-1/React-installation-and-development-environment-setup.mdx: -------------------------------------------------------------------------------- 1 | import { Steps } from "nextra/components"; 2 | 3 | **রিয়াক্ট জে এস ইন্সটল করা এবং ইডীটর সেটআপ করা ।** 4 | 5 | 6 | 7 | ### কমান্ড প্রমট এর মাদ্ধ্যমে রিয়াক্ট ইন্সটল করা । 8 | 9 | ```bash 10 | npm create vite@latest --template react 11 | ``` 12 | 13 | ### Follow the command 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /pages/reactive-accilarator/React-js/module-1/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "introduction-to-react": "1.1 - Introduction to React", 3 | "React-installation-and-development-environment-setup": "1.2 - React-installation-and-development-environment-setup", 4 | "vertual-dom": "1.3 - How React Works: Virtual Dom", 5 | "basics-of-react-component": "1.4 - Basics of React Component: Your First Component", 6 | "component-export-import": "1.5 - Basics of React Component: Importing & Exporting Components", 7 | "jsx-markup": "1.6 - Basics of JSX: React's Markup - Writing Markup with JSX", 8 | "javascript-in-jsx": "1.7 - Basics of JSX: React's Markup - JavaScript in JSX with Curly Braces", 9 | "understanding-props": "1.8 - Understanding Props - Passing Props to a Component", 10 | "conditional-renderaing": "1.9 - Conditional Rendering", 11 | "rendering-list": "1.10 - Rendering Lists", 12 | "pure-components": "1.11 - Pure Components: Keeping Components Pure", 13 | "your-ui-as-a-tree": "1.12 - Your UI as a Tree" 14 | } 15 | 16 | -------------------------------------------------------------------------------- /pages/reactive-accilarator/React-js/module-1/basics-of-react-component.mdx: -------------------------------------------------------------------------------- 1 | import { Steps } from "nextra/components"; 2 | 3 | import { Callout } from "nextra/components"; 4 | 5 | ## `Components` কি ? 6 | 7 | `Component` হলো রিয়াক্টের কোর কনসেপ্টগুলোর মধ্যে একটি । এটিকে UI বানানোর বিল্ডিং ব্লক বলা হয়ে থাকে । UI এর প্রতিটা অংশের কোড, যা বার বার রি-ইউজ করা যায় সেগুলোকে একেকটা কম্পোনেন্ট বলা যায়। একটি ছোট বাটনও একটা কম্পোনেট হতে পারে । 8 | 9 | রিয়াক্ট আমাদের মার্কাপ গুলোকে ছোট ছোট রি-ইউজেবল কোড ব্লকে এ লিখতে সাহায্য করে,যার একেকটি ব্লক হলো একেকটি কম্পোনেন্ট। 10 | 11 | তবে কম্পোনেন্ট বানানোর জন্য কিছু নিয়ম রয়েছে যা নিচে দেখানো হয়েছে। 12 | 13 | ## কিভাবে একটি রিয়াক্ট `Component` বানাতে হয় ? 14 | 15 | রিয়াক্ট কম্পোনেট হলো একটি জাভাস্ক্রিপ্ট ফাংশন। যাতে আমাদের মার্কাপের সাথে জাভাস্ক্রিপ্টের সংমিশ্রণ থাকে। 16 | 17 | **রিয়াক্ট কম্পোনেন্টের সিনট্যাক্স** 18 | 19 | ```javascript showLineNumbers filename="profile.jsx" 20 | export default function Profile() { 21 | return ( 22 | Katherine Johnson 26 | ); 27 | } 28 | ``` 29 | 30 | **একটি কম্পোনেন্ট বানাতে যেসব স্টেপ ফলো করতে হয়,তা হলোঃ** 31 | 32 | 33 | ### কম্পোনেন্টকে এক্সপোর্ট করা 34 | 35 | `export default` ব্যাবহার করে একটা কম্পোনেন্টকে রি-ইউজেবল করতে হয়, যাতে আমরা অন্য ফাইলে কম্পোনেন্টটিকে `import` 36 | করে ব্যাবহার করতে পারি। 37 | 38 | ### ফাংশন ডিফাইন করা 39 | `export default` এর পর একটা নেমড ফাংশন ডিফাইন করতে হয়। 40 | ```javascript showlineNumbers 41 | export default function Profile(){} 42 | ``` 43 | 44 | 45 | `React Component` বানাতে হলে অবশ্যই ফাংশনের নামের প্রথম অক্ষর `Capital later` এ লিখতে হবে,নাহলে তা কাজ করবেনা। 46 | 47 | 48 | ### ফাংশনের ভিতরে মার্কাপ যুক্ত করা 49 | 50 | ফাংশনের ভিতরে `JSX (Javascript XML)` সিনট্যাক্সে মার্কাপ রিটার্ন করতে হয়। 51 | 52 | ```javascript showLineNumbers {2} 53 | export default function Profile() { 54 | return img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /> 55 | } 56 | ``` 57 | **`return Statement` যদি এক লাইনের বেশি লিখতে হয় তাহলে `()` এর ভিতরে লিখতে হয়** 58 | উদাহরণঃ 59 | ```javascript showLineNumbers filename="Profile.jsx" {2-6} 60 | export default function Profile() { 61 | return ( 62 |
63 | Katherine Johnson 64 |
65 | ) 66 | } 67 | ``` 68 | 69 | 70 | 71 | ## কম্পোনেট কিভাবে ব্যাবহার করতে হয়ঃ 72 | 73 | একটা কম্পোনেন্ট বানানোর পর সেম ফাইলে অন্য আরেকটা কম্পোনেন্ট এর ভিতরে অথবা চাইলে অন্য ফাইলে কম্পোনেন্ট `import` করে ব্যাবহার করা যায়। 74 | 75 | উদাহরনঃ 76 | 77 | ```javascript showLineNumbers filename="Gallery.jsx" 78 | import Profile from "Profile"; 79 | export default function Gallery() { 80 | return ( 81 |
82 |

Amazing scientists

83 | 84 | 85 | 86 |
87 | ); 88 | } 89 | ``` 90 | 91 | ## কম্পোনেন্ট নেস্টিং করার ক্ষেত্রে যেসব রুলস মানতে হয়ঃ 92 | 93 | **`Rules:1` - যদি এমন কম্পোনেন্ট হয়,যেটা খুব ছোট এবং রি-ইউজ হবেনা সেটা চাইলে একই ফাইলে লেখা যায়,এবং ব্যাবহার করা যায়। কিন্তু যদি কম্পোনেন্ট অনেক বড় হয় এবং `interactivity` বেশি হয়, এবং বিভিন্ন জায়গায় রি-ইউজ করতে হয় তাহলে আলাদা আলাদা ফাইলে কম্পোনেন্ট বানাতে হবে।** 94 | 95 | **`Rules:2` - একটা কম্পোনেন্ট এর ভিতর আরেকটা কম্পোনেন্টকে নেস্টেড করা যাবে,কিন্তু একটা কম্পোনেট এর ভিতর অন্য আরেকটা ফাংশন ডেফিনেশন নেস্টেড করা যাবেনা।** 96 | 97 | -------------------------------------------------------------------------------- /pages/reactive-accilarator/React-js/module-1/component-export-import.mdx: -------------------------------------------------------------------------------- 1 | ## রিয়াক্টে কিভাবে `import & export` করতে হয়? 2 | 3 | **রিয়াক্টে দুইভাবে কম্পোনেন্ট `import & export` করা যায়ঃ ** 4 | 5 | 1. `default export and import` 6 | 2. `named export and import` 7 | 8 | ## `default export and import` 9 | 10 | **উদাহরনঃ** 11 | 12 | ### `default export` 13 | 14 | ```javascript showLineNumbers filename="Gallery.js" 15 | export default function Gallery() { 16 | return; //Jsx will return 17 | } 18 | ``` 19 | 20 | তাছাড়া আরেকভাবে `default export` করা যায়, 21 | 22 | ```javascript showLineNumbers filename="Gallery.js" 23 | function Gallery() { 24 | return; //Jsx will return 25 | } 26 | export default Gallery; 27 | ``` 28 | 29 | ### `default import` 30 | 31 | ```javascript showLineNumbers filename="App.js" 32 | import Gallery from "Gallery"; // এখানে .js বা .jsx না লিখলেও কোন সমস্যা নেই 33 | ``` 34 | 35 | **`default import` এর ক্ষেত্রে আমরা যেকোন নামে কম্পোনেন্ট `import` করতে পারি। তবে, যেই নামে কম্পোনেন্ট `import` করা হবে সেই নামেই ব্যাবহার করতে হবে।** 36 | 37 | ## `named export and import` 38 | 39 | **উদাহরনঃ** 40 | 41 | ### `named export` 42 | 43 | ```javascript showLineNumbers filename="Gallery.js" {1} 44 | export function Gallery() { 45 | return; //Jsx will return 46 | } 47 | ``` 48 | 49 | **`named export` এর মাধ্যমে আমরা চাইলে একটা ফাইল থেকে একাধিক কম্পোনেন্ট এক্সপোর্ট করতে পারি, যেমনঃ** 50 | 51 | ```javascript showLineNumbers filename="Gallery.js" 52 | export function Card() { 53 | return; //Jsx will return 54 | } 55 | 56 | export function Image() { 57 | return; //Jsx will return 58 | } 59 | 60 | export function Profile() { 61 | return; //Jsx will return 62 | } 63 | ``` 64 | 65 | ### `named import` 66 | 67 | ```javascript showLineNumbers filename="App.js" 68 | import { Card, Image, Profile } from "Gallery"; // এভাবে আমরা এক্লাইনেই একাধিক কম্পোনেন্ট ইম্পোর্ট করতে পারি। 69 | ``` 70 | 71 | #### Alias Named Import 72 | 73 | `named import` এর ক্ষেত্রে আমরা চাইলে `Alias` দিয়ে রিনেম করেও কম্পোনেন্ট ইম্পোর্ট করতে পারি। 74 | 75 | ```javascript showLineNumbers filename="App.js" 76 | import { Card as ImageCard } from "Gallery"; 77 | ``` 78 | 79 | -------------------------------------------------------------------------------- /pages/reactive-accilarator/React-js/module-1/conditional-renderaing.mdx: -------------------------------------------------------------------------------- 1 | ## কন্ডিশনাল রেন্ডারিং কি ? 2 | 3 | রিয়াক্টে আমরা কোন শর্তের উপর ডিপেন্ড করে কোন কিছু দেখাতে পারি। আমরা কি দেখাবো আর কি দেখাবোনা তা নির্দিষ্ট লজিকের উপর ভিত্তি করে করতে পারি। এটাকে রিয়াক্টে কন্ডিশনাল রেন্ডারিং বলা হয়। 4 | 5 | আমরা বেশ কিছু উপায়ে রিয়াক্টে কন্ডিশনাল রেন্ডারিং করতে পাড়িঃ 6 | 7 | 1. `if else statements` 8 | 9 | 2. `condition ? true : false - Ternery Operator` 10 | 11 | 3. `&& - Logical AND Operator` 12 | 13 | 4. `|| - Logical OR operator` 14 | 15 | 5. `?? - Nullish Coalesing operator` 16 | 17 | ### `if else statements` 18 | 19 | আমাদের যদি অনেক কমপ্লেক্স লজিক থাকে,এবং তার উপর ভিত্তি করে আমাদের কিছু রেন্ডার করা লাগে,তাহলে আমরা `if else statements` এর মাধ্যমে তা করতে পারি। সেক্ষেত্রে আমাদেরকে `JSX` এর বাহিরে `if else statements` ডিফাইন করতে হবে। 20 | 21 | ** উদাহরণঃ** 22 | 23 | ```javascript filename="PackingList.jsx" showLineNumbers 24 | function Item({ name, isPacked }) { 25 | if (isPacked) { 26 | return
  • {name} ✅
    • ; 27 | } 28 | return
  • {name}
    • ; 29 | } 30 | 31 | export default function PackingList() { 32 | return ( 33 |
    34 |

    Sally Ride's Packing List

    35 |
      36 | 40 | 44 | 48 |
    49 |
    50 | ); 51 | } 52 | ``` 53 | 54 | ### `condition ? true : false - Ternery Operator` 55 | 56 | আমাদের কন্ডিশন যদি অনেক বেশি কমপ্লেক্স না হয় এবং ম্যক্সিমাম ২-৩ লেবেলের বেশি ডিপ না হয় তাহলে আমরা খুব সহজেই `JSX` এর ভিতরেই `Ternery Operator` ব্যাবহার করে কন্ডিশনাল রেন্ডারিং করতে পারি। 57 | 58 | ** উদাহরণঃ** 59 | 60 | ```javascript filename="Item.jsx" showLineNumbers 61 | function Item({ name, isPacked }) { 62 | return
  • {isPacked ? name + " ✅" : name}
    • ; 63 | } 64 | ``` 65 | 66 | ### `&& - Logical AND Operator` 67 | 68 | যদি আমাদের কন্ডিশন এমন হয় যে, কন্ডিশন মিললে কিছু রেন্ডার করবো আর না মিললে কিছুই রেন্ডার করবোনা,তাহলে আমরা আরও শর্টকাটে `&& - Logical AND Operator` ব্যাবহার করে সেটা করতে পারি। 69 | 70 | ```javascript filename="Item.jsx" showLineNumbers 71 | function Item({ name, isPacked }) { 72 | return ( 73 |
  • 74 | {name} {isPacked && "✅"} 75 |
    • 76 | ); 77 | } 78 | ``` 79 | 80 | লজিকাল `&&` এর মানে হলো যে, `&&` এর বাম পাশে `truthy` ভ্যালু হয় তাহলে ডান পাশের ভ্যালু রিটার্ন করবে,আর `falsy` হলে কিছুই রিটার্ন করবেনা। 81 | 82 | ```javascript showLineNumbers 83 | let logic = "true"; 84 | logic && "Something to Render"; // এখানে লজিকের ভ্যালু `truthy` হলেই শুধ্যমাত্র `&&` এর ডান পাশে যা থাকবে তা রিটার্ন করবে,আর না হলে কিছুই রিটার্ন করবেনা। 85 | ``` 86 | 87 | তবে এক্ষেত্র মনে রাখতে হবে যে, `&&` এর বাম পাশের ডাটাটাইপ যেন নাম্বার না হয়,কেননা যদি নাম্বার হয় তাহলে নাম্বারের `falsy` ভ্যালু হিসেবে `0`রিটার্ন করে দিবে। 88 | 89 | ### `|| - Logical OR operator` 90 | 91 | লজিকাল `&&` এর মতো `|| - Logical OR operator` ব্যাবহার করেও সেম কাজ করতে পারি। 92 | 93 | ```javascript filename="Item.jsx" showLineNumbers 94 | function Item({ name, isPacked }) { 95 | return ( 96 |
  • 97 | {name} {isPacked || "✅"} 98 |
    • 99 | ); 100 | } 101 | ``` 102 | 103 | তবে লজিকাল `||` এর মানে হলো যে, `||` এর বাম পাশে `falsy` (`0`,`null`,`undefined`,`""`,`false`,`NaN`) ভ্যালু হয় তাহলেই শুধুমাত্র ডান পাশের ভ্যালু রিটার্ন করবে,আর না হলে কিছুই রিটার্ন করবেনা। 104 | 105 | ```javascript showLineNumbers 106 | let logic = "false"; 107 | logic || "Something to Render"; // এখানে লজিকের ভ্যালু `falsy` হলেই শুধ্যমাত্র `||` এর ডান পাশে যা থাকবে তা রিটার্ন করবে,আর না হলে কিছুই রিটার্ন করবেনা। 108 | ``` 109 | 110 | ### `?? - Nullish Coalesing operator` 111 | 112 | যদি কোন ডাইনামিক ভ্যালু `null` অথবা `undefined` হয় তাহলে যদি আমরা কোন কিছু করতে চাই, তাহলে আমরা `?? - Nullish Coalesing operator` ব্যাবহার করে তা করতে পারি। 113 | 114 | ```javascript filename="Item.jsx" showLineNumbers 115 | function Item({ name, isPacked, data }) { 116 | return ( 117 | data ?? ( 118 |
  • 119 | {name} {isPacked || "✅"} 120 |
    • 121 | ) 122 | ); 123 | } 124 | ``` 125 | 126 | -------------------------------------------------------------------------------- /pages/reactive-accilarator/React-js/module-1/introduction-to-react.mdx: -------------------------------------------------------------------------------- 1 | ## `React` কি ? 2 | 3 | রিয়াক্ট হলো ফেসবুকের ডেভেলপ করা একটা জাভাস্ক্রিপ্ট লাইব্রেরি। যা একই সাথে ন্যটিভ এবং ওয়েব ইন্টারফেস ডিজাইন করতে সহায়তা করে থাকে। এটি জাভাস্ক্রিপ্ট এ লেখা জাভাস্ক্রিপ্ট এর ই একটা লাইব্রেরি। 4 | 5 | ফেসবুকের সফটওয়্যার ইঞ্জিনিয়ার Jordan Walke 2011 সালে PHP এর একটা Component Based Framework XHP-js থেকে ইন্সপায়ার হয়ে React.js তৈরি করেন। 2011 সালে এটা প্রথম ফেসবুকের নিউজফিডে ইম্পিলিমেন্ট করা হয় এবং ২০১২ সালে এটা ইন্সটাগ্রামে ব্যবহার করা হয়। ২০১৩ সালে React.js কে ওপেন সোর্স করে দেয় ফেসবুক কোম্পানি। রিয়্যাক্ট এর ওপেন সোর্স গিটহাব রিপোজিটরি [React.js](https://github.com/facebook/react) এ ভ্যানিলা জাভাস্ক্রিপ্ট ছাড়া আর কিচ্ছু নাই। 6 | 7 | ## `React`কেন ব্যাবহার করা উচিত,ভ্যানিলা জাভাস্ক্রিপ্ট এ কি প্রব্লেম ? 8 | 9 | যখন আমরা ভ্যানিলা জাভাস্ক্রিপ্ট এ কাজ করি,তখন যেটা হয় যে, ইউজারের ইন্টারেকশনের কারনে যখন কোথাও কোন UI চেঞ্জ করা লাগে, তখন আমাদের প্রতিটা UI চেঞ্জ ম্যানুয়ালি করে দিতে হয়। কিন্তু `React` এ আমাদের তা করা লাগেনা। রিয়াক্টে ইউজারেরে কোন ইন্টারেকশনের কারনে যখনি কোন ডেটা বা স্টেট চেঞ্জ হয়,তখন UI টা অটোমেটিক রিয়াক্ট করে,এবং UI টা অটোমেটিক চেঞ্জ হয়। এইযে বার বার যেই UI আপডেট করার প্রসেস, এই প্রসেসটাই অটোমেটিক করার জন্যই মূলত রিয়াক্ট তৈরি করাব হয়েছে। 10 | 11 | ## `React` এবং `React DOM` কি ? 12 | 13 | একটা UI বানাতে আসলে তিনটা দিক ম্যানেজ করা লাগে, 14 | 15 | - 1. UI/ DOM টাকে বানানো। 16 | - 2. User Interaction হ্যান্ডেল করা। 17 | - 3. DOM টা ব্রাউজারে রেন্ডার করা । 18 | 19 | `React` এবং `React DOM` এই দুইটা প্যাকেজ আসলে এই কাজগুলোই করে থাকে। 20 | 21 | `React` USER INTERFACE বানাতে হেল্প করে এবং ইউজারের ইন্টারেকশনের কারনে যদি কোন ডাটা চেঞ্জ হয় সেটা ম্যানেজ করে। 22 | 23 | `React DOM` এই প্যাকেজটা DOM টাকে ব্রাউজারে রেন্ডার করে,এবং একবার ব্রাউজারে রেন্ডার করানো হয়ে গেলে সে ডেটা চেঞ্জ এর জন্য অপেক্ষা করতে থাকে,যদি কোথাও কোন ডেটা চেঞ্জ হয়,তাহলে সে তার `VERTUAL DOM` এর সেই চেঞ্জটাকে শনাক্ত করে, UI এর যা যা চেঞ্জ করা লাগে তা করে সরাসরি ব্রাউজারে পেইন্ট করে দেয়। এবং ইউজার আপডেটেড UI তা দেখতে পারে। 24 | 25 | -------------------------------------------------------------------------------- /pages/reactive-accilarator/React-js/module-1/javascript-in-jsx.mdx: -------------------------------------------------------------------------------- 1 | **`JSX`এ আমরা জাভাস্ক্রিপ্ট এবং `HTML` মার্কাপ একসাথে লিখতে পারি। যখনি মার্কাপে কোন ডাইয়ামিক ভ্যালু ব্যাবহার করতে হয়,অথবা কোন লজিকাল অপারেসন চালাতে হয় এমনকি যদি কোন ভ্যারিয়াবল বা অবজেক্টের ভ্যালু এক্সেস করার প্রয়োজন হয়,তখন তা `{ }` ডাবল কার্লি ব্রেসেস এর ভিতরে লিখতে হয়।** 2 | 3 | উদাহরনঃ 4 | 5 | ```javascript filename="Profile.jsx" showLineNumbers {5-6,8} 6 | export default function Profile(name) { 7 | let age = 30; 8 | return ( 9 |
    10 |

    Hello Mr {name}

    // name হলো একটা ডাইনামিক ভ্যালূ যা {} দিয়ে 11 | জাভাস্ক্রিপ্টের মাধ্যমে লেখা হয়েছে। 12 |

    Your age is {age}

    // age একটা ভ্যারিয়েবল থেকে পাওয়া ডাইনামিক ভ্যালু 13 | যা {} দিয়ে লেখা হয়েছে। 14 |

    15 | You are {age >= 21 ? "Eligable" : "Not Eligable"} for Marraige 16 | // এই লাইনে জাভাস্ক্রিপ্টের মাধ্যমে লজিকাল অপারেশন করা হয়েছে 17 |

    18 |
    19 | ); 20 | } 21 | ``` 22 | 23 | অর্থাৎ `{ }` দিয়ে এর ভিতরে আমরা জাভাস্ক্রিপ্টের এক্সপ্রেশন লিখতে পারি। 24 | 25 | ## Using “double curlies”: CSS and other objects in JSX 26 | 27 | উদাহরনঃ 28 | 29 | ```javascript filename="Profile.jsx" showLineNumbers {6,8-11} 30 | export default function Profile(name) { 31 | let age = 30; 32 | return ( 33 |
    41 |

    Hello Mr {name}

    // name হলো একটা ডাইনামিক ভ্যালূ যা {} দিয়ে 42 | জাভাস্ক্রিপ্টের মাধ্যমে লেখা হয়েছে। 43 |

    Your age is {age}

    // age একটা ভ্যারিয়েবল থেকে পাওয়া ডাইনামিক ভ্যালু 44 | যা {} দিয়ে লেখা হয়েছে। 45 |

    46 | You are {age >= 21 ? "Eligable" : "Not Eligable"} for Marraige 47 | // এই লাইনে জাভাস্ক্রিপ্টের মাধ্যমে লজিকাল অপারেশন করা হয়েছে 48 |

    49 |
    50 | ); 51 | } 52 | ``` 53 | 54 | যখন `JSX` এ `{ }` এর ভিতরে কোন অবজেক্ট লিখা লাগবে তখনও একই স্টেপ ফলো করতে হবে, এতে হয়তো মনে হতে পারে যে আমরা দুইবার `{ }` ব্যাবহার করছি, কিন্তু না, প্রথম `{ }` টা হলো জাভাস্ক্রিপ্টের জন্য জায়গা বানানো এবং দ্বিতীয় `{ }` টা হলো অবজেক্ট এর জন্য। 55 | 56 | -------------------------------------------------------------------------------- /pages/reactive-accilarator/React-js/module-1/jsx-markup.mdx: -------------------------------------------------------------------------------- 1 | ## `JSX` কি ? 2 | 3 | `JSX` হলো জাভাস্ক্রিপ্টের একটি সিনট্যাক্স এক্সটেনশন যা আমাদেরকে `HTML` এর মতো মার্কাপ লিখতে সাহায্য করে । `JSX` এর বড় সুবিধা হলো এখানে একই জায়গায়(কম্পোনেন্টের ভিতর) জাভাস্ক্রিপ্টের লজিক ও `HTML` এর মার্কাপ লিখা যায়। যা পরবর্তিতে কোথাও কিছু চেঞ্জ করতে হলে আমাদের এক্সট্রা ফ্লেক্সিবিলিটি দেয়। 4 | 5 | `JSX` দেখতে একদম `HTML` এর মতো হলেও এটা কিন্তু `HTML` নয়,বরং `HTML` এর চাইতে অনেক বেশি `Strict`। `JSX` এ কোথাও কোন ভুল করলে তা সাথে সাথে `Error` দিয়ে দেয়। 6 | 7 | `HTML` এ আমরা শুধুমাত্র স্ট্যাটিক কন্টেন্ট লিখতে পারি,কিন্তু `JSX` এ আমারা ডাইনামিক ভ্যালু ব্যাবহার করতে পারি। 8 | 9 | ## `JSX` লিখার রুলসগুলো কি কি ? 10 | 11 | `JSX` এ বেশ কিছু রুলস ফলো করতে হয় তা হলোঃ 12 | 13 | ### 1. Return a Single root element: 14 | 15 | `JSX` এক্টিমাত্র সিঙ্গেল রুট এলিমেন্ট রিটার্ন করতে হবে, যদি মাল্টিপল এলিমেন্ট রিটার্ন করতে হয় তাহলে অবশ্যই একটি প্যারেন্ট এলিমেন্ট দিয়ে `wrap` করে দিতে হবে। এক্ষেত্র চাইলে `
    ` এলিমেন্ট ব্যাবহার করা যায়। তবে `
    ` ব্যাবহার করলে `HTML` এর `Eliment Tree` তে একটা অতিরিক্ত `
    ` এলিমেন্ট রেন্ডার হয়। 16 | 17 | ❌ ভুল 18 | 19 | ```javascript filename= "Profile.jsx " 20 | export default function Profile() { 21 | return ( 22 |

    Hello Mr XX

    23 |

    Your age is 30

    24 | // এই কোডটা কাজ করবেনা,কারণ দুইটা এলিমেন্টকে রিটার্ন করা হয়েছে 25 | ); 26 | } 27 | ``` 28 | 29 | ✅ সঠিক 30 | 31 | ```javascript filename= "Profile.jsx " 32 | export default function Profile() { 33 | return ( 34 |
    35 |

    Hello Mr XX

    36 |

    Your age is 30

    37 |
    38 | // এই কোডটা কাজ করবে,কারণ দুইটা এলিমেন্টকে একটা প্যারেন্ট `
    ` দিয়ে wrap করা হয়েছে 39 | ); 40 | } 41 | ``` 42 | 43 | তবে আপানর ইচ্ছা যদি হয় যে আপনি কোন অতিরিক্ত `
    ` এলিমেন্ট রেন্ডার করবেন না তাহলে, `<>` এভাবে ব্যাবহার করতে পারেন। এটাকে বলা হয় `Fragment` ট্যাগ। আবার যদি কখনও `Fragment` এর ভিতরে `key` পাস করা লাগে,তাহলে ফ্রাগমেন্ট `<>` এভাবে না লিখে `` এভাবে লিখতে হবে। 44 | 45 | #### কেন আমাদের একটি মূল JSX রিটার্ন করতে হয়? 46 | 47 | **Credit to : Saffaullah Shuvo** 48 | 49 | Well, যে কোন প্রোগ্রামিং এই function থেকে কেবল একটি data type/structure এর ডেটা রিটার্ন করা যায়। যেমন একটি সিম্পল নাম্বার অথবা কোন কমপ্লেক্স ডেটা স্ট্রাকচার, 50 | 51 | ```javascript 52 | function returnOne() { return 1; } // দুইটা নাম্বার রিটার্ন করা কি সম্ভব? 53 | function returnTwo() { return (100 500) } // এটা একটা syntax error // তারমানে Compiler এইরকম syntax সাপোর্ট করেনা 54 | 55 | ``` 56 | 57 | তাহলে দুইটা নাম্বার কি রিটার্ন করা যাবে না? যাবে- 58 | 59 | ```javascript 60 | function returnTwo() { return [100, 500]; // আরো অনেকভাবেই করা যায় } 61 | ``` 62 | 63 | JSX গুলা যেহেতু javascript Object তাই 64 | 65 | ```javascript 66 | function returnTwoJSX() { 67 | return (

    Hi

    Hello

    ) 68 | } 69 | // Behind the scene 70 | function returnTwoJSX() { 71 | return ( 72 | {type: 'h1', props: { children: 'Hi'}} // object1 73 | {type: 'h2', props: { children: 'Hello'}} // object2 74 | ) 75 | } 76 | // তাই এটাও syntax error 77 | 78 | ``` 79 | 80 | কিন্তু আমরা একটা Array এর ভিতরে রেখে কিংবা একটা প্যারেন্ট এলিমেন্টের ভিতরে রেখে একটা ডেটা হিসেবেই return করতে পারি। 81 | 82 | - সল্যুশন ১ - প্যারেন্ট এলিমেন্ট দিয়ে Wrap করে দেয়া 83 | 84 | ```javascript 85 | function returnParentJSX() { 86 | return ( 87 |
    88 |

    Hi

    89 |

    Hello

    90 |
    91 | ); 92 | } 93 | // Behind the scene 94 | function returnParentJSX() { 95 | return { 96 | type: "div", 97 | props: { children: [object1, object2] }, 98 | // ...additional properties 99 | }; 100 | } 101 | ``` 102 | 103 | - সল্যুশন ২ - প্যারেন্ট হিসেবে Fragment ব্যবহার করা। 104 | 105 | ```javascript 106 | function returnFragmentJSX() { 107 | return ( 108 | 109 | {" "} 110 | // short form <> 111 |

    Hi

    112 |

    Hello

    113 |     114 | ); 115 | } 116 | // Behind the scene 117 | function returnFragmentJSX() { 118 | return { 119 | type: Symbol(react.fragment), 120 | props: { children: [object1, object2] }, // ...additional property 121 | }; 122 | } 123 | ``` 124 | 125 | JSX এর বদলে ডিরেক্ট Object Return করলে কি কাজ করবে? যেমনঃ 126 | 127 | ```javascript 128 | function returnDirectObject() { 129 | return { 130 | type: "div", 131 | props: { 132 | className: "bg-white", 133 | children: [ 134 | { 135 | type: "h1", 136 | props: { className: "text-2xl", children: "Hi" }, 137 | }, 138 | { type: "p", props: { children: "Hello World" } }, 139 | ], 140 | }, 141 | }; 142 | } 143 | ``` 144 | 145 | না, কারন এই Object টা React এর ওয়েতে বানানো হয়নি। রিয়েক্ট আরও Additional Property রাখে Object er ভিতর। রিয়েক্ট যেভাবে বানায় - 146 | 147 | ```javascript 148 | import { createElement } from "react"; 149 | 150 | function returnDirectObject() { 151 | return createElement( 152 | "div", 153 | { className: "bg-white" }, 154 | createElement("h1", { className: "text-2xl" }, "Hi"), 155 | createElement("p", null, "Hello World") 156 | ); 157 | } 158 | ``` 159 | 160 | ### 2. Close all the tags: 161 | 162 | `JSX` এ ব্যাবহার করা প্রতিটা ট্যাগ অবশ্যই ক্লোজ করা লাগবে। সেলফ ক্লোজিং ট্যাগ যেগুলো আছে যেমনঃ ``,`
    `,সেগুলোও অবশ্যই এভাবে ``,`
    ` ক্লোজ করা লাগবে । 163 | 164 | ### 3. camelCase ~all~ most of the things!: 165 | 166 | `JSX` এ যেহেতু আমারা `JavaScript` লিখছি,সেহেতু আমাদের জাভাস্ক্রিপ্ট এর রুলস অনুযায়ী `multiple-word` এর `Attribute` গুলোকে `camelCase` এ লিখতে হবে। 167 | 168 | **`class` Attribute টা যেহেতু জাভাস্ক্রিপ্টের রিজার্ভ কিওয়ার্ড,তাই আমরা `class` ব্যাবহার করতে পারবোনা। `class` এর পরিবর্তে আমদের `className` ব্যাবহার করতে হবে ।** 169 | 170 | -------------------------------------------------------------------------------- /pages/reactive-accilarator/React-js/module-1/pure-components.mdx: -------------------------------------------------------------------------------- 1 | ### পিওর ফাংশন কী? 2 | 3 | একটি ফাংশনকে পিওর (pure) বলা হয় যদি তা নিচের দুটি শর্ত পূরণ করে: 4 | 5 | 1. **সেম ইনপুটের জন্য সেম আউটপুট**: পিওর ফাংশন সবসময় তার ইনপুট অনুযায়ী নির্দিষ্ট আউটপুট প্রদান করে। অর্থাৎ একই ইনপুটের জন্য সবসময় একই আউটপুট পাওয়া যাবে। 6 | 2. **সাইড-ইফেক্টের অনুপস্থিতি**: পিওর ফাংশন বাইরের কোনো স্টেট বা ভ্যারিয়েবল পরিবর্তন করে না। এটি শুধুমাত্র ইনপুট অনুযায়ী কাজ করে এবং বাইরে কোনো পরিবর্তন আনে না। 7 | 8 | #### পিওর ফাংশনের উদাহরণ: 9 | 10 | ```javascript 11 | function add(a, b) { 12 | return a + b; 13 | } 14 | ``` 15 | 16 | এখানে `add` ফাংশনটি পিওর, কারণ এটি কেবল তার ইনপুট অনুযায়ী আউটপুট দিচ্ছে এবং বাহ্যিক কোনো স্টেট পরিবর্তন করছে না। 17 | 18 | #### ইমপিওর ফাংশনের উদাহরণ: 19 | 20 | ```javascript 21 | let x = 10; 22 | 23 | function addWithSideEffect(a, b) { 24 | x = a + b; // বাহিরের ভ্যারিয়েবল পরিবর্তন করা হচ্ছে 25 | return x; 26 | } 27 | ``` 28 | 29 | এই ফাংশনটি ইমপিওর, কারণ এটি বাহ্যিক ভ্যারিয়েবল `x` এর মান পরিবর্তন করছে, যা একটি সাইড-ইফেক্ট সৃষ্টি করছে। 30 | 31 | --- 32 | 33 | ### কেন React-এ পিওর ফাংশনাল কম্পোনেন্ট ব্যবহার করা উচিত? 34 | 35 | React কম্পোনেন্টগুলোকে পিওর রাখতে রিকমেন্ড, কারণ এতে বেশ কিছু সুবিধা রয়েছে। মূলত, পিওর ফাংশনাল কম্পোনেন্ট ব্যবহারের মাধ্যমে React এর পারফরম্যান্স ও ব্যবহারে সুবিধা পাওয়া যায়। আসুন, এই সুবিধাগুলো বিস্তারিতভাবে দেখি: 36 | 37 | ### ১. **অপ্রয়োজনীয় রেন্ডার এড়ানো** 38 | 39 | React পিওর ফাংশনাল কম্পোনেন্টগুলোর ক্ষেত্রে ইনপুট বা প্রপসে কোনো পরিবর্তন না হলে কম্পোনেন্টটি পুনরায় রেন্ডার করে না। অর্থাৎ, ইনপুট এক থাকলে React আগের আউটপুট ব্যবহার করতে পারে, যা অ্যাপ্লিকেশনের রেন্ডারিংয়ের কার্যকারিতা বৃদ্ধি করে। 40 | 41 | #### উদাহরণ: 42 | 43 | ```javascript 44 | import React from "react"; 45 | 46 | const Greeting = React.memo(function Greeting({ name }) { 47 | console.log("Rendering Greeting"); 48 | return

    Hello, {name}!

    ; 49 | }); 50 | ``` 51 | 52 | এখানে `React.memo` ব্যবহারের মাধ্যমে এই কম্পোনেন্টকে পিওর করা হয়েছে। যদি `name` প্রপসের কোনো পরিবর্তন না ঘটে, তাহলে React পূর্বের রেন্ডারকৃত আউটপুটই পুনরায় ব্যবহার করবে, নতুন করে রেন্ডার করা প্রয়োজন হবে না। 53 | 54 | ### ২. **সহজ এবং ক্লিন কোড** 55 | 56 | পিওর ফাংশনাল কম্পোনেন্টের ব্যবহারে কোড সহজ ও ক্লিন হয়। যেহেতু এগুলো শুধু ইনপুটের ওপর নির্ভরশীল এবং কোনো বাহ্যিক স্টেটের উপর নির্ভর করে না, তাই এগুলো সহজেই বোঝা যায় এবং প্রয়োগ করা যায়। 57 | 58 | #### উদাহরণ: 59 | 60 | ```javascript 61 | function WelcomeMessage({ user }) { 62 | return

    Welcome, {user}!

    ; 63 | } 64 | ``` 65 | 66 | এই ধরনের কম্পোনেন্ট অত্যন্ত ক্লিন এবং সহজপাঠ্য, কারণ এটি কোনো বাহ্যিক স্টেট পরিবর্তন করে না, বরং শুধুমাত্র প্রপসের মাধ্যমে আউটপুট প্রদান করে। 67 | 68 | ### ৩. **প্রেডিক্টেবল আচরণ** 69 | 70 | পিওর ফাংশনাল কম্পোনেন্ট সবসময় নির্দিষ্ট ইনপুট অনুযায়ী নির্দিষ্ট আউটপুট দেয়। এতে করে এদের আচরণ প্রেডিক্টেবল হয়, অর্থাৎ আগেভাগেই অনুমান করা সম্ভব। এটি ডিবাগিং এবং বাগ সমাধানের ক্ষেত্রে গুরুত্বপূর্ণ, কারণ আচরণ সবসময় পূর্বানুমানযোগ্য থাকে। 71 | 72 | ### ৪. **সহজ টেস্টিং** 73 | 74 | পিওর ফাংশনাল কম্পোনেন্ট সহজেই টেস্ট করা যায়, কারণ এগুলো ইনপুট এবং আউটপুটের উপর নির্ভরশীল। ইনপুট অনুযায়ী আউটপুট পরীক্ষা করলেই সহজে বোঝা যায় যে ফাংশনটি সঠিকভাবে কাজ করছে কি না। 75 | 76 | #### উদাহরণ: 77 | 78 | ```javascript 79 | function sum(a, b) { 80 | return a + b; 81 | } 82 | 83 | // টেস্টিং উদাহরণ: 84 | console.log(sum(2, 3)); // আউটপুট হবে: 5 85 | ``` 86 | 87 | ### ৫. **Memoization এর সুবিধা** 88 | 89 | React-এ পিওর ফাংশনাল কম্পোনেন্ট ব্যবহারের ফলে `memoization` সহজ হয়। একই ইনপুটের জন্য React আগের আউটপুট সংরক্ষণ করতে পারে, ফলে অপ্রয়োজনীয় রেন্ডার এড়িয়ে পারফরম্যান্স উন্নত করা যায়। `React.memo` এই কাজে বিশেষভাবে ব্যবহৃত হয়। 90 | 91 | --- 92 | 93 | React-এ পিওর ফাংশনাল কম্পোনেন্ট ব্যবহারের মাধ্যমে কোডের সহজ হয়, প্রেডিক্টেবিলিটি এবং পারফরম্যান্স বৃদ্ধি পায়। অপ্রয়োজনীয় রেন্ডারিং এড়ানো, সহজে টেস্ট করা, এবং কোড ক্লিন রাখার জন্য পিওর ফাংশন ব্যবহার অত্যন্ত গুরুত্বপূর্ণ। তাছাড়া, React এর `memoization` ফিচারের কারণে পিওর ফাংশনাল কম্পোনেন্ট ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনের কার্যকারিতা উল্লেখযোগ্যভাবে বৃদ্ধি পায়। 94 | 95 | ### যদি আমাদেরকে এমন কোন কাজ করতেই হয় যাতে কম্পোনেন্টের পিওরিটি নষ্ট হলেও করতে হবে,এমনবস্থায় কি করবো ? 96 | 97 | হ্যা,এটা ঠিক যে সবসময় কম্পোনেন্টের পিওরিটি বজায় রাখা সম্ভব নাও হতে পারে,আমাদের এমন কিছু করা লাগতে পারে যাতে হয়তো কম্পোনেন্টের পিওরিটি নষ্ট হবে, এমন অবস্থায় আমরা দুটি কাজ করতে পাড়িঃ 98 | 99 | #### Manage With Event Handler: 100 | 101 | যেসব সাইড-এফেক্টগুলো আমরা `event-handler` এর মাধ্যমে করতে পারবো,তা আমরা `event-handler` এর ভিতর করার চেষ্টা করবো। কারণ `event-handler` রিয়াক্টের রেন্ডারিং টাইমে একটিভ হয়না তাই `event-handler` পিওর হউয়ার প্রয়োজন নাই । ` event-handler` `Hydration` **(রিয়াক্টের কম্পোনেন্ট লোড হউয়ায়র পর যেই টাইমটায় জাভাস্ক্রিপ্ট একটিভ হয়, ওই প্রসেসটা হলো `Hydration`)** টাইমে একটিভ হয়। মূল কোথা হলো যাতে রিয়াক্টের রেন্ডারিং টাইমে কোন সাইড-এফেক্ট না হয় । 102 | 103 | #### `useEffect` হুকের মাধ্যমে সাইড-এফেক্ট ম্যানেজ করাঃ 104 | 105 | যদি আর কোন উপায় নাই থাকে,তাহলে একেবারে লাস্ট স্টেজ হিসেবে রিয়াক্ট সাইড-এফেক্ট হ্যান্ডেল করার জন্য একটা বিল্ট-ইন হুক দিয়ে দিয়েছে,যার নাম `useEffect`। এই হুক ব্যাবহার করে সাইড-এফেক্ট ম্যানেজ করতে হবে। এই হুকটাও রিয়াক্টের রেন্ডারিং শেষ হয়ে যাওয়ার পর একটিভ হয়। তাই সাইড-এফেক্ট হ্যান্ডেল করার জন্য এই হুকটা ইউজ করা যেতে পারে,তবে সেটা হলো একেবারে সর্বশেষ রাস্তা। 106 | 107 | ### ফাংশনের ভিতরের ভ্যারিয়েবলগুলো কি চেঞ্জ করা যাবে? 108 | 109 | হ্যা,ফাংশনের ভিতরের ভ্যারিয়েবল চেঞ্জ করা যাবে। এতে কম্পোনেন্টের পিওরিটি নষ্ট হবেনা। এটাকে বলা হয় `local mutation`। লোকাল মিউটেশনে কোন সমস্যা নাই। 110 | -------------------------------------------------------------------------------- /pages/reactive-accilarator/React-js/module-1/rendering-list.mdx: -------------------------------------------------------------------------------- 1 | রিয়াক্টে আমাদেরকে প্রায় সময়ই লিস্ট অফ ডাটা বা ডাটা `Array` থেকে ডাটা রেন্ডার করার প্রয়োজন হয়। সেক্ষেত্রে আমারা `map`, `filter` ব্যাবহার করে তা দেখাতে পারি। 2 | 3 | **উদাহরনঃ** 4 | 5 | ```javascript 6 | const users = ["Mr x", "Mr y", "Mr z"]; 7 | 8 | export function ListOfUser() { 9 | const user = users.map((person) =>
  • {person}
    • ); 10 | return ; 11 | } 12 | ``` 13 | 14 | ## `key` এর ব্যাবহারঃ 15 | 16 | লিস্ট অফ আইটেম `map` করে রেন্ডার করার সময় প্রতিটা লিস্ট এলিমেন্টে অবশ্যই `key` ব্যাবহার করতে হবে। 17 | 18 | ```javascript 19 | const users = [ 20 | { 21 | id: 1, 22 | name: "Mr X", 23 | }, 24 | { 25 | id: 2, 26 | name: "Mr XX", 27 | }, 28 | ]; 29 | 30 | export function ListOfUser() { 31 | const user = users.map((person) =>
  • {person.name}
    • ); 32 | return ; 33 | } 34 | ``` 35 | 36 | ## `key` কিভাবে পেতে পারি ? 37 | 38 | বিভিন্ন ডাটা থেকে বিভিন্ন ভাবে `key` পেতে পারি, যেমনঃ 39 | 40 | - **ডাটাবেস থেকে প্রাপ্ত ডাটাঃ** যেসব ডাটা আমরা ডাটাবেস থেকে পাই সেগুলোর সাথে আমারা অটোমেটিক `Id` পেয়ে যাই, এই `Id` আমরা `key` হিসেবে ব্যাবহার করতে পারি। 41 | 42 | - **লোকাল ডাটার ক্ষেত্রেঃ** যেসব ডাটা লোকালি অটোমেটিক জেনারেটেড হয় সেসব ডাটার ক্ষেত্রে আমারা `crypto.randomUUID()` অথবা `uuid` ব্যাবহার করে `id/key` জেনারেট করে সেভ করতে পারি। 43 | 44 | ## রুলস অফ `key` 45 | 46 | - `key` অবশ্যই ইউনিক হতে হবে। একই লিস্টের বিভিন্ন এলিমেন্টে একই `key` ব্যাবহার করা যাবেনা। 47 | 48 | - `key` পরিবর্তন করা যাবেনা বা রেন্ডারিং এর সময়ে `key` জেনারেট করে ব্যবাহার করা যাবেনা। 49 | 50 | - `Array`র ইনডেক্সকে কখনো কি হিসেবে ব্যাবহার করা যাবেনা। 51 | 52 | ## রিয়াক্টে কেন `key` ব্যাবহার করা লাগে? 53 | 54 | রিয়াক্ট তার `DOM TREE`তে প্রতিটা আইটেমকে ইউনিকভাবে আইডেন্টিফাই করার জন্য `key`র প্রয়োজন হয়। যাতে কখনও লিস্ট থেকে কোন আইটেম ডিলিট হয়ে গেলে,বা কখনো `sort` করা লাগলে যেন রিয়াক্ট সহজে বুঝতে পারে যে কোন আইটেমে পরিবর্তন হয়েছে। 55 | 56 | -------------------------------------------------------------------------------- /pages/reactive-accilarator/React-js/module-1/vertual-dom.mdx: -------------------------------------------------------------------------------- 1 | ## DOM কি আসলেই স্লো? 2 | 3 | নাহ, ডম কখনোই স্লো না । আসলে যদি ভালোভাবে কোড করা হয় তাহলে ডম যেকোন কিছুর থেকে ফাস্ট। কিন্তু বর্তমান বিশ্বে ওয়েব অ্যাপ্লিকেশনগুলো অনেক বেশি ইন্টারেক্টিভ,তাই যখনই ইউজার কোন ইন্টারেকশন করে তখন ব্রাউজারকে আবার তা নতুন করে পুরো ওয়েবসাইটটা রি-পেইন্ট করতে হয়। এইরকম যখন অনেকগুলো রিয়াকশনের কারনে ব্রাউজারকে বার বার রি পেইন্ট করতে হয় তখন সেই রি-পেইন্টিং প্রসেসটা স্লো হয়ে যায়,মুলত ডম কিন্তু স্লো নয় । 4 | 5 | ## ব্রাউজার কিভাবে DOM রেন্ডার করে ? 6 | 7 | ![DOM Tree](../../../../public/DOM.png) 8 | 9 | আমরা দেখতে পাচ্ছি যে উপরে একটা গ্রাফ এর মাদ্ধমে ব্রাউজার এর রেন্ডারিং প্রসেস দেখানো হয়েছে । এখানে আমরা কি দেখতে পাচ্ছি ? আমরা দেখতে পাচ্ছি যে, যখন ব্রাউজার কোন `HTML` `CSS` ফাইল পায়,তখন সেই ফাইলটা একটা পারসিং এর মদ্ধে দিয়ে নিয়ে যায়, এক্ষেত্রে `HTML` এর জন্য `HTML PARSER` ও `CSS` এর জন্য `CSS PERSER` ব্যাবহার হয়। এসব পারসার দিয়ে পারসিং এর পর ব্রাউসার `HTML` দিয়ে একটা `DOM TREE` বানায় এর `CSS` দিয়ে `CSSOM` নামে একটা `STYLE RULES` বানায় , এবং `DOM TREE` ও `STYLE RULES` একসাথে ATTACH হয়ে একটা `RENDER TREE` বানায়। এই `RENDER TREE` ব্রাউসারে একটা `LAYOUT` ফেস এর মদ্ধে দিয়ে যায়। এই `LAYOUT` ফেস এ `DOM TREE` টা ব্রাউসার এর কোথায় রেন্ডার হবে তার একটা CORDINATE রেডি হয়ে যায় । এবং ফাইনালি ব্রাউজার তার PAINTING মেকানিজম এর মাদ্ধমে তা ব্রাউসারে পেইন্ট করে দেয় এবং আমরা ফাইনাল আউটপুট দেখতে পাই। 10 | 11 | ## ভার্চুয়াল ডম কি ? কিভাবে ভার্চুয়াল ডম কাজ করে? 12 | 13 | ভার্চুয়াল ডম রিয়াক্ট এর একটা ফান্ডামেন্টাল বিষয় । রিয়াক্ট এর ভিত্তিটাই মূলত এই ভার্চুয়াল ডম । 14 | 15 | ব্রাউজারের রি-পেন্টিং প্রসেসটা এপ্লিকেশনকে স্লো ডাউন করে দেয়, এই সমস্যা এড়ানোর জন্য আমরা কি করতে পারি ভাবুনতো। আমরা মূলত দুইটা ভাবে এটার সমাধান করতে পারি : 16 | 17 | - আমরা ব্যাচ আপডেট করতে পারি, 18 | - আমরা ডম ম্যানুপুলেশন কম করতে পারি। 19 | 20 | রিয়াক্ট তার ভার্চুয়াল ডমের মাদ্ধমে সেই কাজটাই করে । রিয়াক্ট একেবারে মিনিমাম ডম ম্যানুপুলেশন করে । 21 | 22 | ![Vertual DOM](../../../../public/dif.png) 23 | 24 | যখন এপ্লিকেশনে কোন ইউজার কোন ইন্টারেকশন করে তখন যদি `UI` তে কোন চেঞ্জ করতে হয় তখন রিয়াক্ট সরাসরি `HTML` এর `DOM TREE` টাকে চেঞ্জ করে দেয়না। যখনি `UI` তে কোন চেঞ্জ আসে,রিয়াক্ট তার ভার্চুয়াল `DOM` এর সাহায্যে `UI` এর একটা রেপ্লিকা বা কপি বানিয়ে নেয় । তারপর রিয়াক্ট তার একটা নিজস্ব বানানো এলগরিদম `Diffng` বা `Reconciliation` এলগরিদম এর মাদ্ধমে চেক করে যে `UI` এর ঠিক কোন জায়গায় চেঞ্জ হয়েছে । এতে করে পুরো ওয়েবসাইটটা রি-রেন্ডার না করে শুধুমাত্র যেই অংশে পরিবর্তন হয়েছে,সেই অংশটুকু `DOM` এ আপডেট করে দেয়। এতে করে রিয়াক্ট মিনিমাম ডম অপারেশনের মাদ্ধমে এপ্লিকেশনএর পার্ফমেন্স ইম্প্রুভ করে । 25 | 26 | -------------------------------------------------------------------------------- /pages/reactive-accilarator/React-js/module-1/your-ui-as-a-tree.mdx: -------------------------------------------------------------------------------- 1 | ### রেন্ডার ট্রি (Render Tree) এবং মডিউল ট্রি (Module Tree) – রিয়াক্টের প্রেক্ষাপটে 2 | 3 | #### ১. **রেন্ডার ট্রি (Render Tree) কী?** 4 | 5 | **রেন্ডার ট্রি** হলো ডকুমেন্ট অবজেক্ট মডেল (DOM) এবং স্টাইলিং ইনফরমেশন (CSS) এর সম্মিলিত রূপ। এটি একটি ট্রি স্ট্রাকচার যেখানে প্রতিটি নোড একটি UI এলিমেন্টের প্রতিনিধিত্ব করে। 6 | 7 | রিয়াক্টে, আমরা JSX দিয়ে কম্পোনেন্ট লিখি, যা শেষে HTML DOM এ রূপান্তরিত হয়। রিয়াক্ট তখন একটি ভার্চুয়াল DOM তৈরি করে এবং সেই DOM এর ওপর কাজ করে। 8 | 9 | #### **রেন্ডার ট্রি কিভাবে কাজ করে?** 10 | 11 | 1. **DOM ও CSSOM তৈরি:** প্রথমে ব্রাউজার HTML থেকে একটি DOM (ডকুমেন্ট অবজেক্ট মডেল) তৈরি করে। তারপর CSS থেকে CSSOM (CSS অবজেক্ট মডেল) তৈরি করে। 12 | 2. **রেন্ডার ট্রি নির্মাণ:** DOM এবং CSSOM একসাথে মিলে রেন্ডার ট্রি তৈরি করে। 13 | 14 | 3. **লেআউট এবং পেইন্টিং:** এরপর ব্রাউজার প্রতিটি এলিমেন্টকে তার যথাযথ জায়গায় বসিয়ে দেয় (লেআউট), এবং পরিশেষে সেই এলিমেন্টগুলোকে পেইন্ট করে। 15 | 16 | #### **রেন্ডার ট্রির প্রয়োজনীয়তা ও সুবিধা:** 17 | 18 | - রেন্ডার ট্রি প্রয়োজন, কারণ এটি ব্রাউজারের কাছে নির্দিষ্ট ভাবে জানায়, কিভাবে পেজটি দেখাবে। 19 | - এর মাধ্যমে DOM এর পরিবর্তন হলে, ব্রাউজার শুধু সংশ্লিষ্ট অংশটুকু পুনরায় রেন্ডার করে। ফলে পারফরম্যান্স বৃদ্ধি পায়। 20 | - রিয়াক্টের **ভি-ডম (Virtual DOM)** রেন্ডার ট্রির উপর ভিত্তি করে কাজ করে। ভি-ডম পারফরম্যান্স অপটিমাইজ করার জন্য রেন্ডার ট্রির শুধুমাত্র পরিবর্তিত অংশ পুনরায় আপডেট করে। 21 | 22 | #### উদাহরণ: 23 | 24 | ```jsx 25 | function App() { 26 | return ( 27 |
    28 |

    React Render Tree Example

    29 |

    This is a paragraph.

    30 |
    31 | ); 32 | } 33 | ``` 34 | 35 | - `div` এবং তার child nodes (`h1` এবং `p`) একসাথে রেন্ডার ট্রি তৈরি করবে। 36 | - যদি শুধু `p` ট্যাগ আপডেট হয়, রিয়াক্ট শুধুমাত্র সেই অংশে রেন্ডার করবে, বাকি অংশ অপরিবর্তিত থাকবে। 37 | 38 | #### ২. **মডিউল ট্রি (Module Tree) কী?** 39 | 40 | **মডিউল ট্রি** হলো আমাদের অ্যাপ্লিকেশনের সব জাভাস্ক্রিপ্ট মডিউলগুলোর একটি ডিপেনডেন্সি চেইন। এটি দেখায় কোন মডিউলটি কোন মডিউলের উপর নির্ভর করে। 41 | 42 | #### **মডিউল ট্রি কিভাবে কাজ করে?** 43 | 44 | রিয়াক্ট এবং অন্যান্য মডুলার ফ্রেমওয়ার্কে, বিভিন্ন ফাইল/মডিউল একে অপরের উপর নির্ভর করে কাজ করে। Webpack বা অন্য কোন মডিউল বান্ডলার, মডিউলগুলোকে একটি ট্রি স্ট্রাকচারে সাজায় যেখানে প্রতিটি মডিউল অন্য মডিউলের সাথে সম্পর্কিত হয়। 45 | 46 | #### উদাহরণ: 47 | 48 | ধরা যাক, আপনার তিনটি ফাইল আছে: `App.js`, `Header.js`, এবং `Footer.js`। `App.js` তে আপনি `Header.js` এবং `Footer.js` কে ইম্পোর্ট করছেন। 49 | 50 | ```js 51 | // App.js 52 | import Header from "./Header"; 53 | import Footer from "./Footer"; 54 | 55 | function App() { 56 | return ( 57 | <> 58 |
    59 |