Skip to content

index.md

Latest commit

 

History

History
389 lines (320 loc) · 23.1 KB

index.md

File metadata and controls

389 lines (320 loc) · 23.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 সহ একটি ট্যাগ রেন্ডার করেন, যেমন <my-element>, React ধরবে আপনি একটি custom HTML element রেন্ডার করতে চাইছেন।

আপনি যদি is এট্রিবিউট সহ একটি ব্রাউজার বিল্ট-ইন HTML এলিমেন্ট রেন্ডার করেন, তবে এটিকে একটি কাস্টম এলিমেন্ট হিসাবে গণ্য করা হবে।

কাস্টম এলিমেন্টে ভ্যালু সেট করা {/attributes-vs-properties/}

কাস্টম এলিমেন্টে ডেটা পাঠানোর দুটি উপায় আছে:

  1. Attributes: যেগুলো markup-এ দেখা যায় এবং কেবল string মানেই সেট করা যায়
  2. Properties: যেগুলো markup-এ দেখা যায় না এবং যেকোনো JavaScript মানে সেট করা যায়

ডিফল্টভাবে, React JSX-এ bind করা মানগুলোকে attributes হিসেবে পাঠায়:

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

স্ট্রিং নয় এমন জাভাস্ক্রিপ্ট ভ্যালু কাস্টম এলিমেন্টসে পাঠালে ডিফল্টভাবে সেগুলো সিরিয়ালাইজ করা হবে:

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

তবে, কোনো কাস্টম এলিমেন্টের ক্লাস কন্সট্রাকশন চলাকালে যদি কোনো প্রপার্টির নাম দৃশ্যমান থাকে, React সেটিকে প্রপার্টি হিসেবে চিনে নিয়ে সেখানে arbitrary মান পাঠাতে পারে:

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>
}

কাস্টম এলিমেন্টসে ইভেন্ট লিসেনিং {/custom-element-events/}

কাস্টম এলিমেন্ট ব্যবহার করার সময় একটি সাধারণ প্যাটার্ন হলো—এগুলো কোন ইভেন্ট হলে কল করার জন্য ফাংশন নেয়ার বদলে CustomEvent dispatch করতে পারে। JSX-এর মাধ্যমে bind করার সময় ইভেন্ট নামের আগে on প্রিফিক্স দিয়ে এগুলোর ইভেন্ট শোনা যাবে।

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>
  )
}

ইভেন্টগুলোর ক্ষেত্রে casing সংবেদনশীল এবং dashes (-) সাপোর্ট করে। custom element-এর ইভেন্ট শোনার সময় ইভেন্টের casing ঠিক রাখুন এবং সব dashes অন্তর্ভুক্ত করুন:

// 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.