ToolDeck

Konwerter HTML na JSX

Konwertuj HTML do JSX dla React — class→className, style string→obiekt

Wypróbuj przykład

Dane HTML

Wynik JSX

Działa lokalnie · Bezpieczne do wklejania sekretów
Wynik JSX pojawi się tutaj…

Czym jest konwersja HTML do JSX?

Konwersja HTML do JSX to proces przekształcania standardowych znaczników HTML w składnię JSX, którą mogą renderować komponenty React. JSX wygląda podobnie do HTML, ale stosuje konwencje i reguły nazewnictwa JavaScript. Atrybuty takie jak class stają się className, for staje się htmlFor, a stringi style są zastępowane obiektami JavaScript. Te zmiany są wymagane, ponieważ JSX kompiluje się do wywołań React.createElement(), gdzie nazwy atrybutów muszą odpowiadać nazwom właściwości DOM API, a nie atrybutom HTML.

Mapowanie między atrybutami HTML a propsami JSX jest zdefiniowane w dokumentacji elementów DOM React. React używa camelCase dla wielowyrazowych atrybutów (tabindex staje się tabIndex, maxlength staje się maxLength), ponieważ identyfikatory JavaScript nie mogą zawierać myślników. Samozamykające się tagi jak <img>, <br> i <input> muszą zawierać końcowy ukośnik w JSX (<img />), gdyż JSX stosuje reguły XML, gdzie każdy tag musi być jawnie zamknięty.

htmlToJsxContent.whatBody3

Po co używać konwertera HTML do JSX?

Ręczne zmienianie nazw atrybutów i przepisywanie stringów style w dziesiątkach elementów HTML jest powolne i podatne na błędy. Konwerter obsługuje wszystkie transformacje naraz — wklej HTML z dowolnego źródła i otrzymaj prawidłowy JSX w kilka sekund.

Natychmiastowa konwersja
Wklej dowolny fragment HTML i od razu otrzymaj wynik JSX. Konwerter obsługuje class, for, style, procedury obsługi zdarzeń, atrybuty logiczne i samozamykające się tagi w jednym przebiegu.
🔒
Przetwarzanie z priorytetem prywatności
Cała konwersja odbywa się lokalnie w przeglądarce. Twój HTML nigdy nie opuszcza strony, więc możesz bezpiecznie konwertować znaczniki zawierające wewnętrzny kod, endpointy API lub poufną zawartość.
📋
Bez konta i konfiguracji
Otwórz stronę i zacznij konwertować. Nie wymaga logowania, instalowania pakietów npm ani konfigurowania kroku budowania. Działa na każdym urządzeniu z nowoczesną przeglądarką.
🔧
Pełne pokrycie atrybutów
Konwertuje wszystkie standardowe mapowania atrybutów HTML na JSX, w tym className, htmlFor, tabIndex, readOnly, autoComplete i ponad 20 innych. Obsługuje też zmianę nazw procedur obsługi zdarzeń, np. onclick na onClick.

Zastosowania konwertera HTML do JSX

Programista frontendowy: migracja szablonów
Przenosząc istniejącą stronę HTML lub komponent do projektu React, wklej znaczniki do konwertera zamiast ręcznie szukać atrybutów class i for w setkach wierszy.
Inżynier backendowy: osadzanie wiadomości e-mail HTML
Szablony e-mail są tworzone w czystym HTML. Przy renderowaniu ich w panelu administracyjnym React lub komponencie podglądu konwertuj HTML na prawidłowy JSX, aby uniknąć błędów składni className i style.
DevOps: konwersja widżetów dashboardu
Dashboardy monitorujące często używają fragmentów HTML dla niestandardowych widżetów. Konwertuj je na JSX podczas integracji z platformą wewnętrznych narzędzi opartą na React, jak Retool lub własny panel administracyjny.
Inżynier QA: odtwarzanie zgłoszeń błędów
Gdy zgłoszenie błędu zawiera surowe wyjście HTML, konwertuj je na JSX, aby szybko wyrenderować w środowisku testowym React lub historii Storybook do inspekcji wizualnej i debugowania.
Designer: prototypowanie na podstawie makiet HTML
Narzędzia projektowe jak Figma eksportują HTML/CSS. Konwertuj wyeksportowane znaczniki na JSX, aby wstawić je bezpośrednio do prototypu React bez ręcznego czyszczenia atrybutów.
Student: nauka składni React
Porównuj wejście HTML z wyjściem JSX obok siebie, aby zrozumieć, które atrybuty się zmieniają i dlaczego. Obserwowanie transformacji ułatwia zapamiętanie konwencji nazewnictwa React bardziej niż samo czytanie dokumentacji.

Tabela mapowania atrybutów HTML na JSX

Poniższa tabela zawiera atrybuty HTML, które zmieniają się podczas konwersji do JSX. Atrybuty tu niewymienione (id, src, href, alt, placeholder itp.) pozostają niezmienione, ponieważ ich nazwy HTML już odpowiadają odpowiednim nazwom właściwości DOM API.

Atrybut HTMLProp JSXUwagi
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

Konwersja stylu inline: HTML kontra JSX

Style inline to najbardziej podatna na błędy część konwersji HTML do JSX, ponieważ zmienia się zarówno format wartości, jak i nazwy właściwości:

Atrybut style HTML
String deklaracji CSS rozdzielonych średnikami. Nazwy właściwości używają kebab-case (background-color, font-size, border-radius). Wartości są zawsze stringami, w tym wartości numeryczne z jednostkami.
<div style="background-color: #fff;
  font-size: 14px;
  margin-top: 10px;">
Prop style JSX
Obiekt JavaScript z nazwami właściwości w camelCase (backgroundColor, fontSize, borderRadius). Wartości stringowe są cytowane. Numeryczne wartości bez jednostek (lineHeight, opacity, zIndex, flexGrow) mogą być zwykłymi liczbami.
<div style={{
  backgroundColor: '#fff',
  fontSize: '14px',
  marginTop: 10
}}>

Przykłady kodu

Poniższe przykłady pokazują, jak programistycznie konwertować HTML do JSX w różnych językach i środowiskach. Każdy obejmuje zmianę nazw atrybutów, konwersję stylu i obsługę samozamykających się tagów.

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>
}

Często zadawane pytania

Jaka jest różnica między HTML a JSX?
JSX to rozszerzenie składni JavaScript używane przez React. Wygląda jak HTML, ale kompiluje się do wywołań React.createElement(). Główne różnice: class staje się className, for staje się htmlFor, style inline używają obiektów JavaScript zamiast stringów CSS, a wszystkie tagi muszą być jawnie zamknięte (w tym elementy puste, jak <img />). JSX pozwala też osadzać wyrażenia JavaScript wewnątrz nawiasów klamrowych.
Dlaczego React używa className zamiast class?
Słowo 'class' jest zarezerwowanym słowem kluczowym JavaScript. Ponieważ JSX kompiluje się do wywołań funkcji JavaScript, użycie 'class' jako nazwy propu spowodowałoby błąd składni. React wybrał 'className', ponieważ odpowiada nazwie właściwości DOM API (element.className), której JavaScript już używa do odczytu i ustawiania klas CSS na elementach DOM.
Czy muszę ręcznie konwertować HTML do JSX?
Nie. Możesz użyć konwertera online, takiego jak to narzędzie, lub zautomatyzować proces za pomocą bibliotek takich jak htmltojsx (npm) lub html-react-parser. Przy migracji na dużą skalę narzędzia jak codemod lub jscodeshift mogą transformować całe bazy kodu. Ręczna konwersja jest praktyczna tylko dla małych fragmentów liczących kilka wierszy.
Jak style inline są obsługiwane w JSX?
htmlToJsxContent.a4
Czy mogę używać komentarzy HTML w JSX?
htmlToJsxContent.a5
Które atrybuty HTML pozostają takie same w JSX?
Większość atrybutów HTML zachowuje swoje oryginalne nazwy w JSX. Typowe przykłady to id, src, href, alt, type, name, value, placeholder, disabled, hidden oraz wszystkie atrybuty data-* i aria-*. Zmienić trzeba tylko atrybuty, których nazwy HTML różnią się od nazw właściwości DOM API: class na className, for na htmlFor oraz wielowyrazowe atrybuty przechodzące z małych liter na camelCase.
Czy dangerouslySetInnerHTML to to samo co konwersja HTML do JSX?
Nie. dangerouslySetInnerHTML pomija renderowanie React i wstrzykuje surowy HTML bezpośrednio do DOM, co stwarza ryzyko podatności XSS. Konwersja HTML do JSX tworzy rzeczywiste elementy React, które przechodzą przez wirtualny DOM React i są domyślnie bezpieczne. Używaj konwersji HTML do JSX dla statycznych znaczników, które kontrolujesz. Używaj dangerouslySetInnerHTML tylko wtedy, gdy musisz renderować zaufany HTML z zewnętrznego źródła, którego nie można przekonwertować na JSX.