diff --git a/src/content/reference/react-dom/client/index.md b/src/content/reference/react-dom/client/index.md index 0e8a717fd..a762bc346 100644 --- a/src/content/reference/react-dom/client/index.md +++ b/src/content/reference/react-dom/client/index.md @@ -4,7 +4,7 @@ title: ক্লায়েন্ট React DOM API -`react-dom/client` API গুলো ক্লায়েন্টে (ব্রাউজারের মধ্যে) React কম্পোনেন্ট রেন্ডার করতে দেয়। এই API গুলো সাধারণত আপনার অ্যাপের একদম উপরের স্তরে React ট্রি ইনিশিয়ালাইজ করার কাজে ব্যবহৃত হয়। আপনার জন্য কল দিয়ে দিতে পারে একটি [framework](/learn/start-a-new-react-project#full-stack-frameworks)। আপনার বেশিরভাগ কম্পোনেন্টের সেগুলো ইমপোর্ট বা ব্যবহারের প্রয়োজন পড়বে না। +`react-dom/client` API গুলো ক্লায়েন্টে (ব্রাউজারের মধ্যে) React কম্পোনেন্ট রেন্ডার করতে দেয়। এই API গুলো সাধারণত আপনার অ্যাপের একদম উপরের স্তরে React ট্রি ইনিশিয়ালাইজ করার কাজে ব্যবহৃত হয়। আপনার জন্য কল দিয়ে দিতে পারে একটি [framework](/learn/start-a-new-react-project#full-stack-frameworks)। আপনার বেশিরভাগ কম্পোনেন্টের সেগুলো ইমপোর্ট বা ব্যবহারের প্রয়োজন পড়বে না। diff --git a/src/content/reference/react-dom/components/index.md b/src/content/reference/react-dom/components/index.md index c52b5b10f..ca31e56f3 100644 --- a/src/content/reference/react-dom/components/index.md +++ b/src/content/reference/react-dom/components/index.md @@ -164,21 +164,135 @@ React সকল বিল্ট-ইন ব্রাউজার HTML কম্ আপনি যদি dash আছে এমন একটি ট্যাগ রেন্ডার করেন, like ``, React ধরে নেবে যে আপনি একটি [কাস্টম HTML এলিমেন্ট](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) রেন্ডার করতে চান। React এর ক্ষেত্রে, কাস্টম এলিমেন্ট রেন্ডার করা এবং বিল্ট-ইন ব্রাউজার ট্যাগ রেন্ডার করা ভিন্ন ভাবে কাজ করে। -- সকল কাস্টম এলিমেন্ট প্রপ স্ট্রিং এ সিরিয়ালাইজ করা হয় এবং সব সময় এট্রিবিউট ব্যবহার করে সেট করা হয়। -- কাস্টম এলিমেন্ট এর জায়গায় `class` গ্রহণ করে, এবং `htmlFor` এর জায়গায় `for`। - আপনি যদি [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is) এট্রিবিউট সহ একটি ব্রাউজার বিল্ট-ইন HTML এলিমেন্ট রেন্ডার করেন, তবে এটিকে একটি কাস্টম এলিমেন্ট হিসাবে গণ্য করা হবে। - +#### Setting values on custom elements {/*attributes-vs-properties*/} + +Custom elements have two methods of passing data into them: + +1) Attributes: Which are displayed in markup and can only be set to string values +2) Properties: Which are not displayed in markup and can be set to arbitrary JavaScript values + +By default, React will pass values bound in JSX as attributes: + +```jsx + +``` + +Non-string JavaScript values passed to custom elements will be serialized by default: + +```jsx +// Will be passed as `"1,2,3"` as the output of `[1,2,3].toString()` + +``` + +React will, however, recognize an custom element's property as one that it may pass arbitrary values to if the property name shows up on the class during construction: + + + +```js src/index.js hidden +import {MyElement} from './MyElement.js'; +import { createRoot } from 'react-dom/client'; +import {App} from "./App.js"; + +customElements.define('my-element', MyElement); + +const root = createRoot(document.getElementById('root')) +root.render(); +``` + +```js src/MyElement.js active +export class MyElement extends HTMLElement { + constructor() { + super(); + // The value here will be overwritten by React + // when initialized as an element + this.value = undefined; + } + + connectedCallback() { + this.innerHTML = this.value.join(", "); + } +} +``` -[ভবিষ্যতে React এর একটি ভার্শনে কাস্টম এলিমেন্টের জন্য আরো বিস্তারিত সাপোর্ট থাকবে।](https://github.com/facebook/react/issues/11347#issuecomment-1122275286) +```js src/App.js +export function App() { + return +} +``` -React প্যাকেজগুলো সর্বশেষ পরীক্ষামূলক ভার্শনে আপগ্রেড করার মাধ্যমে আপনি এগুলো ব্যবহার করে দেখতে পারেনঃ + + +#### Listening for events on custom elements {/*custom-element-events*/} + +A common pattern when using custom elements is that they may dispatch [`CustomEvent`s](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) rather than accept a function to call when an event occur. You can listen for these events using an `on` prefix when binding to the event via JSX. + + + +```js src/index.js hidden +import {MyElement} from './MyElement.js'; +import { createRoot } from 'react-dom/client'; +import {App} from "./App.js"; + +customElements.define('my-element', MyElement); + +const root = createRoot(document.getElementById('root')) +root.render(); +``` + +```javascript src/MyElement.js +export class MyElement extends HTMLElement { + constructor() { + super(); + this.test = undefined; + this.emitEvent = this._emitEvent.bind(this); + } + + _emitEvent() { + const event = new CustomEvent('speak', { + detail: { + message: 'Hello, world!', + }, + }); + this.dispatchEvent(event); + } + + connectedCallback() { + this.el = document.createElement('button'); + this.el.innerText = 'Say hi'; + this.el.addEventListener('click', this.emitEvent); + this.appendChild(this.el); + } + + disconnectedCallback() { + this.el.removeEventListener('click', this.emitEvent); + } +} +``` + +```jsx src/App.js active +export function App() { + return ( + console.log(e.detail.message)} + > + ) +} +``` + + + + -- `react@experimental` -- `react-dom@experimental` +Events are case-sensitive and support dashes (`-`). Preserve the casing of the event and include all dashes when listening for custom element's events: -React  এর পরীক্ষামূলক ভার্শনগুলোতে বাগ থাকতে পারে। প্রোডাকশনে এই ভার্শঙ্গুলো ব্যবহার করবেন না। +```jsx +// Listens for `say-hi` events + +// Listens for `sayHi` events + +``` --- diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md index f437a74da..09b79c79f 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -51,7 +51,7 @@ While hidden, children still re-render in response to new props, albeit at a low When the boundary becomes visible again, React will reveal the children with their previous state restored, and re-create their Effects. -In this way, Activity can thought of as a mechanism for rendering "background activity". Rather than completely discarding content that's likely to become visible again, you can use Activity to maintain and restore that content's UI and internal state, while ensuring hidden content has no unwanted side effects. +In this way, Activity can be thought of as a mechanism for rendering "background activity". Rather than completely discarding content that's likely to become visible again, you can use Activity to maintain and restore that content's UI and internal state, while ensuring that your hidden content has no unwanted side effects. [See more examples below.](#usage) @@ -62,7 +62,7 @@ In this way, Activity can thought of as a mechanism for rendering "background ac #### Caveats {/*caveats*/} -- When used with ``, hidden activities that reveal in a transition will activate an "enter" animation. Visible Activities hidden in a transition will activate an "exit" animation. +- If an Activity is rendered inside of a [ViewTransition](/reference/react/ViewTransition), and it becomes visible as a result of an update caused by [startTransition](/reference/react/startTransition), it will activate the ViewTransition's `enter` animation. If it becomes hidden, it will activate its `exit` animation. --- @@ -70,7 +70,7 @@ In this way, Activity can thought of as a mechanism for rendering "background ac ### Restoring the state of hidden components {/*restoring-the-state-of-hidden-components*/} -Typically in React, when you want to conditionally show or hide a component, you mount and unmount it: +In React, when you want to conditionally show or hide a component, you typically mount or unmount it based on that condition: ```jsx {isShowingSidebar && ( @@ -88,11 +88,11 @@ When you hide a component using an Activity boundary instead, React will "save" ``` -This makes it possible to restore components to their previous state. +This makes it possible to hide and then later restore components in the state they were previously in. -The following example has a sidebar with an expandable section – you can press "Overview" to reveal the three subitems below it. The main app area also has a button that hides and shows the sidebar. +The following example has a sidebar with an expandable section. You can press "Overview" to reveal the three subitems below it. The main app area also has a button that hides and shows the sidebar. -Try expanding the Overview section, then toggling the sidebar closed and open: +Try expanding the Overview section, and then toggling the sidebar closed then open: diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index dd09392c2..126bf3c1b 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -447,4 +447,4 @@ React Compiler স্বয়ংক্রিয়ভাবে: ## ট্রাবলশুটিং {/*troubleshooting*/} ### আমার কম্পোনেন্ট পুনরায় রেন্ডার হয় যখন একটি প্রপ অবজেক্ট, অ্যারে, অথবা ফাংশন হয় {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/} -React পুরানো এবং নতুন প্রপসগুলি shallow equality দ্বারা তুলনা করেঃ অর্থাৎ, এটি বিবেচনা করে যে প্রতিটি নতুন প্রপ পুরানো প্রপের সাথে রেফারেন্স-সমান কিনা। যদি আপনি প্রতি বার প্যারেন্ট পুনরায় রেন্ডার হলে একটি নতুন অবজেক্ট বা অ্যারে তৈরি করেন, এমনকি যদি প্রতিটি উপাদান একই হয়, React এটিকে পরিবর্তিত হিসেবে বিবেচনা করবে। একই ভাবে, যদি আপনি প্যারেন্ট কম্পোনেন্ট রেন্ডার করার সময় একটি নতুন ফাংশন তৈরি করেন, React এটিকে পরিবর্তিত হিসেবে বিবেচনা করবে, এমনকি যদি ফাংশনের ডেফিনিশন একই হয়। এটি এড়াতে, [প্রপসগুলি সরল করুন অথবা প্যারেন্ট কম্পোনেন্টে প্রপসগুলি মেমোয়াইজ করুন](#minimizing-props-changes)। +React পুরানো এবং নতুন প্রপসগুলি shallow equality দ্বারা তুলনা করেঃ অর্থাৎ, এটি বিবেচনা করে যে প্রতিটি নতুন প্রপ পুরানো প্রপের সাথে রেফারেন্স-সমান কিনা। যদি আপনি প্রতি বার প্যারেন্ট পুনরায় রেন্ডার হলে একটি নতুন অবজেক্ট বা অ্যারে তৈরি করেন, এমনকি যদি প্রতিটি উপাদান একই হয়, React এটিকে পরিবর্তিত হিসেবে বিবেচনা করবে। একই ভাবে, যদি আপনি প্যারেন্ট কম্পোনেন্ট রেন্ডার করার সময় একটি নতুন ফাংশন তৈরি করেন, React এটিকে পরিবর্তিত হিসেবে বিবেচনা করবে, এমনকি যদি ফাংশনের ডেফিনিশন একই হয়। এটি এড়াতে, [প্রপসগুলি সরল করুন অথবা প্যারেন্ট কম্পোনেন্টে প্রপসগুলি মেমোয়াইজ করুন](#minimizing-props-changes)। \ No newline at end of file