ToolDeck

HTML'den JSX'e Dönüştürücü

HTML'yi React JSX'e dönüştür — class→className, stil dizeleri→nesneler

Örnek dene

HTML Girdi

JSX Çıktı

Yerel olarak çalışır · Gizli bilgi yapıştırmak güvenlidir
JSX çıktısı burada görünecek…

HTML'den JSX'e Dönüşüm Nedir?

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ğiJSX PropNotlar
classclassNameReserved word in JavaScript
forhtmlForReserved word in JavaScript
tabindextabIndexcamelCase convention
readonlyreadOnlycamelCase convention
maxlengthmaxLengthcamelCase convention
minlengthminLengthcamelCase convention
cellpaddingcellPaddingcamelCase convention
cellspacingcellSpacingcamelCase convention
rowspanrowSpancamelCase convention
colspancolSpancamelCase convention
enctypeencTypecamelCase convention
autocompleteautoCompletecamelCase convention
autofocusautoFocuscamelCase convention
autoplayautoPlaycamelCase convention
contenteditablecontentEditablecamelCase convention
crossorigincrossOrigincamelCase convention
novalidatenoValidatecamelCase convention
allowfullscreenallowFullScreencamelCase convention
spellcheckspellCheckcamelCase convention
http-equivhttpEquivHyphen removed, camelCase
onclickonClickEvent handler camelCase
onchangeonChangeEvent handler camelCase
onsubmitonSubmitEvent 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.
<div style="background-color: #fff;
  font-size: 14px;
  margin-top: 10px;">
JSX style prop
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.
<div style={{
  backgroundColor: '#fff',
  fontSize: '14px',
  marginTop: 10
}}>

Kod Örnekleri

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.

JavaScript (DOM API)
// Simple attribute conversion using string replacement
function htmlToJsx(html) {
  return html
    .replace(/\bclass=/g, 'className=')
    .replace(/\bfor=/g, 'htmlFor=')
    .replace(/\btabindex=/g, 'tabIndex=')
    .replace(/<!--([\s\S]*?)-->/g, '{/*$1*/}')
}

htmlToJsx('<div class="box" tabindex="0"><!-- note --></div>')
// → '<div className="box" tabIndex="0">{/* note */}</div>'
JavaScript (html-react-parser)
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.