Konverter HTML ke JSX

Iklan
Semua alat Gratis

Tempel HTML dan dapatkan React JSX yang rapi — class menjadi className, atribut menjadi camelCase, string style menjadi objek, dan tag menutup sendiri. Berjalan sepenuhnya di browser Anda. Gratis.

Semuanya berjalan di browser Anda — markup Anda tidak pernah meninggalkan perangkat Anda.

snippet.html 
1
Component.jsx 

							

							

								{ }
								JSX Anda akan muncul di sini
							

						

					

				

			

		

	


        
                    

		


					
Tentang Konverter HTML ke JSX

							
HTML to JSX Converter mengubah markup HTML biasa menjadi JSX siap-React secara real time. Alat ini mengganti class menjadi className dan for menjadi htmlFor, mengubah atribut kebab-case dan SVG menjadi camelCase, mengonversi string style inline menjadi objek style JSX, dan menutup sendiri elemen void seperti img dan br — persis penyesuaian yang biasanya Anda lakukan secara manual.

							
Tempel sebuah cuplikan, bagian halaman lengkap, atau markup yang diekspor dari alat desain, dan panel JSX akan diperbarui saat Anda mengetik dengan penyorotan sintaks. Wrapper opsional mengubah output menjadi komponen fungsi bernama, sehingga hasilnya langsung dapat digunakan dalam proyek React tanpa penyuntingan lebih lanjut.

							
Konverter ini sepenuhnya berjalan di sisi klien: markup Anda diubah oleh JavaScript di browser Anda dan tidak pernah meninggalkan perangkat Anda, sehingga aman digunakan dengan template kepemilikan dan halaman internal.

					
					
Cara menggunakan Konverter HTML ke JSX

			
    
									
  1. Tempel HTML Anda ke panel kiri, atau klik Sample untuk memuat contoh.
    2. 
									
  2. Perhatikan panel JSX diperbarui secara instan saat Anda mengetik atau menyunting.
    3. 
									
  3. Aktifkan Wrap in a component dan atur nama komponen jika Anda ingin komponen fungsi siap pakai.
    4. 
									
  4. Klik Copy untuk mengambil JSX, atau Download untuk menyimpannya sebagai Component.jsx.
    5. 
									
  5. Gunakan Clear untuk mengatur ulang kedua panel dan mengonversi cuplikan lain.
    6. 
							

		
					
Pertanyaan yang sering diajukan

			

									

						

							
						

						

							
Alat ini mengganti nama class menjadi className dan for menjadi htmlFor, mengubah atribut bertanda hubung menjadi camelCase (termasuk atribut SVG), mengonversi string style inline menjadi objek style JSX, dan menutup sendiri tag void seperti img, br, dan input, sehingga outputnya adalah JSX yang valid.

						

					

									

						

							
						

						

							
Bisa. Aktifkan Wrap in a component dan pilih nama komponen, dan alat ini menghasilkan komponen fungsi lengkap di sekitar markup yang dikonversi, siap ditempel ke proyek Anda atau diunduh sebagai berkas .jsx.

						

					

									

						

							
						

						

							
Ya. Atribut style seperti style="margin-top: 10px" menjadi objek JSX seperti style={{marginTop: '10px'}}, dengan setiap properti CSS diubah menjadi camelCase, termasuk properti dengan prefiks vendor.

						

					

									

						

							
						

						

							
Tidak. Konversi berjalan sepenuhnya di browser Anda, sehingga markup Anda tidak pernah meninggalkan perangkat Anda. Anda dapat dengan aman mengonversi template internal dan halaman yang belum dirilis.

						

					

									

						

							
						

						

							
Ya, sepenuhnya gratis. Tidak ada persyaratan akun, tidak ada biaya kredit, dan tidak ada batasan berapa banyak cuplikan yang dapat Anda konversi.

						

					

							


						
			


	



	
	

		

		

			Bagikan ini
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
					

	



    
	
	

				
Alat Terkait


					

									

						
							
							
								
									Generator JSON ke Kode
									
								
								Ubah sampel JSON apa pun menjadi TypeScript, Go, Python, Kotlin, atau JSON Schema — inferensi tipe berjalan sepenuhnya di browser Anda. Gratis dan privat.
								
																			Gratis
																	
							
						
					

									

						
							
							
								
									Pemformat Kode
									
								
								Perindah HTML, CSS, dan JavaScript — atur ulang indentasi dan tambahkan pemisah baris agar kode yang berantakan atau diminifikasi mudah dibaca.
								
																			Gratis
																	
							
						
					

									

						
							
							
								
									Konverter cURL ke Kode
									
								
								Tempel perintah curl dan dapatkan kode siap pakai untuk fetch, Python requests, PHP, Node axios, atau Go — diuraikan sepenuhnya di browser Anda. Gratis.
								
																			Gratis
																	
							
						
					

									

						
							
							
								
									Konverter Kode ke Gambar
									
								
								Ubah cuplikan kode menjadi gambar indah yang bisa dibagikan — tema, latar belakang, chrome jendela, dan lainnya.
								
																			Gratis
																	
							
						
					

									

						
							
							
								
									Format Tanggal & Waktu Dunia
									
								
								Lihat cara penulisan tanggal dan waktu di seluruh dunia — pilih negara atau bahasa dan bandingkan formatnya seketika.
								
																			Gratis
																	
							
						
					

									

						
							
							
								
									JSON ↔ YAML
									
								
								Konversi JSON ke YAML dan sebaliknya, dengan validasi.
								
																			Gratis
																	
							
						
					

							

			







		

			

				

					
					

						
Butuh bantuan?

						
Menemukan masalah dengan alat ini? Beri tahu tim kami.

					

				

				
					Laporkan masalah
				
			

		

	





        

            

                

                    
                

                

                    

                        
Tambahkan alat gratis ini ke situs web Anda sendiri — salin dan tempel kode di bawah ini.