Převodník HTML na JSX

Okamžitě převádějte HTML na React JSX — className, htmlFor, inline styly a self-closing značky

Podíl:

Převodník HTML na JSX

HTML → JSX
HTML vstup
HTML
JSX výstup
JSX 

                        

                            

                                
                                
// JSX output appears here

                            

                        

                    

                

            

        



        

            
Proč převádět HTML na JSX?
            

            
Při migraci existujících HTML šablon do Reactu musíte ručně převádět class na className, for na htmlFor a inline styly z řetězců na JavaScript objekty. Tento nástroj automatizuje tyto konverze okamžitě a umožňuje vám soustředit se na logiku komponent.
            

            

                                    

                        
🔄

                        

                            Převod atributů

                        
class→className, for→htmlFor, tabindex→tabIndex, maxlength→maxLength a další

                    

                                    

                        
🎨

                        

                            Objekt inline stylů

                        
Převádí style="color:red;" na style={{color:'red'}} — JSX JS objektová notace Reactu

                    

                                    

                        
🏷️

                        

                            Self-closing značky

                        
Přidá uzavírací lomítko k prázdným prvkům: <br> → <br />, <input> → <input />

                    

                            

        

        

            

                Převod HTML na JSX ve 3 krocích

            

                                    

                        

                            1

                        

                            Vložte HTML

                        

                            Vložte HTML šablonu, Figma export nebo HTML kódový úryvek do levého panelu

                    

                                    

                        

                            2

                        

                            Automatická konverze

                        

                            Převodník okamžitě transformuje všechny atributy, styly a prázdné prvky na syntaxi JSX

                    

                                    

                        

                            3

                        

                            Zkopírujte JSX

                        

                            Zkopírujte převedené JSX a vložte ho do bloku render/return komponenty React

                    

                            

        

        

            
Případy použití převodníku HTML na JSX
            

            

                                                        

                        
🚀

                        

                            
Migrace do Reactu

                            
Migrujte existující HTML stránky nebo šablony do React komponent bez ruční konverze atributů

                        

                    

                                                        

                        
🅱️

                        

                            
Bootstrap v Reactu

                            
Převádějte Bootstrap HTML komponenty na JSX pro použití s react-bootstrap

                        

                    

                                                        

                        
📧

                        

                            
E-mailové šablony

                            
Převádějte HTML e-mailové šablony na JSX pro renderování s React Email

                        

                    

                                                        

                        
📝

                        

                            
Z CMS do Reactu

                            
Převádějte WordPress nebo tradiční CMS HTML šablony do struktury React komponent

                        

                    

                            

        

        

            
Tipy pro převod HTML na JSX
            

            

                                                        

                        
✓ class → className je důležité

                        
class je rezervované klíčové slovo JavaScriptu. V Reactu musí být className použito pro CSS třídy.

                    

                                                        

                        
✓ for v label → htmlFor

                        
Atribut for na <label> se v JSX stane htmlFor. Zapomenutí na to narušuje přístupnost.

                    

                                                        

                        
✓ Aktualizujte obslužné rutiny událostí po konverzi

                        
HTML atribut onclick='...' se v JSX automaticky nepřevede. Ručně nahraďte inline obslužné rutiny vzorem Reactu onClick={handler}.

                    

                                                        

                        
✓ HTML komentáře se stávají JSX komentáři

                        
<!-- komentář --> se v JSX převede na {/* komentář */}.

                    

                            

        

        

            

                ❓ Nejčastější dotazy

            

                                                            

                            
Proč React používá className místo class?

                            
class je rezervované klíčové slovo JavaScriptu (používané pro ES6 třídy). Protože JSX je JavaScript, class způsobuje syntaktický konflikt. React zvolil className pro vyhnutí se nejasnostem.

                        

                                                                                                                    

                            
Zpracovává tento nástroj obslužné rutiny událostí Reactu?

                            
Ne — HTML obslužné rutiny onclick, onsubmit atd. se automaticky nepřevádějí na onClick, onSubmit Reactu. Je nutná ruční aktualizace.

                        

                                                                                                                    

                            
Jaký je rozdíl mezi HTML a JSX?

                            
JSX je syntaktické rozšíření JavaScriptu podobné HTML kompilované na volání React.createElement(). Klíčové rozdíly: všechny atributy v camelCase, class→className, for→htmlFor, prázdné prvky vyžadují self-closing, výrazy používají {}.

                        

                                                                                                                    

                            
Proč prázdné prvky v JSX vyžadují self-closing?

                            
JSX is analyzován Babelem jako syntaxe podobná XML a vyžaduje správné uzavření všech prvků. Prázdné prvky jako <br>, <img>, <input> nemají děti a vyžadují /> self-closing.