Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create context #97

Merged
merged 4 commits into from
Oct 17, 2023
Merged

Create context #97

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fcdf481
createcontext-40%
nafistiham Aug 16, 2023
4df987e
createcontext-done-60%
nafistiham Sep 21, 2023
1075f57
create context done
nafistiham Oct 12, 2023
0144710
create-context-fix
nafistiham Oct 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 33 additions & 33 deletions src/content/reference/react/createContext.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: createContext

<Intro>

`createContext` lets you create a [context](/learn/passing-data-deeply-with-context) that components can provide or read.
`createContext` আপনাকে একটি [context](/learn/passing-data-deeply-with-context) তৈরি করতে দেয় যা component provide বা read করতে পারে।

```js
const SomeContext = createContext(defaultValue)
Expand All @@ -16,38 +16,38 @@ const SomeContext = createContext(defaultValue)

---

## Reference {/*reference*/}
## রেফারেন্স {/*reference*/}

### `createContext(defaultValue)` {/*createcontext*/}

Call `createContext` outside of any components to create a context.
কনটেক্সট তৈরী করবার জন্য যেকোন কম্পোনেন্টের বাইরে `createContext` কল করুন।

```js
import { createContext } from 'react';

const ThemeContext = createContext('light');
```

[See more examples below.](#usage)
[নিচে আরো উদাহরণ দেখুন।](#usage)

#### Parameters {/*parameters*/}
#### প্যারামিটার {/*parameters*/}

* `defaultValue`: The value that you want the context to have when there is no matching context provider in the tree above the component that reads context. If you don't have any meaningful default value, specify `null`. The default value is meant as a "last resort" fallback. It is static and never changes over time.
* `defaultValue`: এটা হল সেই ভ্যালু যেটা আপনি চান যে কনটেক্সটের থাকুক। কখন? যখন সেই কনটেক্সট যেই component read করবে, ট্রিতে তার উপরে কোন ম্যাচিং কনটেক্সট প্রোভাইডার নেই। যদি আপনার কোন অর্থবহ default ভ্যালু না থাকে, ভ্যালুটা `null` করে দেন। ডিফল্ট ভ্যালু একদম "last resort" ফলব্যাক হিসেবে রাখা হয়। এটা স্ট্যাটিক এবং সময়ের সাথে অপরিবর্তিত থাকে।

#### Returns {/*returns*/}
#### রিটার্ন {/*returns*/}

`createContext` returns a context object.
`createContext` একটি কনটেক্সট অবজেক্ট রিটার্ন করে।

**The context object itself does not hold any information.** It represents _which_ context other components read or provide. Typically, you will use [`SomeContext.Provider`](#provider) in components above to specify the context value, and call [`useContext(SomeContext)`](/reference/react/useContext) in components below to read it. The context object has a few properties:
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nafistiham Bhai,,
Translation is 100% okay, Apni just ei 41th line ta miss kore gesen.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done vai. Thanks a lot for pointing it out. These days, I rarely have the time to finish a page in one sitting. So, missing lines in between. Haha.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nomandhoni-cs vai

**কনটেক্সট অবজেক্ট নিজে কোন তথ্য ধারণ করে না।** এটা _সেই_ কনটেক্সটকে রিপ্রেজেন্ট করে যেটা অন্যান্য কম্পোনেন্টগুলো read বা provide করে। সাধারণত, কনটেক্সট ভ্যালু নির্দিষ্ট করতে আপনি উপরের কম্পোনেন্টে [`SomeContext.Provider`](#provider) ব্যবহার করবেন, এবং এটাকে read করতে নিচের কম্পোনেন্টগুলোতে [`useContext(SomeContext)`](/reference/react/useContext) কল করবেন। কনটেক্সট অবজেক্টের কিছু প্রপার্টি আছেঃ

* `SomeContext.Provider` lets you provide the context value to components.
* `SomeContext.Consumer` is an alternative and rarely used way to read the context value.
* `SomeContext.Provider` আপনাকে কম্পোনেন্টে কনটেক্সট ভ্যালু দেয়ার সুযোগ দেয়।
* `SomeContext.Consumer` একটি উপায়ান্তর যা কনটেক্সট ভ্যালু read করার জন্য বিরল ভাবে ব্যবহৃত হয়।

---

### `SomeContext.Provider` {/*provider*/}

Wrap your components into a context provider to specify the value of this context for all components inside:
আপনার কম্পোনেন্টগুলোকে একটি কনটেক্সট প্রোভাইডারে wrap করে ফেলুন এবং এর মাধ্যমে এই সকল কম্পোনেন্টের জন্য এই কন্টেক্সটের মান নির্দিষ্ট করে দিনঃ

```js
function App() {
Expand All @@ -63,13 +63,13 @@ function App() {

#### Props {/*provider-props*/}

* `value`: The value that you want to pass to all the components reading this context inside this provider, no matter how deep. The context value can be of any type. A component calling [`useContext(SomeContext)`](/reference/react/useContext) inside of the provider receives the `value` of the innermost corresponding context provider above it.
* `value`: এটা হচ্ছে সেই ভ্যালু যেটা আপনি এই প্রোভাইডারের সেই সকল কম্পোনেন্ট দিয়ে read করাতে চান, সেটা যত গভীরেই হোক না কেন। কনটেক্সট ভ্যালু যেকোন টাইপের হতে পারে। যখন প্রোভাইডারের মধ্যে থাকা একটি কম্পোনেন্ট [`useContext(SomeContext)`](/reference/react/useContext) কল করে, তখন এটা তার উপরে সবচেয়ে ভিতরকার কনটেক্সট প্রোভাইডারের `value` রিসিভ করে।

---

### `SomeContext.Consumer` {/*consumer*/}

Before `useContext` existed, there was an older way to read context:
`useContext` আসার আগে, কনটেক্সট read করার জন্য একটি পুরনো উপায় ছিলঃ

```js
function Button() {
Expand All @@ -84,7 +84,7 @@ function Button() {
}
```

Although this older way still works, but **newly written code should read context with [`useContext()`](/reference/react/useContext) instead:**
যদিও এই পুরনো উপায়টি এখনো কাজ করে, তবে **নতুন করে লেখা কোডে কনটেক্সট read করার জন্য বরং [`useContext()`](/reference/react/useContext) ব্যবহার করা উচিতঃ**

```js
function Button() {
Expand All @@ -96,17 +96,17 @@ function Button() {

#### Props {/*consumer-props*/}

* `children`: A function. React will call the function you pass with the current context value determined by the same algorithm as [`useContext()`](/reference/react/useContext) does, and render the result you return from this function. React will also re-run this function and update the UI whenever the context from the parent components changes.
* `children`: একটি ফাংশন। React আপনার pass করা ফাংশনকে কল করবে বর্তমান কনটেক্সট ভ্যালু দিয়ে যেটা [`useContext()`](/reference/react/useContext) এর মতই এলগোরিদম দিয়ে নির্ণয়কৃত, এবং এই ফাংশন থেকে আপনার রিটার্ন করা ফলাফল রেন্ডার করবে। React এই ফাংশন আবার রান করবে এবং প্যারেন্ট কম্পোনেন্টের কনটেক্সট বদলালেই UI আপডেট করে ফেলবে।

---

## Usage {/*usage*/}
## ব্যবহার {/*usage*/}

### Creating context {/*creating-context*/}
### কনটেক্সট তৈরি {/*creating-context*/}

Context lets components [pass information deep down](/learn/passing-data-deeply-with-context) without explicitly passing props.
কনটেক্সট কম্পোনেটদেরকে [বেশ গভীরে তথ্য পাঠানোর সুযোগ দেয়](/learn/passing-data-deeply-with-context) explicitly props পাঠানো ছাড়াই।

Call `createContext` outside any components to create one or more contexts.
যেকোন কম্পোনেন্টের বাইরে `createContext` কল করুন এক বা একাধিক কনটেক্সট তৈরি করার জন্য।

```js [[1, 3, "ThemeContext"], [1, 4, "AuthContext"], [3, 3, "'light'"], [3, 4, "null"]]
import { createContext } from 'react';
Expand All @@ -129,9 +129,9 @@ function Profile() {
}
```

By default, the values they receive will be the <CodeStep step={3}>default values</CodeStep> you have specified when creating the contexts. However, by itself this isn't useful because the default values never change.
ডিফল্টভাবে, যেই ভ্যালুগুলো তারা পাবে সেগুলো হবে <CodeStep step={3}>default values</CodeStep> যা আপনি কনটেক্সট তৈরি করার সময় নির্দিষ্ট করে দিয়েছিলেন। তবে, এটা নিজে নিজে খুব একটা কাজের না কারণ ডিফল্ট ভ্যালু কখনো বদলায় না।

Context is useful because you can **provide other, dynamic values from your components:**
Context কাজের কেননা আপনি **আপনার কম্পোনেন্ট গুলো থেকে অন্যান্য, dynamic মান provide করতে পারবেনঃ**

```js {8-9,11-12}
function App() {
Expand All @@ -150,15 +150,15 @@ function App() {
}
```

Now the `Page` component and any components inside it, no matter how deep, will "see" the passed context values. If the passed context values change, React will re-render the components reading the context as well.
এখন `Page` কম্পোনেন্ট এবং এর মধ্যে থাকা যেকোন কম্পোনেন্ট, সেটা যত গভীরেই হোক না কেন, pass হওয়া context ভ্যালু "দেখতে" পারবে। যদি passed হওয়া কনটেক্সট এর ভ্যালু বদলায়, React কনটেক্সট read করে কম্পোনেন্ট পুনরায় render করবে।

[Read more about reading and providing context and see examples.](/reference/react/useContext)
[কনটেক্সট reading এবং providing এর বিষয়ে আরো পড়ুন এবং উদাহরণ দেখুন।](/reference/react/useContext)

---

### Importing and exporting context from a file {/*importing-and-exporting-context-from-a-file*/}
### একটি ফাইল থেকে কনটেক্সট ইমপোর্ট এবং এক্সপোর্ট {/*importing-and-exporting-context-from-a-file*/}

Often, components in different files will need access to the same context. This is why it's common to declare contexts in a separate file. Then you can use the [`export` statement](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) to make context available for other files:
প্রায় সময়ই, ভিন্ন ভিন্ন ফাইলের কম্পোনেন্ট এর একই কনটেক্সট এক্সেস করার প্রয়োজন হবে। এ কারণে, সাধারণত, একটা আলাদা ফাইলে কনটেক্সট ডিক্লেয়ার করা হয়। তখন আপনি অন্যান্য ফাইলের জন্য কনতেক্সট এভেইলেবল করতে [`export` statement](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) ব্যবহার করতে পারেনঃ

```js {4-5}
// Contexts.js
Expand All @@ -168,7 +168,7 @@ export const ThemeContext = createContext('light');
export const AuthContext = createContext(null);
```

Components declared in other files can then use the [`import`](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/import) statement to read or provide this context:
এর পর অন্যান্য ফাইলে ডিক্লেয়ার হওয়া কম্পোনেন্টগুলো এই কনটেক্সট রিড বা প্রোভাইড করার জন্য [`import`](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/import) statement ব্যবহার করতে পারেঃ

```js {2}
// Button.js
Expand Down Expand Up @@ -196,22 +196,22 @@ function App() {
}
```

This works similar to [importing and exporting components.](/learn/importing-and-exporting-components)
এটা [components ইমপোর্ট এবং এক্সপোর্টের](/learn/importing-and-exporting-components) মত কাজ করে।

---

## Troubleshooting {/*troubleshooting*/}
## ট্রাবলশ্যুট {/*troubleshooting*/}

### I can't find a way to change the context value {/*i-cant-find-a-way-to-change-the-context-value*/}
### আমি কনটেক্সট ভ্যালু পরিবর্তন করার কোন উপায় খুঁজে পাচ্ছি না {/*i-cant-find-a-way-to-change-the-context-value*/}


Code like this specifies the *default* context value:
এমন কোড *default* কনটেক্সট ভ্যালু নির্দেশ করেঃ

```js
const ThemeContext = createContext('light');
```

This value never changes. React only uses this value as a fallback if it can't find a matching provider above.
এই ভ্যালু কখনো পরিবর্তিত হয় না। যদি React উপড়ে কোন matching provider না পায় তখন এই ভ্যালুটা কেবল মাত্র fallback হিসেবে ব্যবহার করে।

To make context change over time, [add state and wrap components in a context provider.](/reference/react/useContext#updating-data-passed-via-context)
সময়ের সাথে সাথে কনটেক্সট চেঞ্জ করতে, [state যোগ করুন এবং কনটেক্সট প্রোভাইডারের মধ্যে components wrap করুন।](/reference/react/useContext#updating-data-passed-via-context)

Loading