Merge pull request #119 from nafistiham/create-portal

Create portal

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

@@ -4,7 +4,7 @@ title: createPortal
 
 <Intro>
 
-`createPortal` lets you render some children into a different part of the DOM.
+`createPortal` আপনাকে DOM-এর ভিন্ন অংশে কিছু চাইল্ড রেন্ডার করতে দেয়।
 
 
 ```js
@@ -20,11 +20,11 @@ title: createPortal
 
 ---
 
-## Reference {/*reference*/}
+## রেফারেন্স {/*reference*/}
 
 ### `createPortal(children, domNode, key?)` {/*createportal*/}
 
-To create a portal, call `createPortal`, passing some JSX, and the DOM node where it should be rendered:
+একটি পোর্টাল তৈরি করতে, `createPortal` কল করুন, কিছু JSX এবং DOM নোড পাস করুন যেখানে এটি রেন্ডার করা হবেঃ
 
 ```js
 import { createPortal } from 'react-dom';
@@ -40,35 +40,35 @@ import { createPortal } from 'react-dom';
 </div>
 ```
 
-[See more examples below.](#usage)
+[নীচে আরও উদাহরণ দেখুন।](#usage)
 
-A portal only changes the physical placement of the DOM node. In every other way, the JSX you render into a portal acts as a child node of the React component that renders it. For example, the child can access the context provided by the parent tree, and events bubble up from children to parents according to the React tree.
+একটি পোর্টাল কেবল DOM নোডের physical অবস্থান পরিবর্তন করে। অন্যান্য সকল উপায়ে, আপনি যে JSX পোর্টালে রেন্ডার করেন তা React কম্পোনেন্টের একটি চাইল্ড নোড হিসাবে কাজ করে যা এটিকে রেন্ডার করে। উদাহরণস্বরূপ, চাইল্ড প্যারেন্ট ট্রি দ্বারা প্রদত্ত কনটেক্স্ট অ্যাক্সেস করতে পারে, এবং ইভেন্টগুলি চাইল্ড থেকে প্যারেন্টদের কাছে React ট্রি অনুসারে বুদবুদ করে উঠে।
 
-#### Parameters {/*parameters*/}
+#### প্যারামিটার {/*parameters*/}
 
-* `children`: Anything that can be rendered with React, such as a piece of JSX (e.g. `<div />` or `<SomeComponent />`), a [Fragment](/reference/react/Fragment) (`<>...</>`), a string or a number, or an array of these.
+* `children`: যেকোনো জিনিস যা React দ্বারা রেন্ডার করা যায়, যেমন একটি JSX অংশ (উদাহরণস্বরূপ `<div />` বা `<SomeComponent />`), একটি [ফ্র্যাগমেন্ট](/reference/react/Fragment) (`<>...</>`), একটি স্ট্রিং বা একটি সংখ্যা, অথবা এগুলির একটি অ্যারে।
 
-* `domNode`: Some DOM node, such as those returned by `document.getElementById()`. The node must already exist. Passing a different DOM node during an update will cause the portal content to be recreated.
+* `domNode`: কিছু DOM নোড, যেমন `document.getElementById()` দ্বারা ফেরত আসা নোডগুলি। নোডটি ইতোমধ্যে বিদ্যমান থাকতে হবে। আপডেটের সময় ভিন্ন DOM নোড পাস করা হলে পোর্টাল কন্টেন্ট পুনরায় তৈরি করা হবে।
 
-* **optional** `key`: A unique string or number to be used as the portal's [key.](/learn/rendering-lists/#keeping-list-items-in-order-with-key)
+* **ঐচ্ছিক** `key`: পোর্টালের [কী](/learn/rendering-lists/#keeping-list-items-in-order-with-key) হিসাবে ব্যবহার করার জন্য একটি অনন্য স্ট্রিং বা সংখ্যা।
 
-#### Returns {/*returns*/}
+#### রিটার্নস {/*returns*/}
 
-`createPortal` returns a React node that can be included into JSX or returned from a React component. If React encounters it in the render output, it will place the provided `children` inside the provided `domNode`.
+`createPortal` একটি React নোড ফেরত দেয় যা JSX-এ অন্তর্ভুক্ত করা যেতে পারে বা একটি React কম্পোনেন্ট থেকে ফেরত দেওয়া যেতে পারে। যদি React এটি রেন্ডার আউটপুটে দেখে, এটি প্রদত্ত `children`-কে প্রদত্ত `domNode`-এর মধ্যে রাখবে।
 
-#### Caveats {/*caveats*/}
+#### সাবধানতা {/*caveats*/}
 
-* Events from portals propagate according to the React tree rather than the DOM tree. For example, if you click inside a portal, and the portal is wrapped in `<div onClick>`, that `onClick` handler will fire. If this causes issues, either stop the event propagation from inside the portal, or move the portal itself up in the React tree.
+* পোর্টাল থেকে ইভেন্টগুলি DOM ট্রি নয়, বরং React ট্রি অনুসারে এগিয়ে যায়। উদাহরণস্বরূপ, যদি আপনি একটি পোর্টালের ভেতরে ক্লিক করেন, এবং পোর্টালটি `<div onClick>`-এ wrap করা থাকে, তাহলে `onClick` হ্যান্ডলারটি ফায়ার হবে। যদি এটি সমস্যা তৈরি করে, তাহলে পোর্টালের ভেতরে event propagation বন্ধ করুন, অথবা পোর্টালটি React ট্রিতে উপরের দিকে উঠিয়ে নিন।
 
 ---
 
-## Usage {/*usage*/}
+## ব্যবহার {/*usage*/}
 
-### Rendering to a different part of the DOM {/*rendering-to-a-different-part-of-the-dom*/}
+### DOM-এর ভিন্ন একটি অংশে রেন্ডারিং {/*rendering-to-a-different-part-of-the-dom*/}
 
-*Portals* let your components render some of their children into a different place in the DOM. This lets a part of your component "escape" from whatever containers it may be in. For example, a component can display a modal dialog or a tooltip that appears above and outside of the rest of the page.
+*পোর্টাল* আপনার কম্পোনেন্টগুলিকে তাদের কিছু চাইল্ডকদ DOM-এর ভিন্ন স্থানে রেন্ডার করতে দেয়। এটি আপনার কম্পোনেন্টের একটি অংশকে যেকোনো কন্টেইনার থেকে "মুক্ত" করে। উদাহরণস্বরূপ, একটি কম্পোনেন্ট একটি মডাল ডায়লগ বা একটি টুলটিপ প্রদর্শন করতে পারে যা বাকি পৃষ্ঠার উপরে এবং বাইরে প্রদর্শিত হয়।
 
-To create a portal, render the result of `createPortal` with <CodeStep step={1}>some JSX</CodeStep> and the <CodeStep step={2}>DOM node where it should go</CodeStep>:
+একটি পোর্টাল তৈরি করতে, `createPortal`-এর ফলাফল রেন্ডার করুন <CodeStep step={1}>কিছু JSX</CodeStep> এবং <CodeStep step={2}>DOM নোডে যেখানে এটি যাওয়া উচিত</CodeStep>:
 
 ```js [[1, 8, "<p>This child is placed in the document body.</p>"], [2, 9, "document.body"]]
 import { createPortal } from 'react-dom';
@@ -86,9 +86,9 @@ function MyComponent() {
 }
 ```
 
-React will put the DOM nodes for <CodeStep step={1}>the JSX you passed</CodeStep> inside of the <CodeStep step={2}>DOM node you provided</CodeStep>.
+React <CodeStep step={1}>আপনি যে JSX পাস করেছেন</CodeStep> এর DOM নোডগুলি <CodeStep step={2}>আপনার প্রদত্ত DOM নোডের</CodeStep> মধ্যে রাখবে।
 
-Without a portal, the second `<p>` would be placed inside the parent `<div>`, but the portal "teleported" it into the [`document.body`:](https://developer.mozilla.org/en-US/docs/Web/API/Document/body)
+একটি পোর্টাল ছাড়া, দ্বিতীয় `<p>` প্যারেন্ট `<div>`-এর ভেতরে স্থাপন করা হত, কিন্তু পোর্টালটি এটিকে [`document.body`:](https://developer.mozilla.org/en-US/docs/Web/API/Document/body) এ "টেলিপোর্ট" করেছে।
 
 <Sandpack>
 
@@ -110,7 +110,7 @@ export default function MyComponent() {
 
 </Sandpack>
 
-Notice how the second paragraph visually appears outside the parent `<div>` with the border. If you inspect the DOM structure with developer tools, you'll see that the second `<p>` got placed directly into the `<body>`:
+লক্ষ্য করুন কিভাবে দ্বিতীয় প্যারাগ্রাফ দৃশ্যত বর্ডার সহ প্যারেন্ট `<div>`-এর বাইরে প্রদর্শিত হচ্ছে। যদি আপনি ডেভেলপার টুলস দ্বারা DOM কাঠামো পরীক্ষা করেন, আপনি দেখবেন যে দ্বিতীয় `<p>` সরাসরি `<body>`-তে রাখা হয়েছে:
 
 ```html {4-6,9}
 <body>
@@ -125,15 +125,15 @@ Notice how the second paragraph visually appears outside the parent `<div>` with
 </body>
 ```
 
-A portal only changes the physical placement of the DOM node. In every other way, the JSX you render into a portal acts as a child node of the React component that renders it. For example, the child can access the context provided by the parent tree, and events still bubble up from children to parents according to the React tree.
+একটি পোর্টাল কেবল DOM নোডের physcial অবস্থান পরিবর্তন করে। অন্যান্য সকল উপায়ে, আপনি যে JSX পোর্টালে রেন্ডার করেন তা React কম্পোনেন্টের একটি চাইল্ড নোড হিসেবে কাজ করে যা এটিকে রেন্ডার করে। উদাহরণস্বরূপ, চাইল্ড প্যারেন্ট ট্রি দ্বারা প্রদত্ত কনটেক্স্ট অ্যাক্সেস করতে পারে, এবং ইভেন্টগুলি চাইল্ড থেকে প্যারেন্টের কাছে React ট্রি অনুসারে বুদবুদ করে উপরে উঠে।
 
 ---
 
-### Rendering a modal dialog with a portal {/*rendering-a-modal-dialog-with-a-portal*/}
+### একটি পোর্টাল দ্বারা মোডাল ডায়লগ রেন্ডার করা {/*rendering-a-modal-dialog-with-a-portal*/}
 
-You can use a portal to create a modal dialog that floats above the rest of the page, even if the component that summons the dialog is inside a container with `overflow: hidden` or other styles that interfere with the dialog.
+আপনি একটি পোর্টাল ব্যবহার করে একটি মোডাল ডায়লগ তৈরি করতে পারেন যা পেইজের বাকি অংশের উপরে ভাসমান, এমনকি যদি ডায়লগ কল করা কম্পোনেন্টটি `overflow: hidden` বা অন্যান্য স্টাইল যা ডায়লগের সাথে বাধা দেয় এমন কন্টেইনারের মধ্যে থাকে।
 
-In this example, the two containers have styles that disrupt the modal dialog, but the one rendered into a portal is unaffected because, in the DOM, the modal is not contained within the parent JSX elements.
+এই উদাহরণে, দুটি কন্টেইনারের স্টাইলগুলি মডাল ডায়লগের জন্য বিঘ্ন ঘটাচ্ছে, কিন্তু পোর্টালে রেন্ডার করা একটি অপ্রভাবিত থাকে, কারণ DOM-এ, মোডালটি প্যারেন্ট JSX উপাদানগুলির মধ্যে contained নয়।
 
 <Sandpack>
 
@@ -238,17 +238,17 @@ export default function ModalContent({ onClose }) {
 
 <Pitfall>
 
-It's important to make sure that your app is accessible when using portals. For instance, you may need to manage keyboard focus so that the user can move the focus in and out of the portal in a natural way.
+পোর্টাল ব্যবহার করার সময় আপনার অ্যাপটি অ্যাক্সেসিবল হওয়া নিশ্চিত করা গুরুত্বপূর্ণ। উদাহরণস্বরূপ, আপনাকে কীবোর্ড ফোকাস পরিচালনা করতে হতে পারে যাতে ব্যবহারকারী স্বাভাবিকভাবে পোর্টালের ভিতরে এবং বাইরে ফোকাস নড়াতে পারে।
 
-Follow the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) when creating modals. If you use a community package, ensure that it is accessible and follows these guidelines.
+মডাল তৈরি করার সময় [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) অনুসরণ করুন। যদি আপনি কোনো কমিউনিটি প্যাকেজ ব্যবহার করেন, নিশ্চিত করুন যে এটি অ্যাক্সেসিবল এবং এই নির্দেশিকাগুলি অনুসরণ করে।
 
 </Pitfall>
 
 ---
 
-### Rendering React components into non-React server markup {/*rendering-react-components-into-non-react-server-markup*/}
+### নন-React সার্ভার মার্কআপে React কম্পোনেন্টগুলি রেন্ডার করা {/*rendering-react-components-into-non-react-server-markup*/}
 
-Portals can be useful if your React root is only part of a static or server-rendered page that isn't built with React. For example, if your page is built with a server framework like Rails, you can create areas of interactivity within static areas such as sidebars. Compared with having [multiple separate React roots,](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) portals let you treat the app as a single React tree with shared state even though its parts render to different parts of the DOM.
+যদি আপনার React রুট স্ট্যাটিক বা সার্ভার-রেন্ডার করা পেইজের শুধুমাত্র একটি অংশ হয় যা React দ্বারা তৈরি নয়, তাহলে পোর্টাল উপকারী হতে পারে। উদাহরণস্বরূপ, যদি আপনার পেইজ Rails বা অন্য কোনো সার্ভার ফ্রেমওয়ার্ক দ্বারা তৈরি হয়, আপনি সাইডবারের মতো স্ট্যাটিক অঞ্চলের মধ্যে ইন্টার‌্যাক্টিভ এলাকা তৈরি করতে পারেন। [আলাদা আলাদা React রুটের](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) তুলনায়, পোর্টালগুলি আপনাকে অ্যাপটিকে একটি একক React ট্রি হিসাবে আচরণ করতে দেয় যার shared স্টেট রয়েছে, যদিও এর অংশগুলি DOM-এর ভিন্ন ভিন্ন অংশে রেন্ডার হয়।
 
 <Sandpack>
 
@@ -342,15 +342,15 @@ p {
 
 ---
 
-### Rendering React components into non-React DOM nodes {/*rendering-react-components-into-non-react-dom-nodes*/}
+### নন-React DOM নোডে React কম্পোনেন্টগুলি রেন্ডার করা {/*rendering-react-components-into-non-react-dom-nodes*/}
 
-You can also use a portal to manage the content of a DOM node that's managed outside of React. For example, suppose you're integrating with a non-React map widget and you want to render React content inside a popup. To do this, declare a `popupContainer` state variable to store the DOM node you're going to render into:
+আপনি একটি পোর্টাল ব্যবহার করেও React এর বাইরে পরিচালিত DOM নোডের কন্টেন্ট পরিচালনা করতে পারেন। উদাহরণস্বরূপ, ধরুন আপনি একটি নন-React ম্যাপ উইজেটের সাথে সংযোজন করছেন এবং আপনি একটি পপআপের মধ্যে React কন্টেন্ট রেন্ডার করতে চান। এটি করতে, `popupContainer` নামক একটি স্টেট ভেরিয়েবল ঘোষণা করুন যেখানে আপনি রেন্ডার করতে যাচ্এঁরন সেই DOM নোডটি সংরক্ষণ করবেন
 
 ```js
 const [popupContainer, setPopupContainer] = useState(null);
 ```
 
-When you create the third-party widget, store the DOM node returned by the widget so you can render into it:
+যখন আপনি থার্ড-পার্টি উইজেট তৈরি করবেন, উইজেট দ্বারা ফেরত আসা DOM নোডটি সংরক্ষণ করুন যাতে আপনি এতে রেন্ডার করতে পারেন:
 
 ```js {5-6}
 useEffect(() => {
@@ -363,7 +363,7 @@ useEffect(() => {
 }, []);
 ```
 
-This lets you use `createPortal` to render React content into `popupContainer` once it becomes available:
+এটি আপনাকে `createPortal` ব্যবহার করে `popupContainer`-এ React কন্টেন্ট রেন্ডার করতে দেয় যখন এটি available হয়:
 
 ```js {3-6}
 return (
@@ -376,7 +376,7 @@ return (
 );
 ```
 
-Here is a complete example you can play with:
+এখানে একটি সম্পূর্ণ উদাহরণ রয়েছে যা নিয়ে আপনি ঘাটাঘাটি করতে পারেন:
 
 <Sandpack>