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

Reklam
Tüm araçlar Ücretsiz

HTML yapıştırın ve temiz React JSX alın — class className olur, öznitelikler camelCase yapılır, style dizeleri nesnelere dönüşür ve etiketler kendi kendine kapanır. Tamamen tarayıcınızda çalışır. Ücretsiz.

Her şey tarayıcınızda çalışır — biçimlendirmeniz cihazınızdan asla ayrılmaz.

snippet.html 
1
Component.jsx 

							

							

								{ }
								JSX'iniz burada görünecek
							

						

					

				

			

		

	


        
                    

		


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

							
HTML to JSX Converter, düz HTML işaretlemesini gerçek zamanlı olarak React'e hazır JSX'e dönüştürür. class'ı className olarak, for'u htmlFor olarak yeniden yazar, tire-ayrılı (kebab-case) ve SVG özniteliklerini camelCase yapar, satır içi style dizelerini JSX style nesnelerine çevirir ve img ile br gibi boş öğeleri kendi kendine kapatır — normalde elle yapacağınız düzenlemelerin aynısı.

							
Bir kod parçası, tam bir sayfa bölümü veya bir tasarım aracından dışa aktarılmış işaretleme yapıştırın; JSX paneli siz yazdıkça sözdizimi vurgulamasıyla güncellenir. İsteğe bağlı bir sarmalayıcı, çıktıyı adlandırılmış bir işlev bileşenine dönüştürür, böylece sonuç bir React projesine daha fazla düzenleme yapmadan doğrudan yerleşir.

							
Dönüştürücü tamamen istemci tarafında çalışan bir HTML to JSX aracıdır: işaretlemeniz tarayıcınızda JavaScript tarafından dönüştürülür ve cihazınızdan asla çıkmaz; bu da onu tescilli şablonlar ve iç sayfalarla kullanmak için güvenli kılar.

					
					
HTML'den JSX'e Dönüştürücü Nasıl Kullanılır

			
    
									
  1. HTML'inizi sol panele yapıştırın veya bir örnek yüklemek için Sample'a tıklayın.
    2. 
									
  2. Siz yazdıkça veya düzenledikçe JSX panelinin anında güncellendiğini izleyin.
    3. 
									
  3. Hazır bir işlev bileşeni istiyorsanız Wrap in a component seçeneğini açın ve bir bileşen adı belirleyin.
    4. 
									
  4. JSX'i almak için Copy'e, Component.jsx olarak kaydetmek için Download'a tıklayın.
    5. 
									
  5. Panelleri sıfırlayıp başka bir kod parçasını dönüştürmek için Clear'ı kullanın.
    6. 
							

		
					
Sıkça sorulan sorular

			

									

						

							
						

						

							
class'ı className, for'u htmlFor olarak yeniden adlandırır, tireli öznitelikleri (SVG öznitelikleri dahil) camelCase yapar, satır içi style dizelerini JSX style nesnelerine çevirir ve img, br ve input gibi boş etiketleri kendi kendine kapatır, böylece çıktı geçerli JSX olur.

						

					

									

						

							
						

						

							
Evet. Wrap in a component seçeneğini etkinleştirip bir bileşen adı seçin; araç, dönüştürülen işaretlemenin etrafına tam bir işlev bileşeni yayınlar; projenize yapıştırmaya veya .jsx dosyası olarak indirmeye hazır.

						

					

									

						

							
						

						

							
Evet. style="margin-top: 10px" gibi bir style özniteliği, her CSS özelliği camelCase yapılmış (satıcı önekli özellikler dahil) style={{marginTop: '10px'}} gibi bir JSX nesnesine dönüşür.

						

					

									

						

							
						

						

							
Hayır. Dönüştürme tamamen tarayıcınızda gerçekleşir, bu yüzden işaretlemeniz cihazınızdan asla çıkmaz. İç şablonları ve yayınlanmamış sayfaları güvenle dönüştürebilirsiniz.

						

					

									

						

							
						

						

							
Evet, tamamen ücretsizdir. Hesap gereksinimi, kredi maliyeti veya dönüştürebileceğiniz kod parçası sayısında bir sınır yoktur.

						

					

							


						
			


	



	
	

		

		

			Paylaş
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
					

	



    
	
	

				
İlgili Araçlar


					

									

						
							
							
								
									JSON'dan Kod Üretici
									
								
								Herhangi bir JSON örneğini TypeScript, Go, Python, Kotlin veya JSON Schema'ya dönüştürün — tür çıkarımı tamamen tarayıcınızda çalışır. Ücretsiz ve gizli.
								
																			Ücretsiz
																	
							
						
					

									

						
							
							
								
									Kod Biçimlendirici
									
								
								HTML, CSS ve JavaScript'i güzelleştirin — dağınık veya küçültülmüş kodun okunabilir hâle gelmesi için girintileri yeniden düzenleyin ve satır sonları ekleyin.
								
																			Ücretsiz
																	
							
						
					

									

						
							
							
								
									cURL'den Kod Dönüştürücü
									
								
								Bir curl komutunu yapıştırın ve fetch, Python requests, PHP, Node axios veya Go için çalışmaya hazır kod alın — tamamen tarayıcınızda ayrıştırılır. Ücretsiz.
								
																			Ücretsiz
																	
							
						
					

									

						
							
							
								
									Kod Görsel Dönüştürücü
									
								
								Bir kod parçacığını paylaşılabilir güzel bir görsele dönüştürün — temalar, arka planlar, pencere çerçevesi ve daha fazlası.
								
																			Ücretsiz
																	
							
						
					

									

						
							
							
								
									Dünya Tarih ve Saat Biçimleri
									
								
								Tarihlerin ve saatlerin dünya genelinde nasıl yazıldığını görün — ülkeleri veya dilleri seçin ve biçimlerini anında karşılaştırın.
								
																			Ücretsiz
																	
							
						
					

									

						
							
							
								
									JSON ↔ YAML
									
								
								JSON'ı YAML'a ve geri dönüştürün; doğrulama dahil.
								
																			Ücretsiz
																	
							
						
					

							

			







		

			

				

					
					

						
Yardıma mı ihtiyacınız var?

						
Bu araçta bir sorun mu buldunuz? Ekibimize bildirin.

					

				

				
					Sorun bildir
				
			

		

	





        

            

                

                    
                

                

                    

                        
Bu ücretsiz aracı kendi web sitenize ekleyin — aşağıdaki kodu kopyalayıp yapıştırın.