HTML থেকে JSX রূপান্তর হলো সাধারণ HTML মার্কআপকে JSX সিনট্যাক্সে পরিণত করার প্রক্রিয়া, যা React কম্পোনেন্ট রেন্ডার করতে পারে। JSX দেখতে HTML-এর মতো কিন্তু এটি JavaScript নামকরণ নিয়ম মেনে চলে। class অ্যাট্রিবিউট className হয়, for হয় htmlFor, এবং ইনলাইন style স্ট্রিং JavaScript অবজেক্টে পরিণত হয়। এই পরিবর্তনগুলো প্রয়োজন কারণ JSX, React.createElement() কলে কম্পাইল হয়, যেখানে অ্যাট্রিবিউটের নাম HTML অ্যাট্রিবিউটের পরিবর্তে DOM API প্রপার্টির নামের সাথে মিলতে হয়।
HTML অ্যাট্রিবিউট এবং JSX প্রপসের এই ম্যাপিং React-এর DOM এলিমেন্ট ডকুমেন্টেশনে নির্ধারণ করা আছে। React বহু-শব্দের অ্যাট্রিবিউটের জন্য camelCase ব্যবহার করে (tabindex হয় tabIndex, maxlength হয় maxLength) কারণ JavaScript আইডেন্টিফায়ারে হাইফেন থাকতে পারে না। <img>, <br>, এবং <input>-এর মতো সেলফ-ক্লোজিং ট্যাগগুলো JSX-এ ট্রেইলিং স্ল্যাশ সহ লিখতে হয় (<img />) কারণ JSX XML নিয়ম মেনে চলে, যেখানে প্রতিটি ট্যাগ স্পষ্টভাবে বন্ধ করতে হয়।
htmlToJsxContent.whatBody3
HTML থেকে JSX কনভার্টার কেন ব্যবহার করবেন?
ডজনখানেক HTML উপাদান জুড়ে ম্যানুয়ালি অ্যাট্রিবিউট পুনঃনামকরণ এবং style স্ট্রিং পুনর্লিখন ধীর এবং ত্রুটিপ্রবণ। একটি কনভার্টার একবারেই সমস্ত রূপান্তর সম্পন্ন করে, যেকোনো উৎস থেকে HTML পেস্ট করে সেকেন্ডের মধ্যে বৈধ JSX পাওয়া সম্ভব হয়।
⚡
তাৎক্ষণিক রূপান্তর
যেকোনো HTML স্নিপেট পেস্ট করুন এবং সঙ্গে সঙ্গে JSX আউটপুট পান। কনভার্টার class, for, style, ইভেন্ট হ্যান্ডলার, বুলিয়ান অ্যাট্রিবিউট এবং সেলফ-ক্লোজিং ট্যাগগুলো একটি পাসেই পরিচালনা করে।
🔒
গোপনীয়তা-প্রথম প্রক্রিয়াকরণ
সমস্ত রূপান্তর আপনার ব্রাউজারে স্থানীয়ভাবে চলে। আপনার HTML ব্রাউজারের বাইরে কোথাও যায় না, তাই আভ্যন্তরীণ কোড, API এন্ডপয়েন্ট বা সংবেদনশীল বিষয়বস্তু সহ মার্কআপ নিরাপদে রূপান্তর করতে পারবেন।
📋
কোনো অ্যাকাউন্ট বা সেটআপ নেই
পেজ খুলুন এবং রূপান্তর শুরু করুন। কোনো লগইন প্রয়োজন নেই, কোনো npm প্যাকেজ ইনস্টল করতে হবে না, কোনো বিল্ড স্টেপ কনফিগার করতে হবে না। আধুনিক ব্রাউজার সহ যেকোনো ডিভাইসে কাজ করে।
🔧
সম্পূর্ণ অ্যাট্রিবিউট কভারেজ
className, htmlFor, tabIndex, readOnly, autoComplete এবং আরো ২০+ সহ সমস্ত স্ট্যান্ডার্ড HTML-থেকে-JSX অ্যাট্রিবিউট ম্যাপিং রূপান্তর করে। onclick থেকে onClick ইভেন্ট হ্যান্ডলার পুনঃনামকরণও পরিচালনা করে।
HTML থেকে JSX ব্যবহারের ক্ষেত্র
ফ্রন্টএন্ড ডেভেলপার: টেমপ্লেট মাইগ্রেশন
একটি বিদ্যমান HTML পেজ বা কম্পোনেন্ট React প্রজেক্টে নিয়ে যাওয়ার সময়, শত শত লাইন জুড়ে class এবং for অ্যাট্রিবিউট ম্যানুয়ালি খোঁজার পরিবর্তে মার্কআপ কনভার্টারে পেস্ট করুন।
ব্যাকএন্ড ইঞ্জিনিয়ার: HTML ইমেইল এম্বেড করা
ইমেইল টেমপ্লেট সাধারণত সাধারণ HTML-এ লেখা হয়। React অ্যাডমিন ড্যাশবোর্ড বা প্রিভিউ কম্পোনেন্টে রেন্ডার করার সময়, className এবং style সিনট্যাক্স ত্রুটি এড়াতে HTML কে বৈধ JSX-এ রূপান্তর করুন।
DevOps: ড্যাশবোর্ড উইজেট রূপান্তর
মনিটরিং ড্যাশবোর্ডগুলো প্রায়ই কাস্টম উইজেটের জন্য HTML স্নিপেট ব্যবহার করে। Retool বা কাস্টম অ্যাডমিন প্যানেলের মতো React-ভিত্তিক অভ্যন্তরীণ টুল প্ল্যাটফর্মে একীভূত করার সময় এগুলো JSX-এ রূপান্তর করুন।
QA ইঞ্জিনিয়ার: বাগ রিপোর্ট পুনরুত্পাদন
যখন একটি বাগ রিপোর্টে কাঁচা HTML আউটপুট থাকে, তখন ভিজ্যুয়াল ইন্সপেকশন ও ডিবাগিংয়ের জন্য React টেস্ট হার্নেস বা Storybook স্টোরিতে দ্রুত রেন্ডার করতে JSX-এ রূপান্তর করুন।
ডিজাইনার: HTML মকআপ থেকে প্রোটোটাইপিং
Figma-এর মতো ডিজাইন টুল HTML/CSS রপ্তানি করে। এক্সপোর্ট করা মার্কআপ JSX-এ রূপান্তর করুন যাতে ম্যানুয়াল অ্যাট্রিবিউট পরিষ্কার ছাড়াই সরাসরি React প্রোটোটাইপে যোগ করা যায়।
শিক্ষার্থী: React সিনট্যাক্স শেখা
HTML ইনপুট এবং JSX আউটপুট পাশাপাশি তুলনা করুন বুঝতে যে কোন অ্যাট্রিবিউটগুলো পরিবর্তন হয় এবং কেন। রূপান্তরটি দেখলে শুধু ডকুমেন্টেশন পড়ার চেয়ে React নামকরণ নিয়মাবলী সহজে মনে রাখা যায়।
HTML থেকে JSX অ্যাট্রিবিউট ম্যাপিং রেফারেন্স
নীচের টেবিলে HTML অ্যাট্রিবিউটগুলো তালিকাভুক্ত রয়েছে যেগুলো JSX-এ রূপান্তরের সময় পরিবর্তন হয়। এখানে তালিকাভুক্ত নয় এমন অ্যাট্রিবিউটগুলো (id, src, href, alt, placeholder ইত্যাদি) অপরিবর্তিত থাকে কারণ তাদের HTML নাম ইতিমধ্যে DOM API প্রপার্টি নামের সাথে মিলে যায়।
HTML অ্যাট্রিবিউট
JSX প্রপ
টীকা
class
className
Reserved word in JavaScript
for
htmlFor
Reserved word in JavaScript
tabindex
tabIndex
camelCase convention
readonly
readOnly
camelCase convention
maxlength
maxLength
camelCase convention
minlength
minLength
camelCase convention
cellpadding
cellPadding
camelCase convention
cellspacing
cellSpacing
camelCase convention
rowspan
rowSpan
camelCase convention
colspan
colSpan
camelCase convention
enctype
encType
camelCase convention
autocomplete
autoComplete
camelCase convention
autofocus
autoFocus
camelCase convention
autoplay
autoPlay
camelCase convention
contenteditable
contentEditable
camelCase convention
crossorigin
crossOrigin
camelCase convention
novalidate
noValidate
camelCase convention
allowfullscreen
allowFullScreen
camelCase convention
spellcheck
spellCheck
camelCase convention
http-equiv
httpEquiv
Hyphen removed, camelCase
onclick
onClick
Event handler camelCase
onchange
onChange
Event handler camelCase
onsubmit
onSubmit
Event handler camelCase
ইনলাইন স্টাইল রূপান্তর: HTML বনাম JSX
ইনলাইন স্টাইল হলো HTML থেকে JSX রূপান্তরের সবচেয়ে ত্রুটিপ্রবণ অংশ কারণ মানের ফরম্যাট এবং প্রপার্টির নাম উভয়ই পরিবর্তন হয়:
HTML style অ্যাট্রিবিউট
সেমিকোলন দিয়ে বিভক্ত CSS ঘোষণার একটি স্ট্রিং। প্রপার্টির নাম kebab-case ব্যবহার করে (background-color, font-size, border-radius)। মানগুলো সর্বদা স্ট্রিং, এককসহ সংখ্যাসূচক মানও।
camelCase প্রপার্টি নামসহ একটি JavaScript অবজেক্ট (backgroundColor, fontSize, borderRadius)। স্ট্রিং মান উদ্ধৃত করা হয়। এককহীন সংখ্যাসূচক মান (lineHeight, opacity, zIndex, flexGrow) সাধারণ সংখ্যা হতে পারে।
এই উদাহরণগুলো দেখায় কিভাবে বিভিন্ন ভাষা এবং পরিবেশে প্রোগ্রাম্যাটিকভাবে HTML থেকে JSX রূপান্তর করা যায়। প্রতিটিতে অ্যাট্রিবিউট পুনঃনামকরণ, style রূপান্তর এবং সেলফ-ক্লোজিং ট্যাগ পরিচালনা অন্তর্ভুক্ত।
import parse from 'html-react-parser'
// Parse HTML string into React elements (handles all JSX rules)
const element = parse('<div class="card"><img src="photo.jpg" alt="Photo"></div>')
// Returns: React.createElement('div', { className: 'card' },
// React.createElement('img', { src: 'photo.jpg', alt: 'Photo' }))
// With custom element replacement
const options = {
replace(domNode) {
if (domNode.name === 'img') {
return <OptimizedImage src={domNode.attribs.src} alt={domNode.attribs.alt} />
}
}
}
const custom = parse('<img src="photo.jpg" alt="Photo">', options)
Python (BeautifulSoup)
from bs4 import BeautifulSoup
import re
ATTR_MAP = {
'class': 'className', 'for': 'htmlFor',
'tabindex': 'tabIndex', 'readonly': 'readOnly',
'maxlength': 'maxLength', 'autocomplete': 'autoComplete',
}
def html_to_jsx(html: str) -> str:
"""Convert HTML attribute names to JSX equivalents."""
for html_attr, jsx_attr in ATTR_MAP.items():
html = re.sub(rf'\b{html_attr}=', f'{jsx_attr}=', html)
# Convert HTML comments to JSX comments
html = re.sub(r'<!--(.*?)-->', r'{/*\1*/}', html)
return html
print(html_to_jsx('<label for="email" class="field">Email</label>'))
# → '<label htmlFor="email" className="field">Email</label>'
Go
package main
import (
"fmt"
"strings"
)
var attrMap = map[string]string{
"class=": "className=",
"for=": "htmlFor=",
"tabindex=": "tabIndex=",
"readonly": "readOnly",
}
func htmlToJSX(html string) string {
result := html
for old, new := range attrMap {
result = strings.ReplaceAll(result, old, new)
}
// Convert comments
result = strings.ReplaceAll(result, "<!--", "{/*")
result = strings.ReplaceAll(result, "-->", "*/}")
return result
}
func main() {
html := `<div class="wrapper"><input readonly tabindex="1"></div>`
fmt.Println(htmlToJSX(html))
// → <div className="wrapper"><input readOnly tabIndex="1"></div>
}
সচরাচর জিজ্ঞাসিত প্রশ্ন
HTML এবং JSX-এর মধ্যে পার্থক্য কী?
JSX হলো React-এ ব্যবহৃত JavaScript-এর একটি সিনট্যাক্স এক্সটেনশন। এটি HTML-এর মতো দেখায় কিন্তু React.createElement() কলে কম্পাইল হয়। মূল পার্থক্যগুলো হলো: class হয় className, for হয় htmlFor, ইনলাইন স্টাইল CSS স্ট্রিংয়ের পরিবর্তে JavaScript অবজেক্ট ব্যবহার করে, এবং সমস্ত ট্যাগ স্পষ্টভাবে বন্ধ করতে হয় (<img />-এর মতো void এলিমেন্ট সহ)। JSX কার্লি ব্রেসের মধ্যে JavaScript এক্সপ্রেশন এম্বেড করার সুযোগও দেয়।
React class-এর পরিবর্তে className কেন ব্যবহার করে?
'class' শব্দটি JavaScript-এ একটি সংরক্ষিত কীওয়ার্ড। যেহেতু JSX JavaScript ফাংশন কলে কম্পাইল হয়, তাই প্রপ নাম হিসেবে 'class' ব্যবহার করলে সিনট্যাক্স ত্রুটি হবে। React 'className' বেছে নিয়েছে কারণ এটি DOM API প্রপার্টি নামের (element.className) সাথে মিলে যায় যা JavaScript ইতিমধ্যে DOM উপাদানে CSS ক্লাস পড়তে এবং সেট করতে ব্যবহার করে।
HTML থেকে JSX ম্যানুয়ালি রূপান্তর করতে হবে কি?
না। আপনি এই টুলের মতো অনলাইন কনভার্টার ব্যবহার করতে পারেন, অথবা htmltojsx (npm) বা html-react-parser-এর মতো লাইব্রেরি দিয়ে স্বয়ংক্রিয় করতে পারেন। বড় আকারের মাইগ্রেশনের জন্য, codemod বা jscodeshift-এর মতো টুল সম্পূর্ণ কোডবেস রূপান্তর করতে পারে। ম্যানুয়াল রূপান্তর শুধুমাত্র কয়েক লাইনের ছোট স্নিপেটের জন্য ব্যবহারিক।
JSX-এ ইনলাইন স্টাইল কিভাবে পরিচালনা করা হয়?
JSX-এ, style অ্যাট্রিবিউট একটি JavaScript অবজেক্ট গ্রহণ করে, CSS স্ট্রিং নয়। প্রপার্টির নাম camelCase ব্যবহার করে (background-color-এর পরিবর্তে backgroundColor)। মান ডিফল্টরূপে স্ট্রিং, কিন্তু lineHeight, opacity এবং zIndex-এর মতো নির্দিষ্ট সংখ্যাসূচক প্রপার্টি এককহীন সাধারণ সংখ্যা গ্রহণ করে। style={{ color: 'red' }}-এ দ্বিগুণ কার্লি ব্রেস বিশেষ সিনট্যাক্স নয়: বাইরের ব্রেস একটি JSX এক্সপ্রেশন, এবং ভেতরের ব্রেস একটি JavaScript অবজেক্ট লিটেরাল।
JSX-এ কি HTML মন্তব্য ব্যবহার করা যায়?
না। HTML মন্তব্য (<!-- comment -->) JSX-এ বৈধ নয়। পরিবর্তে কার্লি ব্রেসে মোড়ানো JavaScript ব্লক মন্তব্য ব্যবহার করুন: {/* comment */}। এই কনভার্টার স্বয়ংক্রিয়ভাবে রূপান্তর পরিচালনা করে। JSX মন্তব্য একটি কম্পোনেন্ট রিটার্নের শীর্ষ স্তরে নয়, একটি প্যারেন্ট উপাদানের ভেতরে থাকতে হবে।
কোন HTML অ্যাট্রিবিউটগুলো JSX-এ অপরিবর্তিত থাকে?
বেশিরভাগ HTML অ্যাট্রিবিউট JSX-এ তাদের মূল নাম বজায় রাখে। সাধারণ উদাহরণগুলোর মধ্যে রয়েছে id, src, href, alt, type, name, value, placeholder, disabled, hidden, এবং সমস্ত data-* এবং aria-* অ্যাট্রিবিউট। শুধুমাত্র যেসব অ্যাট্রিবিউটের HTML নাম DOM API প্রপার্টি নামের চেয়ে আলাদা সেগুলো পরিবর্তন করতে হয়: class থেকে className, for থেকে htmlFor, এবং বহু-শব্দের অ্যাট্রিবিউটগুলো যেগুলো lowercase থেকে camelCase-এ পরিবর্তন হয়।
dangerouslySetInnerHTML কি HTML থেকে JSX রূপান্তরের মতো?
না। dangerouslySetInnerHTML React-এর রেন্ডারিং বাইপাস করে এবং সরাসরি DOM-এ কাঁচা HTML ইনজেক্ট করে, যা XSS দুর্বলতার ঝুঁকি তৈরি করে। HTML থেকে JSX রূপান্তর আসল React উপাদান তৈরি করে যা React-এর ভার্চুয়াল DOM-এর মধ্য দিয়ে যায় এবং ডিফল্টরূপে নিরাপদ। আপনার নিয়ন্ত্রণে থাকা স্ট্যাটিক মার্কআপের জন্য HTML-থেকে-JSX রূপান্তর ব্যবহার করুন। dangerouslySetInnerHTML শুধুমাত্র তখন ব্যবহার করুন যখন আপনাকে এমন বিশ্বস্ত HTML রেন্ডার করতে হয় যা বাহ্যিক উৎস থেকে এবং JSX-এ রূপান্তর করা সম্ভব নয়।