Skip to content

index.md

Latest commit

 

History

History
389 lines (320 loc) · 22.1 KB

index.md

File metadata and controls

389 lines (320 loc) · 22.1 KB
title React DOM Components

React সকল প্রকার ব্রাউজার বিল্ট-ইন HTML এবং SVG কম্পোনেন্ট সাপোর্ট করে।

সাধারণ কম্পোনেন্ট {/common-components/}

সকল বিল্ট-ইন ব্রাউজার কম্পোনেন্ট কিছু প্রপ এবং ইভেন্ট সাপোর্ট করে।

এর মধ্যে রয়েছে React-specific প্রপ যেমন ref এবং dangerouslySetInnerHTML।

ফর্ম কম্পোনেন্ট {/form-components/}

এই বিল্ট-ইন ব্রাউজার কম্পোনেন্টগুলো ইউজার ইনপুট গ্রহণ করে।

তারা React এর মধ্যে বিশেষ কারণ তাদের কাছে value প্রপ পাঠানোর বিষয়টা তাদেরকে নিয়ন্ত্রিত বানায়।

Resource and Metadata Components {/resource-and-metadata-components/}

এই বিল্ট-ইন ব্রাউজার কম্পোনেন্টগুলি আপনাকে বাহ্যিক রিসোর্স লোড করতে অথবা ডকুমেন্টে মেটাডেটা দিয়ে মার্ক করতে দেয়:

React-এ এগুলি বিশেষ কারণ React এগুলিকে ডকুমেন্টের হেডে রেন্ডার করতে পারে, রিসোর্স লোড হওয়া অবধি সাসপেন্ড করতে পারে, এবং প্রতিটি বিশেষ কম্পোনেন্টের জন্য রেফারেন্স পেজে বর্ণিত অন্যান্য আচরণ সম্পাদন করতে পারে।

সকল HTML কম্পোনেন্ট {/all-html-components/}

React সকল বিল্ট-ইন ব্রাউজার HTML কম্পোনেন্ট সাপোর্ট করে। এর মধ্যে রয়েছেঃ

DOM স্ট্যান্ডার্ড এর মতোই React প্রপের নামের জন্য camelCase রীতি অনুসরণ করে। উদাহরণস্বরূপ, আপনি tabindex এর জায়গায় লিখবেন tabIndex। আপনি online converter ব্যবহার করে বিদ্যমান HTML কে JSX এ রূপান্তরিত করতে পারবেন।

কাস্টম HTML এলিমেন্ট {/custom-html-elements/}

আপনি যদি dash আছে এমন একটি ট্যাগ রেন্ডার করেন, like <my-element>, React ধরে নেবে যে আপনি একটি কাস্টম HTML এলিমেন্ট রেন্ডার করতে চান। React এর ক্ষেত্রে, কাস্টম এলিমেন্ট রেন্ডার করা এবং বিল্ট-ইন ব্রাউজার ট্যাগ রেন্ডার করা ভিন্ন ভাবে কাজ করে।

আপনি যদি 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:

<my-element value="Hello, world!"></my-element>

Non-string JavaScript values passed to custom elements will be serialized by default:

// Will be passed as `"1,2,3"` as the output of `[1,2,3].toString()`
<my-element value={[1,2,3]}></my-element>

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:

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(<App />);
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(", ");
  }
}
export function App() {
  return <my-element value={[1,2,3]}></my-element>
}

Listening for events on custom elements {/custom-element-events/}

A common pattern when using custom elements is that they may dispatch CustomEvents 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.

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(<App />);
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);
  }
}
export function App() {
  return (
    <my-element
      onspeak={e => console.log(e.detail.message)}
    ></my-element>
  )
}

Events are case-sensitive and support dashes (-). Preserve the casing of the event and include all dashes when listening for custom element's events:

// Listens for `say-hi` events
<my-element onsay-hi={console.log}></my-element>
// Listens for `sayHi` events
<my-element onsayHi={console.log}></my-element>
---

সকল SVG কম্পোনেন্ট {/all-svg-components/}

React ব্রাউজারে থাকা সকল বিল্ট-ইন SVG কম্পোনেন্ট সাপোর্ট করে। এর মধ্যে রয়েছেঃ

DOM স্ট্যান্ডার্ড এর মতোই React প্রপের নামের জন্য camelCase রীতি অনুসরণ করে। উদাহরণস্বরূপ, আপনি tabindex এর জায়গায় লিখবেন tabIndex। আপনি online converter ব্যবহার করে বিদ্যমান SVG কে JSX এ রূপান্তরিত করতে পারবেন।

Namespaced অ্যাট্রিবিউটগুলো কোলন ছাড়া লিখতে হবেঃ

  • xlink:actuate becomes xlinkActuate.
  • xlink:arcrole becomes xlinkArcrole.
  • xlink:href becomes xlinkHref.
  • xlink:role becomes xlinkRole.
  • xlink:show becomes xlinkShow.
  • xlink:title becomes xlinkTitle.
  • xlink:type becomes xlinkType.
  • xml:base becomes xmlBase.
  • xml:lang becomes xmlLang.
  • xml:space becomes xmlSpace.
  • xmlns:xlink becomes xmlnsXlink.