Geliştirici / React

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

HTML'yi React için JSX'e dönüştürün: class'ı className'e, satır içi stilleri nesnelere dönüştürün; kapanış etiketleri ekleyin, süslü parantezleri ve yorumları kaçışlayın, isteğe bağlı olarak bir bileşenle sarın.

HTML'den JSX'e Dönüştürücü: HTML, öğelere ayrıştırılır; böylece öznitelikler React için yeniden adlandırılır (class, for, tabindex, readonly, maxlength ve diğerleri), stiller camelCase anahtarları olan nesnelere dönüştürülür ve <br> ile <img> gibi kapanış etiketi olmayan öğelere kapanış eklenir. Metindeki süslü parantezler ve açılı parantezler kaçışlanır, yorumlar {/* */} biçimine dönüştürülür, form değerleri ise defaultValue ve defaultChecked olur; böylece alanlar düzenlenebilir kalır. Test sayfalarının çıktısı TSX olarak derlenir. Sunucuya hiçbir dosya yüklenmeden tarayıcınızda %100 yerel olarak çalışır.

Kategori
Geliştirici araçları
Çalıştırma sayısı
Tarayıcınızda
Maliyet
Ücretsiz · kayıt gerekmez
Kullanılabilirlik
Kullanıma hazır
HTML'den JSX'eYerel işleme

Tamamen tarayıcınızda çalışır

  • <button> üzerindeki onclick="send()" kaldırıldı: bunu onClick={() => …} gibi bir işlev olarak yazın.

JSX

<div className="card" style={{ marginTop: "8px", backgroundColor: "#fff" }}>
  <label htmlFor="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required />
  <button tabIndex="0">Send</button>
  {/* footer */}
  <p>Price: {"{"}price{"}"} &gt; 0</p>
</div>

React için öznitelikler yeniden adlandırılır (class, className'e; for, htmlFor'a; tabindex, tabIndex'e dönüştürülür), stiller nesne hâline gelir, boş ve void öğeler kapatılır, yorumlar {/* */} biçimine dönüştürülür ve alanların düzenlenebilir kalması için form değerleri defaultValue olur.

Dönüştürmeden sonra

Tekrarlanan işaretlemeyi props alan bileşenlere dönüştürün, sabit kodlanmış metni süslü parantez içindeki değişkenlerle değiştirin ve satır içi stilleri CSS sınıflarına veya kullandığınız stil sistemine taşıyın; çünkü stil nesneleri her oluşturmada yeniden oluşturulur.

SVG simgeleri için SVG to JSX, props değerlerini ileten bir bileşen oluşturur; önce yorumları ve gereksiz boşlukları kaldırmak için HTML küçültücüyü kullanın.

Sıkça sorun çıkaran farklar

JSX tek bir kök öğe gerektirir; bu nedenle birden fazla öğe bir fragment (<>…</>) içine alınır. Her öğe kapatılmalı, öznitelik adları camelCase olmalı ve { veya } içeren metin {"{"} olarak yazılmalıdır; dönüştürücü bunu sizin için yapar.

Nasıl kullanılır?

  1. Tek bir öğeden sayfanın tamamındaki bir bölüme kadar HTML'yi yapıştırın.
  2. İsteğe bağlı olarak sonucu adlandırılmış bir bileşenle sarın.
  3. JSX'i kopyalayın ve uyarılarda listelenen satır içi olay işleyicilerini yeniden yazın.

Gizlilik ve sınırlamalar

HTML, tarayıcıda dönüştürülür ve hiçbir zaman yüklenmez.

İlgili araçlar

SVG'den JSX'eHTML KüçültücüHTML Kodlayıcı

Sık sorulan sorular

onclick öznitelikleri neden kaldırılıyor?

HTML'de bunlar kod dizeleridir; React'te ise işlev olmaları gerekir. Dönüştürücü her birini listeler; böylece örneğin onclick="save()" ifadesini onClick={save} olarak yeniden yazabilirsiniz.

value neden defaultValue oluyor?

React'te bir value özniteliği alanı kontrollü hâle getirir; bu nedenle onChange işleyicisi olmadan alana metin girilemez. defaultValue başlangıç metnini ayarlar ve alanı düzenlenebilir bırakır.

SVG'yi destekliyor mu?

Evet: stroke-width gibi SVG öznitelikleri strokeWidth olur. SVG'nin tamamını bir bileşene dönüştürmek için SVG'den JSX'e aracı props ekler.

Ücretsiz araç · tarayıcınızda kez çalıştırma · hesap gerekmez