From 089a8000b4d5cb9f34ea21d0950c3bc5bdf3e0c0 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Wed, 20 Sep 2023 23:57:58 +0600 Subject: [PATCH 01/20] learn>passing-data-deeply-with-props [intro done] --- src/content/learn/passing-data-deeply-with-context.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 45c5e77da..4dbbc790d 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -1,10 +1,10 @@ --- -title: Passing Data Deeply with Context +title: Context এর মাধ্যমে ডেটা Deeply Pass করা --- -Usually, you will pass information from a parent component to a child component via props. But passing props can become verbose and inconvenient if you have to pass them through many components in the middle, or if many components in your app need the same information. *Context* lets the parent component make some information available to any component in the tree below it—no matter how deep—without passing it explicitly through props. +সাধারণত, আপনি props এর মাধ্যমে একটি প্যারেন্ট কম্পোনেন্ট থেকে একটি চাইল্ড কম্পোনেন্টে ইনফর্মেশন pass করবেন। কিন্তু যদি আপনার props কে মাঝের অনেক অনেক কম্পোনেন্টের মধ্যে দিয়ে pass করা লাগে, অথবা আপনার অ্যাপের অনেক কম্পোনেন্টের একই ইনফর্মেশনের দরকার হয়, তখন props পাস করা শব্দবহুল এবং ঝামেলাপূর্ণ হতে পারে। *Context* প্যারেন্ট কম্পোনেন্টকে এর নিম্নস্থ যেকোনো স্তরের যেকোনো কম্পোনেন্টের জন্য কিছু ইনফর্মেশন অ্যাভেইলেবল করতে দেয় (সে নিম্নস্থ কম্পোনেন্ট যতই গভীরে হোক না কেনো) এ ইনফর্মেশনকে props এর মাধ্যমে স্পষ্টভাবে pass করাও লাগেনা। From 060b400ba64eb7998da67354a1640ff73e7f0147 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Fri, 22 Sep 2023 11:15:52 +0600 Subject: [PATCH 02/20] translate YouWillLearn of Passing Data Deeply... --- src/content/learn/passing-data-deeply-with-context.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 4dbbc790d..f0563e4bb 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -10,10 +10,10 @@ title: Context এর মাধ্যমে ডেটা Deeply Pass করা -- What "prop drilling" is -- How to replace repetitive prop passing with context -- Common use cases for context -- Common alternatives to context +- "Prop drilling (প্রপ ড্রিলিং)" কী +- কিভাবে context এর ব্যবহার করে বার বার prop পাস করা এড়াবেন +- Context ব্যবহারের সাধারণ ক্ষেত্রসমূহ +- Context এর কিছু প্রচলিত বিকল্প From b72859fcea4af6e16baab08d10fe7f5f6b77e69c Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Fri, 22 Sep 2023 17:13:58 +0600 Subject: [PATCH 03/20] finish 5% --- src/content/learn/passing-data-deeply-with-context.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index f0563e4bb..34d0983b3 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -17,17 +17,17 @@ title: Context এর মাধ্যমে ডেটা Deeply Pass করা -## The problem with passing props {/*the-problem-with-passing-props*/} +## Props পাস করার মূল সমস্যা {/*the-problem-with-passing-props*/} -[Passing props](/learn/passing-props-to-a-component) is a great way to explicitly pipe data through your UI tree to the components that use it. +[প্রপস পাস করা](/learn/passing-props-to-a-component) UI tree এর মধ্য দিয়ে ডেটাকে এমন কম্পোনেন্টস যেগুলোর ঐ ডেটা কাজে আসবে সেগুলো পর্যন্ত স্পষ্টভাবে পৌঁছে দেয়ার একটি বেশ ভালো পদ্ধতি। -But passing props can become verbose and inconvenient when you need to pass some prop deeply through the tree, or if many components need the same prop. The nearest common ancestor could be far removed from the components that need data, and [lifting state up](/learn/sharing-state-between-components) that high can lead to a situation called "prop drilling". +কিন্তু প্রপস পাস করা অনেক শব্দ লেখার এবং ঝামেলার কারণ হতে পরে যখন আপনার কোনো প্রপকে tree এর মধ্য দিয়ে অনেক গভীরে (প্যারেন্ট থেকে অনেক দূরের চাইল্ড পর্যন্ত) পাস করা লাগে কিংবা যদি একাধিক কম্পোনেন্টের একই প্রপের দরকার হয়। যে কম্পোনেন্টগুলোর ডেটা প্রয়োজন, তাদের নিকটতম সাধারণ পূর্বপুরুষ (nearest common ancestor) তাদের থেকে অনেক অনেক দূরে হতে পারে, আর এত বেশি উপরের স্তরে [state কে উঠানো](/learn/sharing-state-between-components) এমন একটা পরিস্থিতি তৈরি করতে পারে যাকে বলা হয় "prop drilling"। -Lifting state up +State কে উপরে উঠানো @@ -38,7 +38,7 @@ Prop drilling -Wouldn't it be great if there were a way to "teleport" data to the components in the tree that need it without passing props? With React's context feature, there is! +এমন হলে কী চমৎকার হতোনা যদি প্রপস পাস না করেই tree এর মধ্যে যে কম্পোনেন্টগুলোর ডেটাটি প্রয়োজন সেগুলোর কাছে ডেটাকে "ম্যাজিকের মতো" নিয়ে যাওয়ার কোন উপায় থাকতো? React এর context ফিচারই হলো সে উপায়! ## Context: an alternative to passing props {/*context-an-alternative-to-passing-props*/} From 77178bf97097dd8a3591a8976bce4723ff7add79 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Sat, 23 Sep 2023 21:35:50 +0600 Subject: [PATCH 04/20] finish 9% --- src/content/learn/passing-data-deeply-with-context.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 34d0983b3..53faf85f4 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -40,9 +40,9 @@ Prop drilling এমন হলে কী চমৎকার হতোনা যদি প্রপস পাস না করেই tree এর মধ্যে যে কম্পোনেন্টগুলোর ডেটাটি প্রয়োজন সেগুলোর কাছে ডেটাকে "ম্যাজিকের মতো" নিয়ে যাওয়ার কোন উপায় থাকতো? React এর context ফিচারই হলো সে উপায়! -## Context: an alternative to passing props {/*context-an-alternative-to-passing-props*/} +## কনটেক্সট: প্রপস পাস করার একটি বিকল্প পদ্ধতি {/*context-an-alternative-to-passing-props*/} -Context lets a parent component provide data to the entire tree below it. There are many uses for context. Here is one example. Consider this `Heading` component that accepts a `level` for its size: +কনটেক্সট একটি প্যারেন্ট কম্পোনেন্টকে এর নিম্নস্থ সকল কম্পনেন্টের tree কে ডেটা সরবরাহ করতে দেয়। কনটেক্সটের বহু ব্যবহার রয়েছে। একটি উদাহরণ দেখা যাক। এই `Heading` কম্পোনেন্টকে একটু দেখুন যেটি এর সাইজের জন্য কোনো `level` গ্রহণ করে: From 3fccb03cafbc3fc19e5bcbd0e10a31132c73b002 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Tue, 26 Sep 2023 17:36:38 +0600 Subject: [PATCH 05/20] finish 20% --- .../learn/passing-data-deeply-with-context.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 53faf85f4..7e0f8c604 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -106,7 +106,7 @@ export default function Heading({ level, children }) { -Let's say you want multiple headings within the same `Section` to always have the same size: +ধরুন আপনি একই `Section` এর ভিতরের বিভিন্ন headings সবসময় একই সাইজের হোক এটা চান: @@ -180,7 +180,7 @@ export default function Heading({ level, children }) { -Currently, you pass the `level` prop to each `` separately: +এখন, প্রত্যেক `` কে আপনার `level` প্রপটি আলাদা আলাদা করে পাস করতে হচ্ছে: ```js
@@ -190,7 +190,7 @@ Currently, you pass the `level` prop to each `` separately:
``` -It would be nice if you could pass the `level` prop to the `
` component instead and remove it from the ``. This way you could enforce that all headings in the same section have the same size: +এটা আরো সুন্দর হতো যদি আপনি এর বদলে `level` প্রপটিকে `
` কম্পোনেন্টকে পাস করতে, আর `` থেকে রিমুভ করতে পারতেন। এভাবে আপনি নিশ্চিত করতে পারতেন যে, একই সেকশনের সব হেডিংস একই সাইজের হবে: ```js
@@ -200,27 +200,27 @@ It would be nice if you could pass the `level` prop to the `
` component
``` -But how can the `` component know the level of its closest `
`? **That would require some way for a child to "ask" for data from somewhere above in the tree.** +কিন্তু `` কম্পোনেন্টটি কিভাবে এর সবচেয়ে কাছের `
` এর level জানবে? **তা করার জন্য tree এর উপরের কোথাও বিদ্যমান ডাটা, চাইল্ডের "তালাশ করার" জন্য কোনো উপায় থাকা লাগবে।** -You can't do it with props alone. This is where context comes into play. You will do it in three steps: +আপনি শুধু প্রপস দিয়েই এটা করতে পারবেন না। এখানেই context এর ভূমিকা চলে আসে। আপনার তা তিনটি ধাপে করতে হবে: -1. **Create** a context. (You can call it `LevelContext`, since it's for the heading level.) -2. **Use** that context from the component that needs the data. (`Heading` will use `LevelContext`.) -3. **Provide** that context from the component that specifies the data. (`Section` will provide `LevelContext`.) +1. একটি কনটেক্সট **Create** করা। (আপনি এর নাম দিবেন `LevelContext`, কেননা এটা হেডিং লেভেলের জন্য।) +2. যেসব কম্পোনেন্টের ডেটটি প্রয়োজন তাদের মধ্যে কনেটেক্সটটি **Use** করা। (`Heading` কম্পোনেন্টটি `LevelContext` কে use করবে।) +3. যে কম্পোনেন্টটি ডেটাটিকে স্পেসিফাই (উল্লেখ) করে তাদের থেকে কনটেক্সটটি **Provide** করা। (`Section` কম্পোনেন্টটি `LevelContext` কে provide করবে।) -Context lets a parent--even a distant one!--provide some data to the entire tree inside of it. +Context একটি প্যারেন্টকে--এমনকি অনেক দূরের হলেও--এর নিচের সম্পূর্ণ tree কে কিছু ডেটা provide (সরবরাহ) করতে দেয়। -Using context in close children +কাছের চিলড্রেনদের জন্য context এর ব্যবহার -Using context in distant children +দূরের চিলড্রেনদের জন্য context এর ব্যবহার From cffb161d54dd0ad70e581f88baefbae9641d877d Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Wed, 27 Sep 2023 23:10:08 +0600 Subject: [PATCH 06/20] translate step 1: create a context --- src/content/learn/passing-data-deeply-with-context.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 7e0f8c604..24e9df825 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -226,9 +226,9 @@ Context একটি প্যারেন্টকে--এমনকি অন -### Step 1: Create the context {/*step-1-create-the-context*/} +### ধাপ ১: কনটেক্সটটি create করুন {/*step-1-create-the-context*/} -First, you need to create the context. You'll need to **export it from a file** so that your components can use it: +প্রথমে, আপনার কনটেক্সটটি create করতে হবে। আপনার একে **একটি ফাইল থেকে export করতে হবে** যাতে করে আপনার কম্পোনেন্টগুলো একে use করতে পারে: @@ -308,7 +308,7 @@ export const LevelContext = createContext(1); -The only argument to `createContext` is the _default_ value. Here, `1` refers to the biggest heading level, but you could pass any kind of value (even an object). You will see the significance of the default value in the next step. +`createContext` এর একমাত্র আর্গুমেন্ট হলো _default_ ভ্যালু। এখানে `1` দ্বারা উদ্দেশ্য হলো সবচেয়ে বড় হেডিং লেভেল, কিন্তু আপনি যেকোনো ধরনের ভ্যালু (এমনকি একটি object) পাস করতে পারতেন। আপনি এই ডিফল্ট ভ্যালুর গুরুত্ব এর পরের ধাপে উপলব্ধি করতে পারবেন। ### Step 2: Use the context {/*step-2-use-the-context*/} From 76fa5ee52fda76e9295669ce178aaaf5a85beeb8 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Thu, 28 Sep 2023 00:12:21 +0600 Subject: [PATCH 07/20] translate step 2: use a context --- .../learn/passing-data-deeply-with-context.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 24e9df825..937b92bb3 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -310,16 +310,16 @@ export const LevelContext = createContext(1); `createContext` এর একমাত্র আর্গুমেন্ট হলো _default_ ভ্যালু। এখানে `1` দ্বারা উদ্দেশ্য হলো সবচেয়ে বড় হেডিং লেভেল, কিন্তু আপনি যেকোনো ধরনের ভ্যালু (এমনকি একটি object) পাস করতে পারতেন। আপনি এই ডিফল্ট ভ্যালুর গুরুত্ব এর পরের ধাপে উপলব্ধি করতে পারবেন। -### Step 2: Use the context {/*step-2-use-the-context*/} +### ধাপ ২: কনটেক্সটটি use করুন {/*step-2-use-the-context*/} -Import the `useContext` Hook from React and your context: +`useContext` হুককে React থেকে এবং আপনার কনটেক্সট import করুন: ```js import { useContext } from 'react'; import { LevelContext } from './LevelContext.js'; ``` -Currently, the `Heading` component reads `level` from props: +বর্তমানে, `Heading` কম্পোনেন্টটি প্রপস থেকে `level` কে read করছে: ```js export default function Heading({ level, children }) { @@ -327,7 +327,7 @@ export default function Heading({ level, children }) { } ``` -Instead, remove the `level` prop and read the value from the context you just imported, `LevelContext`: +এর পরিবর্তে, `level` প্রপটিকে রিমুভ করে দিন এবং আপনি `LevelContext` নামের যে কনটেক্সটটিকে মাত্র import করেছেন তার থেকে ভ্যালুটি read করুন: ```js {2} export default function Heading({ children }) { @@ -336,9 +336,9 @@ export default function Heading({ children }) { } ``` -`useContext` is a Hook. Just like `useState` and `useReducer`, you can only call a Hook immediately inside a React component (not inside loops or conditions). **`useContext` tells React that the `Heading` component wants to read the `LevelContext`.** +`useContext` একটি হুক। ঠিক `useState` এবং `useReducer` এর মতো, আপনি একটি হুককে React কম্পোনেন্টের ভিতর শুধুমাত্র সবার শুরুতে কল করতে পারবেন (লুপ কিংবা কন্ডিশনের ভিতর না)। **`useContext` রিয়েক্টকে বলে দেয় যে `Heading` কম্পোনেন্টটি `LevelContext` কে read করতে চাচ্ছে।** -Now that the `Heading` component doesn't have a `level` prop, you don't need to pass the level prop to `Heading` in your JSX like this anymore: +এখন যেহেতু `Heading` কম্পোনেন্টটির কোনো `level` প্রপ নেই, আপনার লেভেল প্রপটিকে JSX এর ভিতর `Heading` কে এভাবে পাস করার কোনো প্রয়োজন নেই: ```js
@@ -348,7 +348,7 @@ Now that the `Heading` component doesn't have a `level` prop, you don't need to
``` -Update the JSX so that it's the `Section` that receives it instead: +JSX কে আপডেট করুন যাতে এর পরিবর্তে লেভেলটিকে শুধুমাত্র `Section` রিসিভ করে: ```jsx
@@ -358,7 +358,7 @@ Update the JSX so that it's the `Section` that receives it instead:
``` -As a reminder, this is the markup that you were trying to get working: +মনে আছে তো, এই হলো সেই মার্কআপ যেটার মতো মার্কআপ নিয়ে কাজ করার আশা আপনি করছিলেন: @@ -442,9 +442,9 @@ export const LevelContext = createContext(1); -Notice this example doesn't quite work, yet! All the headings have the same size because **even though you're *using* the context, you have not *provided* it yet.** React doesn't know where to get it! +খেয়াল করুন এই এক্সাম্পলটি এখন পর্যন্ত কাজ করছেনা! সব হেডিংয়ের সাইজ একই, কারণ আপনি **কনটেক্সট *use* করলেও, এখনো আপনি একে *provide* করেননি।** React জানেন কোথায় এই কনটেক্সটকে পাওয়া যাবে! -If you don't provide the context, React will use the default value you've specified in the previous step. In this example, you specified `1` as the argument to `createContext`, so `useContext(LevelContext)` returns `1`, setting all those headings to `

`. Let's fix this problem by having each `Section` provide its own context. +আপনি যদি কনটেক্সটি provide না করেন, React আপনি আগের ধাপে যে ডিফল্ট ভ্যালু ঠিক করে দিয়েছেন তাকেই ব্যবহার করবে। এই উদাহরণে, আপনি `createContext` এর আর্গুমেন্ট হিসেবে `1` ঠিক করে দিয়েছেন, `useContext(LevelContext)` তাই `1` রিটার্ন করছে, ফলে ঐসব হেডিংকে `

` বানিয়ে দিচ্ছে। এখন প্রত্যেক `Section` থেকে এর নিজের কনটেক্সট provide করে চলুন এর সমাধান করা যাক। ### Step 3: Provide the context {/*step-3-provide-the-context*/} From d1e790fc1f8cb36e9e24e3d3c594a73f3bd56307 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Wed, 4 Oct 2023 17:37:59 +0600 Subject: [PATCH 08/20] finish 53% --- .../learn/passing-data-deeply-with-context.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 937b92bb3..e7f6adfe9 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -446,9 +446,9 @@ export const LevelContext = createContext(1); আপনি যদি কনটেক্সটি provide না করেন, React আপনি আগের ধাপে যে ডিফল্ট ভ্যালু ঠিক করে দিয়েছেন তাকেই ব্যবহার করবে। এই উদাহরণে, আপনি `createContext` এর আর্গুমেন্ট হিসেবে `1` ঠিক করে দিয়েছেন, `useContext(LevelContext)` তাই `1` রিটার্ন করছে, ফলে ঐসব হেডিংকে `

` বানিয়ে দিচ্ছে। এখন প্রত্যেক `Section` থেকে এর নিজের কনটেক্সট provide করে চলুন এর সমাধান করা যাক। -### Step 3: Provide the context {/*step-3-provide-the-context*/} +### ধাপ ৩: কনটেক্সটটি provide করুন {/*step-3-provide-the-context*/} -The `Section` component currently renders its children: +`Section` কম্পোনেন্টটি এর চিলড্রেনকে রেন্ডার করছে: ```js export default function Section({ children }) { @@ -460,7 +460,7 @@ export default function Section({ children }) { } ``` -**Wrap them with a context provider** to provide the `LevelContext` to them: +**চিলড্রেনকে context provider দিয়ে wrap করুন** যাতে তাদেরকে `LevelContext` টি provide করতে পারেন: ```js {1,6,8} import { LevelContext } from './LevelContext.js'; @@ -476,7 +476,7 @@ export default function Section({ level, children }) { } ``` -This tells React: "if any component inside this `
` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `` in the UI tree above it. +এটা রিয়েক্টকে বলে দেয় যে: "যদি এই `
` এর ভিতরের কোনো কম্পোনেন্ট `LevelContext` তালাশ করে, তবে তাকে এই `level` দিয়ে দাও"। তখন কম্পোনেন্টটি UI ট্রি এর ভিতর এর সবচেয়ে কাছের `` এর ভ্যালু ইউজ করবে। @@ -564,11 +564,11 @@ export const LevelContext = createContext(1); -It's the same result as the original code, but you did not need to pass the `level` prop to each `Heading` component! Instead, it "figures out" its heading level by asking the closest `Section` above: +ফলস্বরূপ আমরা অরিজিনাল কোডের মতো হুবহু ফলাফল পেলাম, কিন্তু আপনার `level` প্রপটিকে প্রত্যেক `Heading` কম্পোনেন্টে পাস করতে হয়নি! তার পরিবর্তে `Heading` কম্পোনেন্টটি এর হেডিং লেভেল, উপরস্থ সবচেয়ে কাছের `Section` থেকে "বুঝে নিতে" পারছে: -1. You pass a `level` prop to the `
`. -2. `Section` wraps its children into ``. -3. `Heading` asks the closest value of `LevelContext` above with `useContext(LevelContext)`. +1. আপনি `
` কে `level` প্রপ পাস করলেন। +2. `Section` এর চিলড্রেনকে `` দিয়ে wrap করে নেয়। +3. `useContext(LevelContext)` এর দ্বারা `Heading` এর উপরস্থ নিকটতম `levelContext` এর ভ্যালু তালাশ করে। ## Using and providing context from the same component {/*using-and-providing-context-from-the-same-component*/} From 1002f504ee34b1105414207133eee2f65f9f7a5c Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Wed, 4 Oct 2023 19:27:38 +0600 Subject: [PATCH 09/20] finish 67% --- .../learn/passing-data-deeply-with-context.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index e7f6adfe9..aa509e4e8 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -570,9 +570,9 @@ export const LevelContext = createContext(1); 2. `Section` এর চিলড্রেনকে `` দিয়ে wrap করে নেয়। 3. `useContext(LevelContext)` এর দ্বারা `Heading` এর উপরস্থ নিকটতম `levelContext` এর ভ্যালু তালাশ করে। -## Using and providing context from the same component {/*using-and-providing-context-from-the-same-component*/} +## একই কম্পোনেন্ট থেকে কনটেক্সট Use এবং Provide করা {/*using-and-providing-context-from-the-same-component*/} -Currently, you still have to specify each section's `level` manually: +এখনও, প্রত্যেক সেকশনের `level` আপনি নিজেই নির্ধারিত করে দেয়া লাগছে: ```js export default function Page() { @@ -585,7 +585,7 @@ export default function Page() { ... ``` -Since context lets you read information from a component above, each `Section` could read the `level` from the `Section` above, and pass `level + 1` down automatically. Here is how you could do it: +যেহেতু কনটেক্সট উপরের একটি কম্পোনেন্ট থেকে আপনাকে ইনফর্মেশন read করতে দেয়, সেহেতু প্রত্যেক `Section` তার উপরের `Section` থেকে `level` কে read করতে, এবং নিচে `level + 1` অটোম্যাটিক ভাবে পাস করে দিতে পারে। আপনি চাইলে এমনটা এভাবে করে ফেলতে পারেন: ```js Section.js {5,8} import { useContext } from 'react'; @@ -603,7 +603,7 @@ export default function Section({ children }) { } ``` -With this change, you don't need to pass the `level` prop *either* to the `
` or to the ``: +এই পরিবর্তনের করে, আপনার `level` প্রপটিকে `
` কিংবা `` *কোনোটিকেই* পাস করা লাগবে না: @@ -695,11 +695,11 @@ export const LevelContext = createContext(0); -Now both `Heading` and `Section` read the `LevelContext` to figure out how "deep" they are. And the `Section` wraps its children into the `LevelContext` to specify that anything inside of it is at a "deeper" level. +এখন `Heading` এবং `Section` তারা উভয়ই কতো "deep" লেভেলে আছে সেটা বুঝার জন্য `LevelContext` কে read করছে। এবং `Section` এর ভিতরে যা আছে তা "deeper" লেভেল আছে এটা স্পষ্ট করার জন্য, এর চিলড্রেনকে `LevelContext` দিয়ে wrap করে। -This example uses heading levels because they show visually how nested components can override context. But context is useful for many other use cases too. You can pass down any information needed by the entire subtree: the current color theme, the currently logged in user, and so on. +এই এক্সাম্পলটি হেডিং লেভেলের ব্যবহার করেছে কারণ এতে দেখা যায় যে নেস্টেড কম্পোনেন্ট কিভাবে কনটেক্সটের ভ্যালু পুনরায় পরিবর্তন করে দিতে পরে। কিন্তু কনটেক্সট আরো অনেক ক্ষেত্রেও কাজে আসে। অ্যাপের নিম্নস্থ subtree এর প্রয়োজন এমন যেকোনো ইনফর্মেশন আপনি নিচের দিকে পাস করে দিতে পারেন: বর্তমান কালার থিম, বর্তমানে যে ইউজার লগড ইন ইত্যাদি। From 4a02979be64ab044f23018fb3499ed8b68d163b3 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Sun, 8 Oct 2023 00:06:27 +0600 Subject: [PATCH 10/20] finish 76% --- .../learn/passing-data-deeply-with-context.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index aa509e4e8..402ef707d 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -703,11 +703,11 @@ export const LevelContext = createContext(0); -## Context passes through intermediate components {/*context-passes-through-intermediate-components*/} +## কনটেক্সট মধ্যবর্তী কম্পোনেন্টগুলোকে ভেদ করে যেতে সক্ষম {/*context-passes-through-intermediate-components*/} -You can insert as many components as you like between the component that provides context and the one that uses it. This includes both built-in components like `
` and components you might build yourself. +যে কম্পোনেন্টটি কনটেক্সটকে provide করে আর যে কম্পোনেন্টটি use করে উভয়ের মাঝে আপনি যত খুশি তত কম্পোনেন্ট বসাতে পারবেন। এদের মাঝে আপনি বিল্ট-ইন কম্পোনেন্ট যেমন `div` এবং আপনার নিজের বানানো কম্পোনেন্ট উভয়ই ব্যবহার করতে পারবেন। -In this example, the same `Post` component (with a dashed border) is rendered at two different nesting levels. Notice that the `` inside of it gets its level automatically from the closest `
`: +এই উদাহরণে, একই `Post` কম্পোনেন্ট (ড্যাশড বর্ডারওয়ালা) দুইটা ভিন্ন ভিন্ন নেস্টেড লেভেলে রেন্ডার হচ্ছে। খেয়াল করুন এর ভিতরের `` তার লেভেল, অটোমেটিক্যালি নিকটতম `
` থেকে পাচ্ছে: @@ -832,13 +832,13 @@ export const LevelContext = createContext(0); -You didn't do anything special for this to work. A `Section` specifies the context for the tree inside it, so you can insert a `` anywhere, and it will have the correct size. Try it in the sandbox above! +এটা কাজ করানোর জন্য আপনার বিশেষ কিছু করা লাগেনি। একটি `Section` এর নিম্নস্থ ট্রির জন্য কনটেক্সট নির্ধারিত করে দেয়, তাই আপনি একটি `` যেকোনো জায়গায় বসাতে পারবেন, আর এটি এর সঠিক সাইজ পেয়ে যাবে। উপরের স্যান্ডবক্সে চর্চা করে দেখুন! -**Context lets you write components that "adapt to their surroundings" and display themselves differently depending on _where_ (or, in other words, _in which context_) they are being rendered.** +**কনটেক্সট আপনাকে এমন কম্পোনেন্ট তৈরি করতে দেয়, যা তার "আসে পাশের সাথে তাল মিলিয়ে চলতে পারে" এবং সেটি _কোথায়_ (অন্যভাবে বলতে গেলে, _কোন কনটেক্সটে_) রেন্ডার হচ্ছে, তার উপর নির্ভর করে নিজেকে ভিন্ন ভিন্ন ভাবে ডিসপ্লে করতে পারে।** -How context works might remind you of [CSS property inheritance.](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance) In CSS, you can specify `color: blue` for a `
`, and any DOM node inside of it, no matter how deep, will inherit that color unless some other DOM node in the middle overrides it with `color: green`. Similarly, in React, the only way to override some context coming from above is to wrap children into a context provider with a different value. +কনটেক্সটের কাজ করার পদ্ধতি আপনাকে [CSS property inheritance](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance) এর কথা মনে করিয়ে দিতে পারে, আপনি একটা `
` এর জন্য `color: blue` ঠিক করে দিবেন, তাহলে এর ভিতরের যেকোনো DOM node, তা যত গভীরেই হোক না কেনো, সেটি ঐ কালার পাবে যদিনা মাঝের অন্য কোনো DOM node কালারকে পরিবর্তন করে `color: green` বানিয়ে দেয়। একইভাবে, রিয়েক্টে, উপর থেকে আসতে থাকা কোনো কনটেক্সটকে পরিবর্তন করার একমাত্র উপায় হচ্ছে চিলড্রেনকে ভিন্ন একটি ভ্যালুর context provider দিয়ে wrap করা। -In CSS, different properties like `color` and `background-color` don't override each other. You can set all `
`'s `color` to red without impacting `background-color`. Similarly, **different React contexts don't override each other.** Each context that you make with `createContext()` is completely separate from other ones, and ties together components using and providing *that particular* context. One component may use or provide many different contexts without a problem. +CSS এ, ভিন্ন ভিন্ন property যেমন `color` এবং `background-color` একে অপরকে পরিবর্তন করে না। আপনি সকল `
` এর `color` কে red সেট করে দিলে সেটা `background-color` এর উপর কোনো প্রভাব পড়বে না। একইভাবে, **ভিন্ন ভিন্ন রিয়েক্ট কনটেক্সট একে অপরকে পরিবর্তন করে না।** আপনার `createContext()` দিয়ে তৈরি করা প্রত্যেক কনটেক্সট বাকি সকল কনটেক্সটগুলো থেকে পুরোপুরি বিচ্ছিন্ন, *এবং ঐ বিশেষ কনটেক্সটটি* use এবং provide করার দ্বারা কম্পোনেন্টসমূহ ঘিরে থাকে। একটি কম্পোনেন্ট একাধিক ভিন্ন ভিন্ন কনটেক্সট কোনো সমস্যা ছাড়াই use এবং provide করতে পারে। ## Before you use context {/*before-you-use-context*/} From acda1910731ad70ece929772607a2ffade681af4 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Mon, 9 Oct 2023 20:56:22 +0600 Subject: [PATCH 11/20] finish 80% --- .../learn/passing-data-deeply-with-context.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 402ef707d..c31f7874d 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -840,16 +840,16 @@ export const LevelContext = createContext(0); CSS এ, ভিন্ন ভিন্ন property যেমন `color` এবং `background-color` একে অপরকে পরিবর্তন করে না। আপনি সকল `
` এর `color` কে red সেট করে দিলে সেটা `background-color` এর উপর কোনো প্রভাব পড়বে না। একইভাবে, **ভিন্ন ভিন্ন রিয়েক্ট কনটেক্সট একে অপরকে পরিবর্তন করে না।** আপনার `createContext()` দিয়ে তৈরি করা প্রত্যেক কনটেক্সট বাকি সকল কনটেক্সটগুলো থেকে পুরোপুরি বিচ্ছিন্ন, *এবং ঐ বিশেষ কনটেক্সটটি* use এবং provide করার দ্বারা কম্পোনেন্টসমূহ ঘিরে থাকে। একটি কম্পোনেন্ট একাধিক ভিন্ন ভিন্ন কনটেক্সট কোনো সমস্যা ছাড়াই use এবং provide করতে পারে। -## Before you use context {/*before-you-use-context*/} +## কনটেক্সট ব্যবহারের পূর্বে যা জানা থাকা দরকার {/*before-you-use-context*/} -Context is very tempting to use! However, this also means it's too easy to overuse it. **Just because you need to pass some props several levels deep doesn't mean you should put that information into context.** +কনটেক্সট ব্যবহার অনেক লোভনীয় মনে হতে পারে! তবে বুঝতে হবে, এটাকে খুব অতিরিক্ত মাত্রায় ব্যবহার করা খুব সহজ। **শুধু কয়েক লেভেল গভীরে আপনার কিছু প্রপস পাস করতে হবে তাহলেই যে আপনার এই ইনফর্মেশন কনটেক্সট এ রাখতে হবে এমনটি নয়।** -Here's a few alternatives you should consider before using context: +কিছু বিকল্প রয়েছে যেগুলো কনটেক্সট ব্যবহারের পূর্বে বিবেচনা করা উচিৎ: -1. **Start by [passing props.](/learn/passing-props-to-a-component)** If your components are not trivial, it's not unusual to pass a dozen props down through a dozen components. It may feel like a slog, but it makes it very clear which components use which data! The person maintaining your code will be glad you've made the data flow explicit with props. -2. **Extract components and [pass JSX as `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) to them.** If you pass some data through many layers of intermediate components that don't use that data (and only pass it further down), this often means that you forgot to extract some components along the way. For example, maybe you pass data props like `posts` to visual components that don't use them directly, like ``. Instead, make `Layout` take `children` as a prop, and render ``. This reduces the number of layers between the component specifying the data and the one that needs it. +1. **[প্রপস পাস করা](/learn/passing-props-to-a-component) শুরু করতে পারেন** যদি আপনার কম্পোনেন্টগুলো মামুলি না হয়ে থাকে (মানে সেটি গুরুত্ব বহন করে), তাহলে ডজন খানিক প্রপসকে ডজন খানিক কম্পোনেন্টের মধ্যে দিয়ে পাস করা অস্বাভাবিক নয়। এটি অনেক সময়সাপেক্ষ কঠিন কাজ মানে হতে পারে, কিন্তু এই পদ্ধতিতে কোন কম্পোনেন্ট কোন ডেটা ইউজ করছে সেটি খুব পরিষ্কার হয়ে যায়! যে ব্যক্তি আপনার কোড মেইন্টেইন করবে সে আপনার ডেটা-প্রবাহ প্রপসের মাধ্যমে প্রকাশ্য রাখার জন্য বেশ খুশি হবে। +2. **কম্পোনেন্টগুলোকে এক্সট্র্যাক্ট (আলাদা) করে নিয়ে [JSX কে `children` হিসেবে পাস করতে পারেন](/learn/passing-props-to-a-component#passing-jsx-as-children)।** যদি আপনি কিছু ডেটা অনেক স্তরের মধ্যে দিয়ে মাঝের এমন অনেক কম্পোনেন্ট ভেদ করে পাস করেন (শুধুমাত্র ডেটাকে অনেক নিচে পাঠানোর উদ্দেশ্যে) যেসব কম্পোনেন্টের ঐ ডেটার প্রয়োজন নেই, প্রায়ই এর মানে এই যে আপনি মাঝের পথের কিছু কম্পোনেন্টকে আলাদা (এক্সট্র্যাক্ট) করতে ভুলে গেছেন। উদাহরণস্বরূপ, হয়তো আপনি ডেটা প্রপ যেমন `posts` এমন দৃশ্যমান কম্পোনেন্টসমূহকে পাস করেছেন যারা সে ডেটা সরাসরি ইউজ করে না, যেমন ``। এর পরিবর্তে, `Layout` কে এমন করে দিন যাতে প্রপ হিসেবে `children` কে গ্রহণ করতে পারে, এবং রেন্ডার করে ``। এটা ডেটা নির্ধারণকারী কম্পোনেন্ট এবং যে কম্পোনেন্টগুলো ডেটা গ্রহণ করবে তাদের মধ্যবর্তী স্তরের সংখ্যা কমায়। -If neither of these approaches works well for you, consider context. +এই উভয় পদ্ধতিই যদি আপনার কাছে ঠিক না মনে হয় তাহলে কনটেক্সট ব্যবহার নিয়ে ভেবে দেখতে পারেন। ## Use cases for context {/*use-cases-for-context*/} From 4e51f0cd5e7028453ca071ca550c72ee7350f3a5 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Tue, 10 Oct 2023 12:55:56 +0600 Subject: [PATCH 12/20] finish 84% --- .../learn/passing-data-deeply-with-context.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index c31f7874d..529893e3f 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -851,16 +851,16 @@ CSS এ, ভিন্ন ভিন্ন property যেমন `color` এবং এই উভয় পদ্ধতিই যদি আপনার কাছে ঠিক না মনে হয় তাহলে কনটেক্সট ব্যবহার নিয়ে ভেবে দেখতে পারেন। -## Use cases for context {/*use-cases-for-context*/} +## কনটেক্সটের ব্যবহার {/*use-cases-for-context*/} -* **Theming:** If your app lets the user change its appearance (e.g. dark mode), you can put a context provider at the top of your app, and use that context in components that need to adjust their visual look. -* **Current account:** Many components might need to know the currently logged in user. Putting it in context makes it convenient to read it anywhere in the tree. Some apps also let you operate multiple accounts at the same time (e.g. to leave a comment as a different user). In those cases, it can be convenient to wrap a part of the UI into a nested provider with a different current account value. -* **Routing:** Most routing solutions use context internally to hold the current route. This is how every link "knows" whether it's active or not. If you build your own router, you might want to do it too. -* **Managing state:** As your app grows, you might end up with a lot of state closer to the top of your app. Many distant components below may want to change it. It is common to [use a reducer together with context](/learn/scaling-up-with-reducer-and-context) to manage complex state and pass it down to distant components without too much hassle. +* **থিমিং:** যদি আপনার অ্যাপ ইউজারকে থিম চেঞ্জ করতে দেয় (যেমন, ডার্ক মোড), তখন আপনি আপনার অ্যাপের সবার উপরের স্তরে একটি কনটেক্সট প্রোভাইডার রাখতে পারেন, এবং কনটেক্সটটি ঐসকল কম্পোনেন্টের ভিতর ইউজ করতে পারেন যাদের বর্ণ থিমের সাথে পরিবর্তন হতে পারে। +* **বর্তমান একাউন্ট:** বর্তমানে কোন ইউজার লগড ইন আছে তা অনেক কম্পোনেন্টের জানা দরকার হতে পারে। এই ডেটটি কনটেক্সটি রাখলে tree এর যেকোনো স্থানে ডেটটি রিড করা সুবিধাজনক হয়ে যায়। কিছু অ্যাপ আপনাকে একই সময়ে কয়েকটি একাউন্ট ব্যবহার করতে দেয় (যেমন, আরেক ইউজার হয়ে কমেন্ট করতে দেয়া)। ঐসকল ক্ষেত্রে, UI এর একটি অংশ, ভিন্ন current account ভ্যালুর একটি নেস্টেড প্রোভাইডার দিয়ে wrap করাটা সহজ হতে পারে। +* **রাউটিং:** অধিকাংশ রাউটিং করার পদ্ধতিগুলো, বর্তমান রাউট মনে রাখার জন্য ভিতরে ভিতরে কনটেক্সট ইউজ করে। এভাবেই প্রত্যেকটি লিঙ্ক "জানতে পারে" যে সে active কিনা। যদি আপনি নিজেই রাউটার তৈরি করেন, আপনিও হয়তো এমনটাই করতে চাইবেন। +* **স্টেট ম্যানেজ করা:** আপনার অ্যাপ যখন বড় হতে থাকে, আপনি এমন পর্যায়ে চলে যেতে পারেন যখন আপনার অ্যাপের সবার উপরের স্তরের খুব কাছেই অনেক স্টেট একত্র হয়ে যায়। যেগুলো নিচের অনেক দূরবর্তী কম্পোনেন্ট পরিবর্তন করার প্রয়োজন পড়তে পারে। বেশি ঝামেলা ছাড়াই, জটিল স্টেট ম্যানেজ এবং সেগুলোকে নিচের অনেক দূরবর্তী কম্পোনেন্টসের কাছে পাস করার জন্য [একটি reducer কে কনটেক্সটের সাথে ব্যবহার করা](/learn/scaling-up-with-reducer-and-context) খুবই স্বাভাবিক। -Context is not limited to static values. If you pass a different value on the next render, React will update all the components reading it below! This is why context is often used in combination with state. +কনটেক্সট শুধু স্ট্যাটিক ভ্যালুর মধ্যেই সীমাবদ্ধ নয়। যদি আপনি পরবর্তী রেন্ডারে ভিন্ন ভ্যালু পাস করেন, রিয়েক্ট তখন এর নিম্নবর্তী সকল কম্পোনেন্ট যেগুলো ঐ ভ্যালু রিড করছিলো তাদেরকে আপডেট করবে! এজন্যই প্রায়ই কনটেক্সট ও স্টেট একত্রে ব্যবহার করা হয়ে থাকে। -In general, if some information is needed by distant components in different parts of the tree, it's a good indication that context will help you. +সাধারণভাবে, যদি কোনো ইনফর্মেশন tree এর বিভিন্ন অংশে দূরবর্তী কম্পোনেন্টগুলোর প্রয়োজন হয়, তাহলে কনটেক্সট তখন আপনার উপকারে আসবে এটি তার উত্তম লক্ষণ। From 54976d3337b6756829d4034875a0932bc0dc6497 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Tue, 24 Oct 2023 12:58:19 +0600 Subject: [PATCH 13/20] finish 100% --- .../learn/passing-data-deeply-with-context.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 529893e3f..0b2fcf5a3 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -864,26 +864,26 @@ CSS এ, ভিন্ন ভিন্ন property যেমন `color` এবং -* Context lets a component provide some information to the entire tree below it. -* To pass context: - 1. Create and export it with `export const MyContext = createContext(defaultValue)`. - 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep. - 3. Wrap children into `` to provide it from a parent. -* Context passes through any components in the middle. -* Context lets you write components that "adapt to their surroundings". -* Before you use context, try passing props or passing JSX as `children`. +* কনটেক্সট একটি কম্পোনেন্টকে এর নিম্নস্থ পুরো ট্রি কে কিছু ইনফর্মেশন প্রোভাইড করতে দেয়। +* কনটেক্সট পাস করতে হলে: + 1. `export const MyContext = createContext(defaultValue)` দিয়ে কনটেক্সট create করে export করুন। + 2. `useContext(MyContext)` হুককে কনটেক্সটটি পাস করুন যাতে যেকোনো চাইল্ড কম্পোনেন্ট থেকে সেটিকে read করা যায়, তা যত গভীরেই হোক না কেনো। + 3. চিলড্রেনকে `` দিয়ে wrap করুন যাতে একটি প্যারেন্ট থেকে কনটেক্সটটি প্রোভাইড করতে পারেন। +* কনটেক্সট মধ্যবর্তী যেকোনো কম্পোনেন্ট ভেদ করে যেতে পারে। +* কনটেক্সট আপনাকে এমন কম্পোনেন্ট তৈরি করতে দেয় যেগুলো "তাদের আসে পাশের সাথে তাল মিলিয়ে চলতে পারে"। +* কনটেক্সট ব্যবহার করার আগে, চেষ্টা করুন প্রপস পাস করতে বা JSX কে `children` হিসেবে পাস করতে। -#### Replace prop drilling with context {/*replace-prop-drilling-with-context*/} +#### প্রপ ড্রিলিং এর পরিবর্তে কনটেক্সট ব্যবহার করুন {/*replace-prop-drilling-with-context*/} -In this example, toggling the checkbox changes the `imageSize` prop passed to each ``. The checkbox state is held in the top-level `App` component, but each `` needs to be aware of it. +এই উদাহরণে, চেকবক্সটি toggle করলে `imageSize` প্রপকে পরিবর্তন হয়, যেটিকে প্রত্যেক `` এ পাস করা হয়েছে। চেকবক্সের স্টেটটি `App` কম্পোনেন্টে সবার উপরে আছে, কিন্তু প্রত্যেক `` এর এই স্টেট সম্পর্কে জানা প্রয়োজন। -Currently, `App` passes `imageSize` to `List`, which passes it to each `Place`, which passes it to the `PlaceImage`. Remove the `imageSize` prop, and instead pass it from the `App` component directly to `PlaceImage`. +বর্তমানে, `imageSize` স্টেটটি `App` থেকে `List` এ পাস হচ্ছে, সেখান থেকে আবার প্রত্যেক `Place` এ পাস হচ্ছে, সেখান থেকে আবার `PlaceImage` এ পাস হচ্ছে। এখন `imageSize` প্রপটিকে রিমুভ করে দিন, আর এর বদলে একে `App` কম্পোনেন্ট থেকে সরাসরি `PlaceImage` এ পাস করুন। -You can declare context in `Context.js`. +আপনি কনটেক্সটটি `Context.js` এ declare করতে পারেন। From 78e281986e6155196cd428f6e9ea7966ce098f32 Mon Sep 17 00:00:00 2001 From: Habib Mollah <115046415+HabibMollah@users.noreply.github.com> Date: Thu, 26 Oct 2023 19:18:47 +0600 Subject: [PATCH 14/20] =?UTF-8?q?Update=20src/content/learn/passing-data-d?= =?UTF-8?q?eeply-with-context.md:=20=E0=A6=A8=E0=A6=BF=E0=A6=AE=E0=A7=8D?= =?UTF-8?q?=E0=A6=A8=E0=A6=B8=E0=A7=8D=E0=A6=A5=20->=20=E0=A6=A8=E0=A6=BF?= =?UTF-8?q?=E0=A6=9A=E0=A7=87=E0=A6=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Nafis Tiham --- src/content/learn/passing-data-deeply-with-context.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 0b2fcf5a3..8f4e56fc0 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -4,7 +4,7 @@ title: Context এর মাধ্যমে ডেটা Deeply Pass করা -সাধারণত, আপনি props এর মাধ্যমে একটি প্যারেন্ট কম্পোনেন্ট থেকে একটি চাইল্ড কম্পোনেন্টে ইনফর্মেশন pass করবেন। কিন্তু যদি আপনার props কে মাঝের অনেক অনেক কম্পোনেন্টের মধ্যে দিয়ে pass করা লাগে, অথবা আপনার অ্যাপের অনেক কম্পোনেন্টের একই ইনফর্মেশনের দরকার হয়, তখন props পাস করা শব্দবহুল এবং ঝামেলাপূর্ণ হতে পারে। *Context* প্যারেন্ট কম্পোনেন্টকে এর নিম্নস্থ যেকোনো স্তরের যেকোনো কম্পোনেন্টের জন্য কিছু ইনফর্মেশন অ্যাভেইলেবল করতে দেয় (সে নিম্নস্থ কম্পোনেন্ট যতই গভীরে হোক না কেনো) এ ইনফর্মেশনকে props এর মাধ্যমে স্পষ্টভাবে pass করাও লাগেনা। +সাধারণত, আপনি props এর মাধ্যমে একটি প্যারেন্ট কম্পোনেন্ট থেকে একটি চাইল্ড কম্পোনেন্টে ইনফর্মেশন pass করবেন। কিন্তু যদি আপনার props কে মাঝের অনেক অনেক কম্পোনেন্টের মধ্যে দিয়ে pass করা লাগে, অথবা আপনার অ্যাপের অনেক কম্পোনেন্টের একই ইনফর্মেশনের দরকার হয়, তখন props পাস করা শব্দবহুল এবং ঝামেলাপূর্ণ হতে পারে। *Context* প্যারেন্ট কম্পোনেন্টকে এর নিচের যেকোনো স্তরের যেকোনো কম্পোনেন্টের জন্য কিছু ইনফর্মেশন অ্যাভেইলেবল করতে দেয় (সে নিচের কম্পোনেন্ট যতই গভীরে হোক না কেনো) এ ইনফর্মেশনকে props এর মাধ্যমে স্পষ্টভাবে pass করাও লাগেনা। From 1b6038cf09f4aaf0cee97fc7cc06fffbe8f061af Mon Sep 17 00:00:00 2001 From: Habib Mollah <115046415+HabibMollah@users.noreply.github.com> Date: Thu, 26 Oct 2023 19:29:36 +0600 Subject: [PATCH 15/20] =?UTF-8?q?Update=20src/content/learn/passing-data-d?= =?UTF-8?q?eeply-with-context.md=20=E0=A6=95=E0=A6=AE=E0=A7=8D=E0=A6=AA?= =?UTF-8?q?=E0=A6=A8=E0=A7=87=E0=A6=A8=E0=A7=8D=E0=A6=9F=E0=A7=87=E0=A6=B0?= =?UTF-8?q?=20->=20=E0=A6=95=E0=A6=AE=E0=A7=8D=E0=A6=AA=E0=A7=8B=E0=A6=A8?= =?UTF-8?q?=E0=A7=87=E0=A6=A8=E0=A7=8D=E0=A6=9F=E0=A7=87=E0=A6=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Nafis Tiham --- src/content/learn/passing-data-deeply-with-context.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 8f4e56fc0..f2e053d1c 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -42,7 +42,7 @@ Prop drilling ## কনটেক্সট: প্রপস পাস করার একটি বিকল্প পদ্ধতি {/*context-an-alternative-to-passing-props*/} -কনটেক্সট একটি প্যারেন্ট কম্পোনেন্টকে এর নিম্নস্থ সকল কম্পনেন্টের tree কে ডেটা সরবরাহ করতে দেয়। কনটেক্সটের বহু ব্যবহার রয়েছে। একটি উদাহরণ দেখা যাক। এই `Heading` কম্পোনেন্টকে একটু দেখুন যেটি এর সাইজের জন্য কোনো `level` গ্রহণ করে: +কনটেক্সট একটি প্যারেন্ট কম্পোনেন্টকে এর নিম্নস্থ সকল কম্পোনেন্টের tree কে ডেটা সরবরাহ করতে দেয়। কনটেক্সটের বহু ব্যবহার রয়েছে। একটি উদাহরণ দেখা যাক। এই `Heading` কম্পোনেন্টকে একটু দেখুন যেটি এর সাইজের জন্য কোনো `level` গ্রহণ করে: From 58f6d19408f856d6db415793a434b6d683a0d82b Mon Sep 17 00:00:00 2001 From: Habib Mollah <115046415+HabibMollah@users.noreply.github.com> Date: Thu, 26 Oct 2023 19:31:01 +0600 Subject: [PATCH 16/20] =?UTF-8?q?Update=20src/content/learn/passing-data-d?= =?UTF-8?q?eeply-with-context.md=20=E0=A6=A4=E0=A6=BE=E0=A6=B2=E0=A6=BE?= =?UTF-8?q?=E0=A6=B6=20=E0=A6=95=E0=A6=B0=E0=A6=BE=E0=A6=B0=20->=20?= =?UTF-8?q?=E0=A6=9A=E0=A6=BE=E0=A6=87=E0=A6=AC=E0=A6=BE=E0=A6=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Nafis Tiham --- src/content/learn/passing-data-deeply-with-context.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index f2e053d1c..f35a73f00 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -200,7 +200,7 @@ export default function Heading({ level, children }) {
``` -কিন্তু `` কম্পোনেন্টটি কিভাবে এর সবচেয়ে কাছের `
` এর level জানবে? **তা করার জন্য tree এর উপরের কোথাও বিদ্যমান ডাটা, চাইল্ডের "তালাশ করার" জন্য কোনো উপায় থাকা লাগবে।** +কিন্তু `` কম্পোনেন্টটি কিভাবে এর সবচেয়ে কাছের `
` এর level জানবে? **তা করার জন্য tree এর উপরের কোথাও বিদ্যমান ডাটা, চাইল্ডের "চাইবার" জন্য কোনো উপায় থাকা লাগবে।** আপনি শুধু প্রপস দিয়েই এটা করতে পারবেন না। এখানেই context এর ভূমিকা চলে আসে। আপনার তা তিনটি ধাপে করতে হবে: From 927b732f525c37e70310960f743928249c4aa2b3 Mon Sep 17 00:00:00 2001 From: Habib Mollah <115046415+HabibMollah@users.noreply.github.com> Date: Thu, 26 Oct 2023 19:32:38 +0600 Subject: [PATCH 17/20] =?UTF-8?q?Update=20src/content/learn/passing-data-d?= =?UTF-8?q?eeply-with-context.md=20->=20=E0=A6=B0=E0=A6=BF=E0=A6=AF?= =?UTF-8?q?=E0=A6=BC=E0=A7=87=E0=A6=95=E0=A7=8D=E0=A6=9F=E0=A6=95=E0=A7=87?= =?UTF-8?q?=20->=20React=20=E0=A6=95=E0=A7=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Nafis Tiham --- src/content/learn/passing-data-deeply-with-context.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index f35a73f00..d04382f8b 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -476,7 +476,7 @@ export default function Section({ level, children }) { } ``` -এটা রিয়েক্টকে বলে দেয় যে: "যদি এই `
` এর ভিতরের কোনো কম্পোনেন্ট `LevelContext` তালাশ করে, তবে তাকে এই `level` দিয়ে দাও"। তখন কম্পোনেন্টটি UI ট্রি এর ভিতর এর সবচেয়ে কাছের `` এর ভ্যালু ইউজ করবে। +এটা React কে বলে দেয় যে: "যদি এই `
` এর ভিতরের কোনো কম্পোনেন্ট `LevelContext` তালাশ করে, তবে তাকে এই `level` দিয়ে দাও"। তখন কম্পোনেন্টটি UI ট্রি এর ভিতর এর সবচেয়ে কাছের `` এর ভ্যালু ইউজ করবে। From 4c8e1d521b8631b652a4710cf35c22dfda1c4ad0 Mon Sep 17 00:00:00 2001 From: Habib Mollah <115046415+HabibMollah@users.noreply.github.com> Date: Thu, 26 Oct 2023 19:35:03 +0600 Subject: [PATCH 18/20] =?UTF-8?q?Update=20src/content/learn/passing-data-d?= =?UTF-8?q?eeply-with-context.md=20=E0=A6=95=E0=A6=B0=E0=A7=87=20->=20?= =?UTF-8?q?=E0=A6=95=E0=A6=BE=E0=A6=B0=E0=A6=A3=E0=A7=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Nafis Tiham --- src/content/learn/passing-data-deeply-with-context.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index d04382f8b..d66658d9d 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -603,7 +603,7 @@ export default function Section({ children }) { } ``` -এই পরিবর্তনের করে, আপনার `level` প্রপটিকে `
` কিংবা `` *কোনোটিকেই* পাস করা লাগবে না: +এই পরিবর্তনের কারণে, আপনার `level` প্রপটিকে `
` কিংবা `` *কোনোটিকেই* পাস করা লাগবে না: From 5db7ffc804711056c2d14b7afe840440d88f4930 Mon Sep 17 00:00:00 2001 From: Habib Mollah <115046415+HabibMollah@users.noreply.github.com> Date: Thu, 26 Oct 2023 19:36:53 +0600 Subject: [PATCH 19/20] =?UTF-8?q?Update=20src/content/learn/passing-data-d?= =?UTF-8?q?eeply-with-context.md=20=E0=A6=8F=E0=A6=95=E0=A7=8D=E0=A6=B8?= =?UTF-8?q?=E0=A6=BE=E0=A6=AE=E0=A7=8D=E0=A6=AA=E0=A6=B2=E0=A6=9F=E0=A6=BF?= =?UTF-8?q?=20->=20=E0=A6=89=E0=A6=A6=E0=A6=BE=E0=A6=B9=E0=A6=B0=E0=A6=A3?= =?UTF-8?q?=E0=A6=9F=E0=A6=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Nafis Tiham --- src/content/learn/passing-data-deeply-with-context.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index d66658d9d..b263729ba 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -699,7 +699,7 @@ export const LevelContext = createContext(0); -এই এক্সাম্পলটি হেডিং লেভেলের ব্যবহার করেছে কারণ এতে দেখা যায় যে নেস্টেড কম্পোনেন্ট কিভাবে কনটেক্সটের ভ্যালু পুনরায় পরিবর্তন করে দিতে পরে। কিন্তু কনটেক্সট আরো অনেক ক্ষেত্রেও কাজে আসে। অ্যাপের নিম্নস্থ subtree এর প্রয়োজন এমন যেকোনো ইনফর্মেশন আপনি নিচের দিকে পাস করে দিতে পারেন: বর্তমান কালার থিম, বর্তমানে যে ইউজার লগড ইন ইত্যাদি। +এই উদাহরণটি হেডিং লেভেলের ব্যবহার করেছে কারণ এতে দেখা যায় যে নেস্টেড কম্পোনেন্ট কিভাবে কনটেক্সটের ভ্যালু পুনরায় পরিবর্তন করে দিতে পরে। কিন্তু কনটেক্সট আরো অনেক ক্ষেত্রেও কাজে আসে। অ্যাপের নিম্নস্থ subtree এর প্রয়োজন এমন যেকোনো ইনফর্মেশন আপনি নিচের দিকে পাস করে দিতে পারেন: বর্তমান কালার থিম, বর্তমানে যে ইউজার লগড ইন ইত্যাদি। From 95bc33041335a2c57e95f16db2e7b690a7754cbb Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Thu, 26 Oct 2023 20:15:43 +0600 Subject: [PATCH 20/20] =?UTF-8?q?replace=20=E0=A6=B0=E0=A6=BF=E0=A6=AF?= =?UTF-8?q?=E0=A6=BC=E0=A7=87=E0=A6=95=E0=A7=8D=E0=A6=9F=20with=20React/re?= =?UTF-8?q?act?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/learn/passing-data-deeply-with-context.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index b263729ba..dafba4785 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -336,7 +336,7 @@ export default function Heading({ children }) { } ``` -`useContext` একটি হুক। ঠিক `useState` এবং `useReducer` এর মতো, আপনি একটি হুককে React কম্পোনেন্টের ভিতর শুধুমাত্র সবার শুরুতে কল করতে পারবেন (লুপ কিংবা কন্ডিশনের ভিতর না)। **`useContext` রিয়েক্টকে বলে দেয় যে `Heading` কম্পোনেন্টটি `LevelContext` কে read করতে চাচ্ছে।** +`useContext` একটি হুক। ঠিক `useState` এবং `useReducer` এর মতো, আপনি একটি হুককে React কম্পোনেন্টের ভিতর শুধুমাত্র সবার শুরুতে কল করতে পারবেন (লুপ কিংবা কন্ডিশনের ভিতর না)। **`useContext` React কে বলে দেয় যে `Heading` কম্পোনেন্টটি `LevelContext` কে read করতে চাচ্ছে।** এখন যেহেতু `Heading` কম্পোনেন্টটির কোনো `level` প্রপ নেই, আপনার লেভেল প্রপটিকে JSX এর ভিতর `Heading` কে এভাবে পাস করার কোনো প্রয়োজন নেই: @@ -836,9 +836,9 @@ export const LevelContext = createContext(0); **কনটেক্সট আপনাকে এমন কম্পোনেন্ট তৈরি করতে দেয়, যা তার "আসে পাশের সাথে তাল মিলিয়ে চলতে পারে" এবং সেটি _কোথায়_ (অন্যভাবে বলতে গেলে, _কোন কনটেক্সটে_) রেন্ডার হচ্ছে, তার উপর নির্ভর করে নিজেকে ভিন্ন ভিন্ন ভাবে ডিসপ্লে করতে পারে।** -কনটেক্সটের কাজ করার পদ্ধতি আপনাকে [CSS property inheritance](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance) এর কথা মনে করিয়ে দিতে পারে, আপনি একটা `
` এর জন্য `color: blue` ঠিক করে দিবেন, তাহলে এর ভিতরের যেকোনো DOM node, তা যত গভীরেই হোক না কেনো, সেটি ঐ কালার পাবে যদিনা মাঝের অন্য কোনো DOM node কালারকে পরিবর্তন করে `color: green` বানিয়ে দেয়। একইভাবে, রিয়েক্টে, উপর থেকে আসতে থাকা কোনো কনটেক্সটকে পরিবর্তন করার একমাত্র উপায় হচ্ছে চিলড্রেনকে ভিন্ন একটি ভ্যালুর context provider দিয়ে wrap করা। +কনটেক্সটের কাজ করার পদ্ধতি আপনাকে [CSS property inheritance](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance) এর কথা মনে করিয়ে দিতে পারে, আপনি একটা `
` এর জন্য `color: blue` ঠিক করে দিবেন, তাহলে এর ভিতরের যেকোনো DOM node, তা যত গভীরেই হোক না কেনো, সেটি ঐ কালার পাবে যদিনা মাঝের অন্য কোনো DOM node কালারকে পরিবর্তন করে `color: green` বানিয়ে দেয়। একইভাবে, React এ, উপর থেকে আসতে থাকা কোনো কনটেক্সটকে পরিবর্তন করার একমাত্র উপায় হচ্ছে চিলড্রেনকে ভিন্ন একটি ভ্যালুর context provider দিয়ে wrap করা। -CSS এ, ভিন্ন ভিন্ন property যেমন `color` এবং `background-color` একে অপরকে পরিবর্তন করে না। আপনি সকল `
` এর `color` কে red সেট করে দিলে সেটা `background-color` এর উপর কোনো প্রভাব পড়বে না। একইভাবে, **ভিন্ন ভিন্ন রিয়েক্ট কনটেক্সট একে অপরকে পরিবর্তন করে না।** আপনার `createContext()` দিয়ে তৈরি করা প্রত্যেক কনটেক্সট বাকি সকল কনটেক্সটগুলো থেকে পুরোপুরি বিচ্ছিন্ন, *এবং ঐ বিশেষ কনটেক্সটটি* use এবং provide করার দ্বারা কম্পোনেন্টসমূহ ঘিরে থাকে। একটি কম্পোনেন্ট একাধিক ভিন্ন ভিন্ন কনটেক্সট কোনো সমস্যা ছাড়াই use এবং provide করতে পারে। +CSS এ, ভিন্ন ভিন্ন property যেমন `color` এবং `background-color` একে অপরকে পরিবর্তন করে না। আপনি সকল `
` এর `color` কে red সেট করে দিলে সেটা `background-color` এর উপর কোনো প্রভাব পড়বে না। একইভাবে, **ভিন্ন ভিন্ন React কনটেক্সট একে অপরকে পরিবর্তন করে না।** আপনার `createContext()` দিয়ে তৈরি করা প্রত্যেক কনটেক্সট বাকি সকল কনটেক্সটগুলো থেকে পুরোপুরি বিচ্ছিন্ন, *এবং ঐ বিশেষ কনটেক্সটটি* use এবং provide করার দ্বারা কম্পোনেন্টসমূহ ঘিরে থাকে। একটি কম্পোনেন্ট একাধিক ভিন্ন ভিন্ন কনটেক্সট কোনো সমস্যা ছাড়াই use এবং provide করতে পারে। ## কনটেক্সট ব্যবহারের পূর্বে যা জানা থাকা দরকার {/*before-you-use-context*/} @@ -858,7 +858,7 @@ CSS এ, ভিন্ন ভিন্ন property যেমন `color` এবং * **রাউটিং:** অধিকাংশ রাউটিং করার পদ্ধতিগুলো, বর্তমান রাউট মনে রাখার জন্য ভিতরে ভিতরে কনটেক্সট ইউজ করে। এভাবেই প্রত্যেকটি লিঙ্ক "জানতে পারে" যে সে active কিনা। যদি আপনি নিজেই রাউটার তৈরি করেন, আপনিও হয়তো এমনটাই করতে চাইবেন। * **স্টেট ম্যানেজ করা:** আপনার অ্যাপ যখন বড় হতে থাকে, আপনি এমন পর্যায়ে চলে যেতে পারেন যখন আপনার অ্যাপের সবার উপরের স্তরের খুব কাছেই অনেক স্টেট একত্র হয়ে যায়। যেগুলো নিচের অনেক দূরবর্তী কম্পোনেন্ট পরিবর্তন করার প্রয়োজন পড়তে পারে। বেশি ঝামেলা ছাড়াই, জটিল স্টেট ম্যানেজ এবং সেগুলোকে নিচের অনেক দূরবর্তী কম্পোনেন্টসের কাছে পাস করার জন্য [একটি reducer কে কনটেক্সটের সাথে ব্যবহার করা](/learn/scaling-up-with-reducer-and-context) খুবই স্বাভাবিক। -কনটেক্সট শুধু স্ট্যাটিক ভ্যালুর মধ্যেই সীমাবদ্ধ নয়। যদি আপনি পরবর্তী রেন্ডারে ভিন্ন ভ্যালু পাস করেন, রিয়েক্ট তখন এর নিম্নবর্তী সকল কম্পোনেন্ট যেগুলো ঐ ভ্যালু রিড করছিলো তাদেরকে আপডেট করবে! এজন্যই প্রায়ই কনটেক্সট ও স্টেট একত্রে ব্যবহার করা হয়ে থাকে। +কনটেক্সট শুধু স্ট্যাটিক ভ্যালুর মধ্যেই সীমাবদ্ধ নয়। যদি আপনি পরবর্তী রেন্ডারে ভিন্ন ভ্যালু পাস করেন, React তখন এর নিম্নবর্তী সকল কম্পোনেন্ট যেগুলো ঐ ভ্যালু রিড করছিলো তাদেরকে আপডেট করবে! এজন্যই প্রায়ই কনটেক্সট ও স্টেট একত্রে ব্যবহার করা হয়ে থাকে। সাধারণভাবে, যদি কোনো ইনফর্মেশন tree এর বিভিন্ন অংশে দূরবর্তী কম্পোনেন্টগুলোর প্রয়োজন হয়, তাহলে কনটেক্সট তখন আপনার উপকারে আসবে এটি তার উত্তম লক্ষণ।