From 33cf639a2f133e603747c01fd36ec4c778388176 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Thu, 1 Jun 2023 21:36:50 +0600 Subject: [PATCH 1/6] create-root-sip-20% --- src/content/reference/react-dom/client/createRoot.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index d91bc20c6..75ab7ba40 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -4,7 +4,7 @@ title: createRoot -`createRoot` lets you create a root to display React components inside a browser DOM node. +একটি ব্রাউজার DOM নোডে React কম্পোনেন্ট দেখানোর জন্য `createRoot` আপনাকে একটি root তৈরী করতে দেবে। ```js const root = createRoot(domNode, options?) @@ -16,11 +16,11 @@ const root = createRoot(domNode, options?) --- -## Reference {/*reference*/} +## রেফারেন্স {/*reference*/} ### `createRoot(domNode, options?)` {/*createroot*/} -Call `createRoot` to create a React root for displaying content inside a browser DOM element. +একটি ব্রাউজার DOM এলিমেন্টে React কম্পোনেন্ট দেখানোর স্বার্থে একটি React root তৈরী করার জন্য `createRoot` কল করুন। ```js import { createRoot } from 'react-dom/client'; @@ -29,7 +29,7 @@ const domNode = document.getElementById('root'); const root = createRoot(domNode); ``` -React will create a root for the `domNode`, and take over managing the DOM inside it. After you've created a root, you need to call [`root.render`](#root-render) to display a React component inside of it: +React `domNode` এর জন্য একটি root তৈরী করবে, এবং এর মধ্যকার DOM পরিচালনার দায়িত্ব নিয়ে নিবে। root তৈরী করবার পর আপনাকে এর মধ্যে একটি React কম্পোনেন্ট দেখাবার জন্য [`root.render`](#root-render) কল করতে হবেঃ ```js root.render(); From eccf5dcc35ff899ecfc3a9bd605e2f620eff61d8 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Sat, 3 Jun 2023 15:06:51 +0600 Subject: [PATCH 2/6] create-root-wip-50% --- .../reference/react-dom/client/createRoot.md | 108 +++++++++--------- 1 file changed, 54 insertions(+), 54 deletions(-) diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index 75ab7ba40..3ff3ed06f 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -29,60 +29,60 @@ const domNode = document.getElementById('root'); const root = createRoot(domNode); ``` -React `domNode` এর জন্য একটি root তৈরী করবে, এবং এর মধ্যকার DOM পরিচালনার দায়িত্ব নিয়ে নিবে। root তৈরী করবার পর আপনাকে এর মধ্যে একটি React কম্পোনেন্ট দেখাবার জন্য [`root.render`](#root-render) কল করতে হবেঃ +React `domNode` এর জন্য একটি root তৈরী করবে, এবং এর মধ্যকার DOM পরিচালনার দায়িত্ব নিয়ে নিবে। root তৈরী করবার পর আপনাকে এর মধ্যে একটি React কম্পোনেন্ট দেখাবার জন্য [`root.render`](#root-render) কল করতে হবেঃ ```js root.render(); ``` -An app fully built with React will usually only have one `createRoot` call for its root component. A page that uses "sprinkles" of React for parts of the page may have as many separate roots as needed. +সম্পূর্ণরূপে React দিয়ে বানানো একটি অ্যাপে সাধারণত একটি মাত্র `createRoot` কল থাকবে এর root কম্পোনেন্টের জন্য। যেই পেইজের বিভিন্ন অংশের জন্য React এর "ছিটেফোটা" ব্যবহৃত হয় সেগুলোতে যত গুলো ইচ্ছে আলাদা আলাদা root থাকতে পারে। -[See more examples below.](#usage) +[নিচে আরো উদাহরণ দেখ...](#usage) -#### Parameters {/*parameters*/} +#### প্যারামিটার {/*parameters*/} -* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will create a root for this DOM element and allow you to call functions on the root, such as `render` to display rendered React content. +* `domNode`: একটা [DOM এলিমেন্ট।](https://developer.mozilla.org/en-US/docs/Web/API/Element) React এই DOM এলিমেন্টের জন্য একটি root তৈরী করবে এবং root এ আপনাকে ফাংশন কল করতে দেবে, যেমন হতে পারে রেন্ডার হওয়া React কম্পোনেন্ট দেখানোর জন্য ফাংশন `render`। -* **optional** `options`: An object with options for this React root. +* **optional** `options`: এই React root এর জন্য বিভিন্ন option সংবলিত একটি অবজেক্ট। - * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. - * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. + * **optional** `onRecoverableError`: যখন React স্বয়ংক্রিয় ভাবে কোন error থেকে নিজেকে recover করে তখন হওয়া কলব্যাক। + * **optional** `identifierPrefix`: [`useId`](/reference/react/useId) দিয়ে তৈরী হওয়া ID গুলোর জন্য React যে string prefix ব্যবহার করে। একই পেইজে যখন একাধিক rot থাকে তখন conflict এড়াতে এটা কাজে লাগে। -#### Returns {/*returns*/} +#### রিটার্ন {/*returns*/} -`createRoot` returns an object with two methods: [`render`](#root-render) and [`unmount`.](#root-unmount) +`createRoot` দুটি মেথডসহ একটি অব্জেক্ট রিটার্ন করেঃ [`render`](#root-render) এবং [`unmount`.](#root-unmount) -#### Caveats {/*caveats*/} -* If your app is server-rendered, using `createRoot()` is not supported. Use [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) instead. -* You'll likely have only one `createRoot` 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 `createRoot`. +#### যেসব বিষয়ে সতর্ক থাকতে হবে {/*caveats*/} +* আপনার অ্যাপ যদি সার্ভার থেকে রেন্ডার হয়, `createRoot()` কাজ করবে না। বরং [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) ব্যব্যহার করুন। +* খুব সম্ভবত আপনার অ্যাপে একটি মাত্র `createRoot` কল থাকবে। আপনি যদি একটি ফ্রেমওয়ার্ক ব্যবহার করেন, সম্ভবতঃ সে-ই আপনার হয়ে কলটি করে দিবে। +* যখন আপনি DOM ট্রি-এর অন্য একটি অংশে যা আপনার কম্পোনেন্টের চাইল্ড না(উদাহরণস্বরূপ একটা মোডাল বা টুলটিপ), JSX রেন্ডার করতে চাইবেন তখন `createRoot` এর বদলে [`createPortal`](/reference/react-dom/createPortal) ব্যবহার করুন। --- ### `root.render(reactNode)` {/*root-render*/} -Call `root.render` to display a piece of [JSX](/learn/writing-markup-with-jsx) ("React node") into the React root's browser DOM node. +React root-এর ব্রাউজার DOM নোডে কোন [JSX](/learn/writing-markup-with-jsx) ("React node") দেখানোর জন্য `root.render` কল করুন। ```js root.render(); ``` -React will display `` in the `root`, and take over managing the DOM inside it. +React `root`-এ `` দেখাবে, এবং এর মধ্যকার DOM পরিচালনার দায়িত্ব নিয়ে নিবে। -[See more examples below.](#usage) +[নিচে আরো উদাহরণ দেখুন।](#usage) -#### Parameters {/*root-render-parameters*/} +#### প্যারামিটার {/*root-render-parameters*/} -* `reactNode`: A *React node* that you want to display. This will usually be a piece of JSX like ``, but you can also pass a React element constructed with [`createElement()`](/reference/react/createElement), a string, a number, `null`, or `undefined`. +* `reactNode`: আপনি দেখাতে চান এমন একটি *React নোড*। এটা সাধারণত `` এর মত এক টুকরো JSX হবে।, কিন্তু আপনি [`createElement()`](/reference/react/createElement) দিয়ে তৈরী করা একটি React এলিমেন্ট, একটি স্ট্রিং, একটি সংখ্যা, `null` বা `undefined` ও পাস করতে পারেন। -#### Returns {/*root-render-returns*/} +#### রিটার্ন {/*root-render-returns*/} -`root.render` returns `undefined`. +`root.render` রিটার্ন করে `undefined`. -#### Caveats {/*root-render-caveats*/} +#### সতর্কতা {/*root-render-caveats*/} -* The first time you call `root.render`, React will clear all the existing HTML content inside the React root before rendering the React component into it. +* আপনি যখন প্রথম বারের মত `root.render` কল করবেন, React এর রুটের ভিতরে কম্পোনেন্ট রেন্ডার করবার আগে থাকা সব HTML কনটেন্ট মুছে ফেলবে। * If your root's DOM node contains HTML generated by React on the server or during the build, use [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) instead, which attaches the event handlers to the existing HTML. @@ -147,7 +147,7 @@ Usually, you only need to run this code once at startup. It will: My app - +
@@ -288,28 +288,28 @@ nav ul li { display: inline-block; margin-right: 20px; } -You could also create a new DOM node with [`document.createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) and add it to the document manually. +আপনি [`document.createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) ব্যবহার করে একটা নতুন DOM নোড তৈরীও করতে পারেন এবং একে নিজে নিজে ডকুমেন্টে যোগ করতে পারেন। ```js const domNode = document.createElement('div'); const root = createRoot(domNode); root.render(); -document.body.appendChild(domNode); // You can add it anywhere in the document +document.body.appendChild(domNode); // আপনি ডকুমেন্টের যেকোন জায়গায় এটা যোগ করতে পারেন ``` -To remove the React tree from the DOM node and clean up all the resources used by it, call [`root.unmount`.](#root-unmount) +DOM নোড থেকে React ট্রি সরাতে এবং এর ব্যবহৃত সকল রিসোর্স মুছে ফেলতে [`root.unmount`](#root-unmount) কল করুন। ```js root.unmount(); ``` -This is mostly useful if your React components are inside an app written in a different framework. +এইটা সাধারণত সবচেয়ে কাজে লাগে যদি অ্যাপের ভিতরে থাকা আপনার React কম্পোনেন্টগুলো ভিন্ন কোন ফ্রেমওয়ার্কে লেখা থাকে। --- -### Updating a root component {/*updating-a-root-component*/} +### একটি রুট কম্পোনেন্ট আপডেট করা {/*updating-a-root-component*/} -You can call `render` more than once on the same root. 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 in this example are not destructive: +আপনি একই রুটে একাধিকবার `render` কল করতে পারেন। যতক্ষণ পর্যন্ত আগে থেকে রেন্ডার হওয়া অবস্থার সাথে কম্পোনেন্ট ট্রি এর গঠনবিন্যাস মিলে যাচ্ছজে, React [state সংরক্ষণ করবে।](/learn/preserving-and-resetting-state) খেয়াল করুন যে আপনি ইনপুটে টাইপ করতে পারছেন, যার অর্থ প্রতি সেকেন্ডে পুনারবৃত্ত হওয়া `render` কল ধ্বংসাত্মক নয়ঃ @@ -340,14 +340,14 @@ export default function App({counter}) { -It is uncommon to call `render` multiple times. Usually, your components will [update state](/reference/react/useState) instead. +সাধারণত `render` একাধিকবার কল করা হয় না, বরং আপনার কম্পোনেট গুলোই [state আপডেট](/reference/react/useState) করে। --- -## Troubleshooting {/*troubleshooting*/} +## ট্রাবলশ্যুট {/*troubleshooting*/} -### I've created a root, but nothing is displayed {/*ive-created-a-root-but-nothing-is-displayed*/} +### একটা রুট তৈরী করবার পরও কিছুই দেখাচ্ছে না {/*ive-created-a-root-but-nothing-is-displayed*/} -Make sure you haven't forgotten to actually *render* your app into the root: +নিশ্চিত করুন যে আপনি আসলেই রুটে আপনার অ্যাপ *রেন্ডার* করতে ভুলে যাননি। ```js {5} import { createRoot } from 'react-dom/client'; @@ -357,15 +357,15 @@ const root = createRoot(document.getElementById('root')); root.render(); ``` -Until you do that, nothing is displayed. +আপনি এটা করার আগ পর্যন্ত কিছুই দেখা যাবে না। --- -### I'm getting an error: "Target container is not a DOM element" {/*im-getting-an-error-target-container-is-not-a-dom-element*/} +### একটা এরর দেখাচ্ছেঃ "Target container is not a DOM element" {/*im-getting-an-error-target-container-is-not-a-dom-element*/} -This error means that whatever you're passing to `createRoot` is not a DOM node. +এই এররের অর্থ হল, আপনি যা `createRoot`-এ পাঠাচ্ছেন তা DOM নোড না। -If you're not sure what's happening, try logging it: +আপনি যদি নিশ্চিত না হন যে কি হচ্ছে, একে logging করার চেষ্টা করুনঃ ```js {2} const domNode = document.getElementById('root'); @@ -374,46 +374,46 @@ const root = createRoot(domNode); root.render(); ``` -For example, if `domNode` is `null`, it means that [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) returned `null`. This will happen if there is no node in the document with the given ID at the time of your call. There may be a few reasons for it: +উদাহরণস্বরূপ, যদি `domNode` `null` হয়, এর অর্থ [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)`null` রিটার্ন করেছে। এটা হবে যদি আপনার কল করার সময়ে ডকুমেন্টে ওই ID এর কোন নোড না থাকে। এর কিছু কারণ হতে পারে এমনঃ -1. The ID you're looking for might differ from the ID you used in the HTML file. Check for typos! -2. Your bundle's `