Skip to content

Commit a10a622

Browse files
nomandhoni-csnomandhoni-cs
authored
Merge pull request #97 from nafistiham/create-context
Create context
2 parents e86bbcf + 0144710 commit a10a622

File tree

1 file changed

+33
-33
lines changed

1 file changed

+33
-33
lines changed

‎src/content/reference/react/createContext.md

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: createContext
44

55
<Intro>
66

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

99
```js
1010
const SomeContext = createContext(defaultValue)
@@ -16,38 +16,38 @@ const SomeContext = createContext(defaultValue)
1616

1717
---
1818

19-
## Reference {/*reference*/}
19+
## রেফারেন্স {/*reference*/}
2020

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

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

2525
```js
2626
import { createContext } from 'react';
2727

2828
const ThemeContext = createContext('light');
2929
```
3030

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

33-
#### Parameters {/*parameters*/}
33+
#### প্যারামিটার {/*parameters*/}
3434

35-
* `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.
35+
* `defaultValue`: এটা হল সেই ভ্যালু যেটা আপনি চান যে কনটেক্সটের থাকুক। কখন? যখন সেই কনটেক্সট যেই component read করবে, ট্রিতে তার উপরে কোন ম্যাচিং কনটেক্সট প্রোভাইডার নেই। যদি আপনার কোন অর্থবহ default ভ্যালু না থাকে, ভ্যালুটা `null` করে দেন। ডিফল্ট ভ্যালু একদম "last resort" ফলব্যাক হিসেবে রাখা হয়। এটা স্ট্যাটিক এবং সময়ের সাথে অপরিবর্তিত থাকে।
3636

37-
#### Returns {/*returns*/}
37+
#### রিটার্ন {/*returns*/}
3838

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

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

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

4646
---
4747

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

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

5252
```js
5353
function App() {
@@ -63,13 +63,13 @@ function App() {
6363

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

66-
* `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.
66+
* `value`: এটা হচ্ছে সেই ভ্যালু যেটা আপনি এই প্রোভাইডারের সেই সকল কম্পোনেন্ট দিয়ে read করাতে চান, সেটা যত গভীরেই হোক না কেন। কনটেক্সট ভ্যালু যেকোন টাইপের হতে পারে। যখন প্রোভাইডারের মধ্যে থাকা একটি কম্পোনেন্ট [`useContext(SomeContext)`](/reference/react/useContext) কল করে, তখন এটা তার উপরে সবচেয়ে ভিতরকার কনটেক্সট প্রোভাইডারের `value` রিসিভ করে।
6767

6868
---
6969

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

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

7474
```js
7575
function Button() {
@@ -84,7 +84,7 @@ function Button() {
8484
}
8585
```
8686

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

8989
```js
9090
function Button() {
@@ -96,17 +96,17 @@ function Button() {
9696

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

99-
* `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.
99+
* `children`: একটি ফাংশন। React আপনার pass করা ফাংশনকে কল করবে বর্তমান কনটেক্সট ভ্যালু দিয়ে যেটা [`useContext()`](/reference/react/useContext) এর মতই এলগোরিদম দিয়ে নির্ণয়কৃত, এবং এই ফাংশন থেকে আপনার রিটার্ন করা ফলাফল রেন্ডার করবে। React এই ফাংশন আবার রান করবে এবং প্যারেন্ট কম্পোনেন্টের কনটেক্সট বদলালেই UI আপডেট করে ফেলবে।
100100

101101
---
102102

103-
## Usage {/*usage*/}
103+
## ব্যবহার {/*usage*/}
104104

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

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

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

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

132-
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.
132+
ডিফল্টভাবে, যেই ভ্যালুগুলো তারা পাবে সেগুলো হবে <CodeStep step={3}>default values</CodeStep> যা আপনি কনটেক্সট তৈরি করার সময় নির্দিষ্ট করে দিয়েছিলেন। তবে, এটা নিজে নিজে খুব একটা কাজের না কারণ ডিফল্ট ভ্যালু কখনো বদলায় না।
133133

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

136136
```js {8-9,11-12}
137137
function App() {
@@ -150,15 +150,15 @@ function App() {
150150
}
151151
```
152152

153-
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.
153+
এখন `Page` কম্পোনেন্ট এবং এর মধ্যে থাকা যেকোন কম্পোনেন্ট, সেটা যত গভীরেই হোক না কেন, pass হওয়া context ভ্যালু "দেখতে" পারবে। যদি passed হওয়া কনটেক্সট এর ভ্যালু বদলায়, React কনটেক্সট read করে কম্পোনেন্ট পুনরায় render করবে।
154154

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

157157
---
158158

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

161-
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:
161+
প্রায় সময়ই, ভিন্ন ভিন্ন ফাইলের কম্পোনেন্ট এর একই কনটেক্সট এক্সেস করার প্রয়োজন হবে। এ কারণে, সাধারণত, একটা আলাদা ফাইলে কনটেক্সট ডিক্লেয়ার করা হয়। তখন আপনি অন্যান্য ফাইলের জন্য কনতেক্সট এভেইলেবল করতে [`export` statement](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) ব্যবহার করতে পারেনঃ
162162

163163
```js {4-5}
164164
// Contexts.js
@@ -168,7 +168,7 @@ export const ThemeContext = createContext('light');
168168
export const AuthContext = createContext(null);
169169
```
170170

171-
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:
171+
এর পর অন্যান্য ফাইলে ডিক্লেয়ার হওয়া কম্পোনেন্টগুলো এই কনটেক্সট রিড বা প্রোভাইড করার জন্য [`import`](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/import) statement ব্যবহার করতে পারেঃ
172172

173173
```js {2}
174174
// Button.js
@@ -196,22 +196,22 @@ function App() {
196196
}
197197
```
198198

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

201201
---
202202

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

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

207207

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

210210
```js
211211
const ThemeContext = createContext('light');
212212
```
213213

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

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

0 commit comments

Comments
 (0)