Merge pull request #81 from nafistiham/render

Render

Author: moshfiqrony

src/content/reference/react-dom/render.md

@@ -4,15 +4,15 @@ title: render
 
 <Deprecated>
 
-This API will be removed in a future major version of React.
+এই API ভবিষ্যতে React এর একটি মেজর ভার্সনে সরিয়ে ফেলা হবে।
 
-In React 18, `render` was replaced by [`createRoot`.](/reference/react-dom/client/createRoot) Using `render` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)
+React 18 এ, `render` এর জায়গায় এসেছে [`createRoot`।](/reference/react-dom/client/createRoot) React 18 এ `render` ব্যবহার করলে সতর্কতা দেখাবে যে আপনার অ্যাপ এমন আচরণ করবে যেন এতে React 17 চলছে। আরো জানুন [এখানে।](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)
 
 </Deprecated>
 
 <Intro>
 
-`render` renders a piece of [JSX](/learn/writing-markup-with-jsx) ("React node") into a browser DOM node.
+`render` ব্রাউজারের একটি DOM নোডে [JSX](/learn/writing-markup-with-jsx) ("React node") এর একটি অংশ রেন্ডার করে।
 
 ```js
 render(reactNode, domNode, callback?)
@@ -24,11 +24,11 @@ render(reactNode, domNode, callback?)
 
 ---
 
-## Reference {/*reference*/}
+## রেফারেন্স {/*reference*/}
 
 ### `render(reactNode, domNode, callback?)` {/*render*/}
 
-Call `render` to display a React component inside a browser DOM element.
+একটি ব্রাউজার DOM এলিমেন্টের মধ্যে একটি React component দেখানোর জন্য `render` কল করুন।
 
 ```js
 import { render } from 'react-dom';
@@ -37,40 +37,40 @@ const domNode = document.getElementById('root');
 render(<App />, domNode);
 ```
 
-React will display `<App />` in the `domNode`, and take over managing the DOM inside it.
+React `<App />` দেখাবে `domNode` এর মধ্যে, এবং এর ভেতরকার DOM ম্যানেজ করার দায়িত্ব নিয়ে নিবে।
 
-An app fully built with React will usually only have one `render` call with its root component.  A page that uses "sprinkles" of React for parts of the page may have as many `render` calls as needed.
+ সম্পূর্ণভাবে React দিয়ে তৈরি একটি অ্যাপ্যাঁ এর রুট component এর সাথে সাধারণত এক বার `render` কল থাকবে। যেই পেইজ তার বিভিন্ন অংশের জন্য React এর "sprinkles" ব্যবহার করে সেটায় যতগুলো প্রয়োজন `render` কল থাকতে পারে।
 
-[See more examples below.](#usage)
+[নিচে আরো উদাহরণ দেখুন।](#usage)
 
-#### Parameters {/*parameters*/}
+#### প্যারামিটার {/*parameters*/}
 
-* `reactNode`: A *React node* that you want to display. This will usually be a piece of JSX like `<App />`, but you can also pass a React element constructed with [`createElement()`](/reference/react/createElement), a string, a number, `null`, or `undefined`. 
+* `reactNode`: একটা *React নোড* যেটা আপনি দেখাতে চান। এটা সাধারণত `<App />` এর মত JSX এর একটি অংশ হবে, কিন্তু আপনি চাইলে [`createElement()`](/reference/react/createElement) দিয়ে তৈরি একটি React এলিমেন্ট, একটি স্ট্রিং, একটি সংখ্যা, `null`, বা `undefined` পাস করতে পারেন। 
 
-* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will display the `reactNode` you pass inside this DOM element. From this moment, React will manage the DOM inside the `domNode` and update it when your React tree changes.
+* `domNode`: একটি [DOM এলিমেন্ট।](https://developer.mozilla.org/en-US/docs/Web/API/Element) React এই DOM এলিমেন্টের মধ্যে আপনার পাস করা `reactNode` দেখাবে। এই মুহুর্ত থেকে শুরু করে, React `domNode` এর ভেতরের DOM ম্যানেজ করবে এবং যখন আপনার React ট্রি বদলাবে সেই হিসেবে আপডেট করবে।
 
-* **optional** `callback`: A function. If passed, React will call it after your component is placed into the DOM.
+* **optional** `callback`: একটি ফাংশন। যদি একে পাস করা হয়, আপনার component DOM এ রাখার পর React এটাকে কল করবে।
 
 
-#### Returns {/*returns*/}
+#### রিটার্ন {/*returns*/}
 
-`render` usually returns `null`. However, if the `reactNode` you pass is a *class component*, then it will return an instance of that component.
+`render` সাধারণত `null` রিটার্ন করে। তবে, আপনি যে `reactNode` পাস করছেন সেটা যদি *ক্লাস component* হয়, তাহলে এটা ওই component এর একটি ইন্সট্যান্স রিটার্ন করবে।
 
-#### Caveats {/*caveats*/}
+#### সতর্কতা {/*caveats*/}
 
-* In React 18, `render` was replaced by [`createRoot`.](/reference/react-dom/client/createRoot) Please use `createRoot` for React 18 and beyond.
+* React 18 এ, `render` কে প্রতিস্থাপন করেছে [`createRoot`.](/reference/react-dom/client/createRoot) দয়া করে React 18 এবং তার পরবর্তী ভার্সনগুলোর জন্য `createRoot` ব্যবহার করবেন।
 
-* The first time you call `render`, React will clear all the existing HTML content inside the `domNode` before rendering the React component into it. If your `domNode` contains HTML generated by React on the server or during the build, use [`hydrate()`](/reference/react-dom/hydrate) instead, which attaches the event handlers to the existing HTML.
+* আপনি প্রথম বার `render` কল করার সময়, React `domNode` এর ভেতরে React component রেন্ডার করার আগে এর ভেতরকার সকল HTML কনটেন্ট মুছে ফেলবে। যদি আপনার `domNode` এ সার্ভারের React দ্বারা তৈরি বা বিল্ডের সময় তৈরি HTML থাকে, বরং [`hydrate()`](/reference/react-dom/hydrate) ব্যবহার করুন, যা আগে থেকে থাকা HTML এর সাথে ইভেন্ট হ্যান্ডলার যুক্ত করে দেয়।
 
-* If you call `render` on the same `domNode` more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same `domNode` again is similar to calling the [`set` function](/reference/react/useState#setstate) on the root component: React avoids unnecessary DOM updates.
+* আপনি যদি একই `domNode` এ একাধিক বার `render` কল করেন, React আপনার পাস করে সর্বশেষ JSX এর প্রতিফলন দেখানোর জন্য DOM আপডেট করে দেবে। React সিদ্ধান্ত নিবে যে DOM এর কোন কোন অংশ পুনরায় ব্যবহার করা জাবর এবং কোনগুলো আবার আগের বার রেন্ডার হওয়া ট্রি এর সাথে ["মিলানোর মাধ্যমে"](/learn/preserving-and-resetting-state) পুনরায় তৈরি করা দরকার। একই `domNode` এ একাধিক বার `render` কল করা রুট component এ [`set` function](/reference/react/useState#setstate) কল করার মতঃ React avoids অপ্রয়োজনীয় DOM আপডেট এড়িয়ে চলে।
 
-* If your app is fully built with React, you'll likely have only one `render` call in your app. (If you use a framework, it might do this call for you.) When you want to render a piece of JSX in a different part of the DOM tree that isn't a child of your component (for example, a modal or a tooltip), use [`createPortal`](/reference/react-dom/createPortal) instead of `render`.
+* আপনার অ্যাপ যদি সম্পূর্ণভাবে React দিয়ে তৈরি হয়ে থাকে, এতে `render` কল এক বারই থাকার কথা (আপনি যদি একটি ফ্রেমওয়ার্ক ব্যবহার করেন, সেটা আপনার জন্য এই কল করে দিতে পারে)। যখন আপনি JSX এর একটি অংশ এমন জায়গায় রেন্ডার করতে চান যেটা আপনার component এর চাইল্ড না (যেমন, মোডাল বা টুলটিপ), সেক্ষেত্রে `render` এর জায়গায় [`createPortal`](/reference/react-dom/createPortal) ব্যবহার করুন।
 
 ---
 
-## Usage {/*usage*/}
+## ব্যবহার {/*usage*/}
 
-Call `render` to display a <CodeStep step={1}>React component</CodeStep> inside a <CodeStep step={2}>browser DOM node</CodeStep>.
+একটি <CodeStep step={2}>ব্রাউজার DOM নোডের</CodeStep> ভেতর একটি <CodeStep step={1}>React component</CodeStep> দেখানোর জন্য `render` কল করুন।
 
 ```js [[1, 4, "<App />"], [2, 4, "document.getElementById('root')"]]
 import { render } from 'react-dom';
@@ -79,9 +79,9 @@ import App from './App.js';
 render(<App />, document.getElementById('root'));
 ```
 
-### Rendering the root component {/*rendering-the-root-component*/}
+### রুট component রেন্ডার করা {/*rendering-the-root-component*/}
 
-In apps fully built with React, **you will usually only do this once at startup**--to render the "root" component.
+সম্পূর্ণভাবে React দিয়ে তৈরি এমন অ্যাপের জন্য, **আপনি সাধারণত এটা startup এর সময় এক বার করবেন**--"root" component রেন্ডার করবার জন্য।
 
 <Sandpack>
 
@@ -101,13 +101,13 @@ export default function App() {
 
 </Sandpack>
 
-Usually you shouldn't need to call `render` again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will [use state.](/reference/react/useState)
+সাধারণত আপনার `render` আবার কল দেবার বা আরো জায়গায় কল দেবার প্রয়োজন হবার কথা না। এই জায়গা থেকে, React আপনার অ্যাপ্লিকেশনের DOM ম্যানেজ করবে। UI আপডেটের জন্য, আপনার component গুলো [state ব্যবহার করবে।](/reference/react/useState)
 
 ---
 
-### Rendering multiple roots {/*rendering-multiple-roots*/}
+### একাধিক রুট রেন্ডার করা {/*rendering-multiple-roots*/}
 
-If your page [isn't fully built with React](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), call `render` for each top-level piece of UI managed by React.
+যদি আপনার পেইজ [সম্পূর্ণ রূপে React দিয়ে তৈরি না হয়ে থাকে](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), React ম্যানেজ করে এরকম সকল উচ্চ স্তরের UI এর জন্য `render` কল করুন।
 
 <Sandpack>
 
@@ -177,13 +177,13 @@ nav ul li { display: inline-block; margin-right: 20px; }
 
 </Sandpack>
 
-You can destroy the rendered trees with [`unmountComponentAtNode()`.](/reference/react-dom/unmountComponentAtNode)
+আপনি [`unmountComponentAtNode()`](/reference/react-dom/unmountComponentAtNode) ব্যবহার করে রেন্ডার হওয়া ট্রি আপডেট করতে পারেন।
 
 ---
 
-### Updating the rendered tree {/*updating-the-rendered-tree*/}
+### Render হওয়া ট্রি এর আপডেট {/*updating-the-rendered-tree*/}
 
-You can call `render` more than once on the same DOM node. As long as the component tree structure matches up with what was previously rendered, React will [preserve the state.](/learn/preserving-and-resetting-state) Notice how you can type in the input, which means that the updates from repeated `render` calls every second are not destructive:
+আপনি একই DOM নোডে একাধিক বার `render` কল করতে পারেন। As long as the component tree structure matches up with what was previously rendered, React will [preserve the state.](/learn/preserving-and-resetting-state) Notice how you can type in the input, which means that the updates from repeated `render` calls every second are not destructive:
 
 <Sandpack>
 
@@ -215,4 +215,4 @@ export default function App({counter}) {
 
 </Sandpack>
 
-It is uncommon to call `render` multiple times. Usually, you'll [update state](/reference/react/useState) inside your components instead.
+`render` সাধারণত একাধিকবার কল দেওয়া হয় না। সাধারণত, আপনি তা না করে আপনার component এর মধ্যে [update state](/reference/react/useState) করবেন।