HTML'den JSX'e dönüşüm, standart HTML işaretlemesini React bileşenlerinin render edebileceği JSX sözdizimine dönüştürme işlemidir. JSX, HTML'e benzer görünür ancak JavaScript adlandırma kurallarını ve kurallarını izler. class gibi nitelikler className olur, for ise htmlFor olur; satır içi stil dizileri JavaScript nesneleriyle değiştirilir. Bu değişiklikler zorunludur çünkü JSX, React.createElement() çağrılarına derlenir; burada nitelik adlarının HTML nitelik adları yerine DOM API özellik adlarıyla eşleşmesi gerekir.
HTML nitelikleri ile JSX prop'ları arasındaki eşleştirme, React'in DOM öğeleri belgesi tarafından tanımlanır. React, çok sözcüklü nitelikler için camelCase kullanır (tabindex, tabIndex olur; maxlength, maxLength olur); çünkü JavaScript tanımlayıcıları kısa çizgi içeremez. JSX'te <img>, <br> ve <input> gibi kendiliğinden kapanan etiketlerin sonuna eğik çizgi eklenmelidir (<img />); zira JSX, her etiketin açıkça kapatılması gereken XML kurallarını izler.
htmlToJsxContent.whatBody3
Neden HTML'den JSX'e Dönüştürücü Kullanmalısınız?
Onlarca HTML öğesinde nitelikleri manuel olarak yeniden adlandırmak ve stil dizilerini yeniden yazmak yavaş ve hata eğilimlidir. Bir dönüştürücü tüm dönüşümleri tek seferde yapar; herhangi bir kaynaktan HTML yapıştırarak saniyeler içinde geçerli JSX elde edersiniz.
⚡
Anında dönüşüm
Herhangi bir HTML parçasını yapıştırın ve hemen JSX çıktısı alın. Dönüştürücü, class, for, style, olay işleyicileri, boole nitelikleri ve kendiliğinden kapanan etiketleri tek geçişte işler.
🔒
Gizlilik öncelikli işleme
Tüm dönüşüm tarayıcınızda yerel olarak gerçekleşir. HTML'niz sayfadan hiç ayrılmaz; bu sayede dahili kod, API uç noktaları veya hassas içerik barındıran işaretlemeleri güvenle dönüştürebilirsiniz.
📋
Hesap veya kurulum gerekmez
Sayfayı açın ve dönüştürmeye başlayın. Giriş gerekmez, npm paketi kurulmaz, yapılandırılacak derleme adımı yoktur. Modern tarayıcısı olan her cihazda çalışır.
🔧
Tam nitelik kapsamı
className, htmlFor, tabIndex, readOnly, autoComplete dahil 20'den fazla standart HTML'den JSX'e nitelik eşleştirmesini dönüştürür. onclick'ten onClick'e olay işleyici yeniden adlandırmasını da işler.
HTML'den JSX'e Kullanım Senaryoları
Frontend geliştirici: şablonları taşıma
Mevcut bir HTML sayfasını veya bileşenini React projesine taşırken, yüzlerce satırda class ve for niteliklerini manuel olarak aramak yerine işaretlemeyi dönüştürücüye yapıştırın.
Backend geliştirici: HTML e-postalarını gömme
E-posta şablonları düz HTML olarak hazırlanır. React admin paneli veya önizleme bileşeni içinde render edilirken, className ve style sözdizimi hatalarından kaçınmak için HTML'yi geçerli JSX'e dönüştürün.
DevOps: kontrol paneli widget'larını dönüştürme
İzleme kontrol panelleri genellikle özel widget'lar için HTML parçaları kullanır. Bunları Retool gibi React tabanlı dahili araç platformuna veya özel bir yönetim paneline entegre ederken JSX'e dönüştürün.
QA mühendisi: hata raporlarını yeniden oluşturma
Bir hata raporu ham HTML çıktısı içerdiğinde, görsel inceleme ve hata ayıklama için React test ortamında veya Storybook hikayesinde hızlıca render etmek amacıyla JSX'e dönüştürün.
Tasarımcı: HTML taslak modellerinden prototip oluşturma
Figma gibi tasarım araçları HTML/CSS dışa aktarır. Manuel nitelik temizliği yapmadan doğrudan React prototipine bırakmak için dışa aktarılan işaretlemeyi JSX'e dönüştürün.
Öğrenci: React sözdizimini öğrenme
HTML girdisini JSX çıktısıyla yan yana karşılaştırarak hangi niteliklerin neden değiştiğini anlayın. Dönüşümü görmek, React adlandırma kurallarını yalnızca belgeleri okumaktan daha kolay ezberlemenizi sağlar.
HTML'den JSX'e Nitelik Eşleştirme Referansı
Aşağıdaki tablo, JSX'e dönüştürüldüğünde değişen HTML niteliklerini listeler. Burada listelenmeyen nitelikler (id, src, href, alt, placeholder vb.) değişmeden kalır; çünkü HTML adları zaten karşılık gelen DOM API özellik adlarıyla eşleşir.
HTML Niteliği
JSX Prop
Notlar
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
Satır İçi Stil Dönüşümü: HTML ve JSX
Satır içi stiller, HTML'den JSX'e dönüşümün en hata eğilimli bölümüdür; çünkü hem değer biçimi hem de özellik adları değişir:
HTML style niteliği
Noktalı virgüllerle ayrılmış CSS bildirimlerinden oluşan bir dize. Özellik adları kebab-case kullanır (background-color, font-size, border-radius). Birim içeren sayısal değerler dahil tüm değerler dize olarak ifade edilir.
camelCase özellik adlarına sahip bir JavaScript nesnesi (backgroundColor, fontSize, borderRadius). Dize değerleri tırnak içine alınır. Birimsiz sayısal değerler (lineHeight, opacity, zIndex, flexGrow) düz sayı olarak verilebilir.
Bu örnekler, farklı dil ve ortamlarda HTML'yi programatik olarak JSX'e nasıl dönüştüreceğinizi gösterir. Her biri nitelik yeniden adlandırma, stil dönüşümü ve kendiliğinden kapanan etiket işlemeyi kapsar.
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>
}
Sıkça Sorulan Sorular
HTML ile JSX arasındaki fark nedir?
JSX, React tarafından kullanılan JavaScript için bir sözdizimi uzantısıdır. HTML'ye benzer görünür ancak React.createElement() çağrılarına derlenir. Temel farklar şunlardır: class, className olur; for, htmlFor olur; satır içi stiller CSS dizileri yerine JavaScript nesneleri kullanır; tüm etiketler açıkça kapatılmalıdır (<img /> gibi void öğeler dahil). JSX ayrıca küme parantezleri içine JavaScript ifadeleri yerleştirmeye olanak tanır.
React neden class yerine className kullanır?
'class' sözcüğü JavaScript'te ayrılmış bir anahtar kelimedir. JSX JavaScript işlev çağrılarına derlendiğinden, prop adı olarak 'class' kullanmak sözdizimi hatasına yol açar. React, 'className' tercih etmiştir; çünkü bu, DOM öğelerinde CSS sınıflarını okumak ve ayarlamak için JavaScript'in zaten kullandığı DOM API özellik adıyla (element.className) eşleşir.
HTML'yi JSX'e manuel olarak dönüştürmem gerekiyor mu?
Hayır. Bu araç gibi çevrimiçi bir dönüştürücü kullanabilir ya da htmltojsx (npm) veya html-react-parser gibi kütüphanelerle otomatikleştirebilirsiniz. Büyük ölçekli taşımalar için codemod veya jscodeshift gibi araçlar tüm kod tabanlarını dönüştürebilir. Manuel dönüşüm yalnızca birkaç satırlık küçük parçalar için pratiktir.
JSX'te satır içi stiller nasıl işlenir?
JSX'te style niteliği bir CSS dizisi değil JavaScript nesnesi alır. Özellik adları camelCase kullanır (background-color yerine backgroundColor). Değerler varsayılan olarak dize şeklindedir; ancak lineHeight, opacity ve zIndex gibi belirli sayısal özellikler birimsiz düz sayı kabul edebilir. style={{ color: red' }}' içindeki çift küme parantezi özel bir sözdizimi değildir: dıştaki parantez bir JSX ifadesidir, içteki ise bir JavaScript nesne değişmezidir.
JSX'te HTML yorumlarını kullanabilir miyim?
Hayır. HTML yorumları (<!-- yorum -->) JSX'te geçerli değildir. Bunun yerine küme parantezleri içine alınmış JavaScript blok yorumlarını kullanın: {/* yorum */}. Bu dönüştürücü bu dönüşümü otomatik olarak işler. JSX yorumları bileşen dönüşünün en üst düzeyinde değil, bir üst öğe içinde olmalıdır.
Hangi HTML nitelikleri JSX'te aynı kalır?
HTML niteliklerinin büyük çoğunluğu JSX'te orijinal adlarını korur. Yaygın örnekler arasında id, src, href, alt, type, name, value, placeholder, disabled, hidden ile tüm data-* ve aria-* nitelikleri yer alır. Yalnızca HTML adı DOM API özellik adından farklı olan nitelikler değişmelidir: class'tan className'e, for'dan htmlFor'a ve küçük harften camelCase'e geçen çok sözcüklü nitelikler.
dangerouslySetInnerHTML, HTML'yi JSX'e dönüştürmekle aynı şey midir?
Hayır. dangerouslySetInnerHTML, React'in render işlemini atlar ve ham HTML'yi doğrudan DOM'a enjekte eder; bu da XSS açıklarına yol açabilir. HTML'yi JSX'e dönüştürmek ise React'in sanal DOM'undan geçen ve varsayılan olarak güvenli olan gerçek React öğeleri üretir. Kontrol ettiğiniz statik işaretleme için HTML'den JSX'e dönüşümü kullanın. dangerouslySetInnerHTML'i yalnızca JSX'e dönüştürülemeyen güvenilir bir harici kaynaktan gelen HTML'yi render etmeniz gerektiğinde kullanın.