HTML til JSX-konverter

Konvertér HTML til React JSX øjeblikkeligt — className, htmlFor, inline-stilarter og self-closing-tags

Dele:

HTML til JSX-konverter

HTML → JSX
HTML-input
HTML
JSX-output
JSX 

                        

                            

                                
                                
// JSX output appears here

                            

                        

                    

                

            

        



        

            
Hvorfor konvertere HTML til JSX?
            

            
Når du migrerer eksisterende HTML-skabeloner til React, skal du manuelt konvertere class til className, for til htmlFor og inline-stilarter fra strenge til JavaScript-objekter. Vores værktøj automatiserer disse konverteringer øjeblikkeligt og lader dig fokusere på komponentlogik.
            

            

                                    

                        
🔄

                        

                            Attributkonvertering

                        
class→className, for→htmlFor, tabindex→tabIndex, maxlength→maxLength og mere

                    

                                    

                        
🎨

                        

                            Inline-stilobjekt

                        
Konverterer style="color:red;" til style={{color:'red'}} — Reacts JS-objektnotation

                    

                                    

                        
🏷️

                        

                            Self-closing-tags

                        
Tilføjer afsluttende skråstreg til tomme elementer: <br> → <br />, <input> → <input />

                    

                            

        

        

            

                Konvertér HTML til JSX i 3 trin

            

                                    

                        

                            1

                        

                            Indsæt HTML

                        

                            Indsæt HTML-skabelon, Figma-eksport eller HTML-kodestykke i det venstre panel

                    

                                    

                        

                            2

                        

                            Automatisk konvertering

                        

                            Konverteren omdanner alle attributter, stilarter og tomme elementer til JSX-syntaks øjeblikkeligt

                    

                                    

                        

                            3

                        

                            Kopiér JSX

                        

                            Kopiér den konverterede JSX og indsæt den i din React-komponents render/return-blok

                    

                            

        

        

            
Anvendelsestilfælde for HTML til JSX-konverteren
            

            

                                                        

                        
🚀

                        

                            
Migration til React

                            
Migrér eksisterende HTML-sider eller -skabeloner til React-komponenter uden manuel attributkonvertering

                        

                    

                                                        

                        
🅱️

                        

                            
Bootstrap i React

                            
Konvertér Bootstrap HTML-komponenter til JSX til brug med react-bootstrap

                        

                    

                                                        

                        
📧

                        

                            
E-mailskabeloner

                            
Konvertér HTML-e-mailskabeloner til JSX til rendering med React Email

                        

                    

                                                        

                        
📝

                        

                            
Fra CMS til React

                            
Konvertér WordPress eller traditionelle CMS HTML-skabeloner til React-komponentstruktur

                        

                    

                            

        

        

            
Tips til HTML til JSX-konvertering
            

            

                                                        

                        
✓ class → className er vigtigt

                        
class er et reserveret JavaScript-nøgleord. I React skal className bruges til CSS-klasser.

                    

                                                        

                        
✓ labels for → htmlFor

                        
Attributten for på <label> bliver htmlFor i JSX. At glemme dette bryder tilgængelighed.

                    

                                                        

                        
✓ Opdatér hændelseshandlere efter konvertering

                        
HTML-attribut onclick='...' konverteres ikke automatisk i JSX. Erstat inline-hændelseshandlere manuelt med Reacts onClick={handler}-mønster.

                    

                                                        

                        
✓ HTML-kommentarer bliver JSX-kommentarer

                        
<!-- kommentar --> konverteres til {/* kommentar */} i JSX.

                    

                            

        

        

            

                ❓ Ofte stillede spørgsmål

            

                                                            

                            
Hvorfor bruger React className i stedet for class?

                            
class er et reserveret JavaScript-nøgleord (bruges til ES6-klasser). Da JSX er JavaScript, skaber class en syntakskonflikt. React valgte className for at undgå tvetydighed.

                        

                                                                                                                    

                            
Håndterer dette værktøj React-hændelseshandlere?

                            
Nej — HTML-hændelseshandlere onclick, onsubmit osv. konverteres ikke automatisk til Reacts onClick, onSubmit. Manuel opdatering er nødvendig.

                        

                                                                                                                    

                            
Hvad er forskellen mellem HTML og JSX?

                            
JSX er en JavaScript-syntaksudvidelse der ligner HTML og kompileres til React.createElement()-kald. Vigtige forskelle: alle attributter i camelCase, class→className, for→htmlFor, tomme elementer kræver self-closing, udtryk bruger {} i stedet for strenge.

                        

                                                                                                                    

                            
Hvorfor kræver tomme elementer self-closing i JSX?

                            
JSX parses af Babel som XML-lignende syntaks og kræver korrekt lukning af alle elementer. Tomme elementer som <br>, <img>, <input> har ingen børn og kræver /> self-closing.