Convertitore da HTML a JSX

Pubblicità
Tutti gli strumenti Gratuito

Incolla l'HTML e ottieni JSX React pulito — class diventa className, gli attributi sono in camelCase, le stringhe di stile diventano oggetti e i tag si auto-chiudono. Funziona interamente nel tuo browser. Gratis.

Tutto funziona nel tuo browser — il tuo markup non lascia mai il tuo dispositivo.

snippet.html 
1
Component.jsx 

							

							

								{ }
								Il tuo JSX apparirà qui
							

						

					

				

			

		

	


        
                    

		


					
Informazioni su Convertitore da HTML a JSX

							
Il Convertitore da HTML a JSX trasforma markup HTML semplice in JSX pronto per React in tempo reale. Riscrive class in className e for in htmlFor, converte in camelCase gli attributi kebab-case e SVG, trasforma le stringhe di stile inline in oggetti style JSX, e auto-chiude elementi vuoti come img e br: esattamente le modifiche che altrimenti faresti a mano.

							
Incolla uno snippet, una sezione di pagina completa o markup esportato da uno strumento di design, e il riquadro JSX si aggiorna mentre digiti con evidenziazione della sintassi. Un wrapper opzionale trasforma l'output in un componente funzione con nome, così il risultato si inserisce direttamente in un progetto React senza ulteriori modifiche.

							
Il convertitore è uno strumento HTML to JSX interamente lato client: il tuo markup viene trasformato da JavaScript nel tuo browser e non lascia mai il tuo dispositivo, il che lo rende sicuro da usare con template proprietari e pagine interne.

					
					
Come usare Convertitore da HTML a JSX

			
    
									
  1. Incolla il tuo HTML nel riquadro sinistro, oppure clicca Esempio per caricare un campione.
    2. 
									
  2. Osserva il riquadro JSX aggiornarsi istantaneamente mentre digiti o modifichi.
    3. 
									
  3. Attiva Avvolgi in un componente e imposta un nome componente se vuoi un componente funzione già pronto.
    4. 
									
  4. Clicca Copia per prendere il JSX, oppure Scarica per salvarlo come Component.jsx.
    5. 
									
  5. Usa Cancella per azzerare entrambi i riquadri e convertire un altro snippet.
    6. 
							

		
					
Domande frequenti

			

									

						

							
						

						

							
Rinomina class in className e for in htmlFor, converte in camelCase gli attributi con trattini (inclusi gli attributi SVG), trasforma le stringhe di stile inline in oggetti style JSX, e auto-chiude tag vuoti come img, br e input, così l'output è JSX valido.

						

					

									

						

							
						

						

							
Sì. Attiva Avvolgi in un componente e scegli un nome componente, e lo strumento genera un componente funzione completo attorno al markup convertito, pronto da incollare nel tuo progetto o da scaricare come file .jsx.

						

					

									

						

							
						

						

							
Sì. Un attributo style come style="margin-top: 10px" diventa un oggetto JSX come style={{marginTop: '10px'}}, con ogni proprietà CSS convertita in camelCase, incluse le proprietà con prefisso vendor.

						

					

									

						

							
						

						

							
No. La conversione avviene interamente nel tuo browser, quindi il tuo markup non lascia mai il tuo dispositivo. Puoi convertire in sicurezza template interni e pagine non ancora pubblicate.

						

					

									

						

							
						

						

							
Sì, è completamente gratuito. Non richiede account, non ha costo in crediti e non ha limiti al numero di snippet che converti.

						

					

							


						
			


	



	
	

		

		

			Condividi
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
					

	



    
	
	

				
Strumenti correlati


					

									

						
							
							
								
									Generatore da JSON a Codice
									
								
								Trasforma qualsiasi esempio JSON in TypeScript, Go, Python, Kotlin o JSON Schema — l'inferenza dei tipi avviene interamente nel browser. Gratis e privato.
								
																			Gratuito
																	
							
						
					

									

						
							
							
								
									Formattatore di codice
									
								
								Abbellisci HTML, CSS e JavaScript — re-indenta e aggiunge a capo per rendere leggibile il codice disordinato o minificato.
								
																			Gratuito
																	
							
						
					

									

						
							
							
								
									Convertitore da cURL a Codice
									
								
								Incolla un comando curl e ottieni codice pronto all'uso per fetch, Python requests, PHP, Node axios o Go — analizzato interamente nel browser. Gratis.
								
																			Gratuito
																	
							
						
					

									

						
							
							
								
									Convertitore di codice in immagine
									
								
								Trasforma uno snippet di codice in una bella immagine condivisibile — temi, sfondi, chrome della finestra e altro ancora.
								
																			Gratuito
																	
							
						
					

									

						
							
							
								
									Formati data e ora nel mondo
									
								
								Guarda come vengono scritte date e ore in tutto il mondo — scegli paesi o lingue e confronta i formati istantaneamente.
								
																			Gratuito
																	
							
						
					

									

						
							
							
								
									JSON ↔ YAML
									
								
								Converti JSON in YAML e viceversa, con validazione.
								
																			Gratuito
																	
							
						
					

							

			







		

			

				

					
					

						
Hai bisogno di aiuto?

						
Hai riscontrato un problema con questo strumento? Faccelo sapere.

					

				

				
					Segnala un problema
				
			

		

	





        

            

                

                    
                

                

                    

                        
Aggiungi questo strumento gratuito al tuo sito web — copia e incolla il codice qui sotto.