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

  • সকল কাস্টম এলিমেন্ট প্রপ স্ট্রিং এ সিরিয়ালাইজ করা হয় এবং সব সময় এট্রিবিউট ব্যবহার করে সেট করা হয়।
  • কাস্টম এলিমেন্ট এর জায়গায় class গ্রহণ করে, এবং htmlFor এর জায়গায় for

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

খেয়াল করুন

ভবিষ্যতে React এর একটি ভার্শনে কাস্টম এলিমেন্টের জন্য আরো বিস্তারিত সাপোর্ট থাকবে।

React প্যাকেজগুলো সর্বশেষ পরীক্ষামূলক ভার্শনে আপগ্রেড করার মাধ্যমে আপনি এগুলো ব্যবহার করে দেখতে পারেনঃ

  • react@experimental
  • react-dom@experimental

React  এর পরীক্ষামূলক ভার্শনগুলোতে বাগ থাকতে পারে। প্রোডাকশনে এই ভার্শঙ্গুলো ব্যবহার করবেন না।


সকল 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.