API Reference

React DOM Components

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

সাধারণ কম্পোনেন্ট

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

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

ফর্ম কম্পোনেন্ট

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

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

Resource and Metadata Components

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

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

সকল HTML কম্পোনেন্ট

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

খেয়াল করুন

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

কাস্টম HTML এলিমেন্ট

আপনি যদি dash সহ একটি ট্যাগ রেন্ডার করেন, যেমন <my-element>, React ধরবে আপনি একটি custom HTML element রেন্ডার করতে চাইছেন।

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

কাস্টম এলিমেন্টে ভ্যালু সেট করা

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

  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 মান পাঠাতে পারে:

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(", ");
  }
}

কাস্টম এলিমেন্টসে ইভেন্ট লিসেনিং

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

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 কম্পোনেন্ট

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.
পূর্ববর্তী পেইজuseFormStatus
পরবর্তী পেইজCommon (e.g. <div>)