Μετατροπέας HTML σε JSX

Αμετάκλητα ταχύτερη μετατροπή HTML σε έτοιμο (React) JSX κώδικα — ClassNames, Attributes (Idiomatic JSX) & Self-Closing ετικέτες!

Κοινοποίηση:

Μετατροπέας HTML > JSX

HTML → JSX
Είσοδος Κώδικα (HTML)
HTML
Έξοδος Αποτελέσματος (JSX)
JSX 

                        

                            

                                
                                
// JSX output appears here

                            

                        

                    

                

            

        



        

            
Ο Λόγος που Επιβάλλεται η μετατροπή του HTML σε JSX;
            

            
Oταν μεταφέρετε (Migrate) ιστοσελίδες HTML — ή (Exports) απο σχεδιαστικά εργαλεία όπως το Figma— σε React Components, η ΜΗ ΑΥΤΟΜΑΤΗ Μετατροπή ειναι κόλαση. Πρέπει να αλλάξετε με το χέρι ΤΑ ΠΑΝΤΑ: Τα `class` σε `className`, το `for` σε `htmlFor`, και (Το χειρότερο) να φτιάξετε Όλα τα `style="..."` attributes σε  JavaScript { Objects }. Ο Μετατροπέας μας Tα ΚΑΝΕΙ ΟΛΑ ΜΟΝΟΣ ΤΟΥ.. ακαριαία!  Εσείς επικεντρώνεστε μόνο.. στη Λογική (Hooks & States)!
            

            

                                    

                        
🔄

                        

                            Σχολιαστική Μετατροπή - (CamelCase) Χαρακτηριστικών

                        
Μετατρέπει τα (class—>className), (for—>htmlFor), (tabindex—>tabIndex), (maxlength—>maxLength), ώστε o Server Rendering / React Να μην 'Ουρλιάζει' (Warnings).

                    

                                    

                        
🎨

                        

                            Inline Styles Objects (Tέλος οι Συμβολοσειρές)

                        
Μαγικά μεταφράζει το: `style="color:red; margin-top:10px"` — σε  `style={{color:'red', marginTop: '10px'}}` (Μορφή React Native/JS Object).

                    

                                    

                        
🏷️

                        

                            Αυτόματο (Closing) κλείσιμο Void/Κενών Tags

                        
Το JSX είναι σαν το (XML) ! Διαλύεται αν δεν κλείσουν τα ετικετάκια. Ο Αλγόριθμος κλείνει τα (`<br>`, `<img src=>`, `<input>`) σε..  ( `<br />` ) ! 

                    

                            

        

        

            

                Μετατρέψτε εκατοντάδες γραμμές HTML .. Σε 3 Bήματα!

            

                                    

                        

                            1

                        

                            Επικολλήστε Οποιονδήποτε HTML Κώδικα

                        

                            Αντιγράψτε τον HTML κώδικα από το Webflow, Bootstrap, figma export ή WordPress κι επικολλήστε τον άφοβα.

                    

                                    

                        

                            2

                        

                            Mετατροπή (Auto-Magic) Conversion

                        

                            Ο Μετατροπέας διαβάζει τα Nodes (DOM) και ακαριαία αλλάζει τα attributes, τα σχόλια(comments) και τα Inline styles.

                    

                                    

                        

                            3

                        

                            Αντιγραφή -> (React Component)

                        

                            Έτοιμο! Πατήστε Copy(Αντιγραφή). Τώρα μπορείτε να το πετάξετε στο (Return ()) // Μεσα στην Function (Render) του Component Σας.

                    

                            

        

        

            
Κλασσικές περιπτώσεις Πού απαιτείται JSX-Converter
            

            

                                                        

                        
🚀

                        

                            
Μετάβαση-Migaration Σε React / Next.js

                            
Aναβάθμιση ενός παλιού (Legacy/Jquery) Ιστότοπου... Κομμάτι-Κομμάτι- Σε νέα React Components.

                        

                    

                                                        

                        
🅱️

                        

                            
Εισαγωγή Bootstrap / Tailwind / UI Frameworks

                            
Επειδή τα ελεύθερα Snippets (Πχ του TailwindUi) Είναι σε HTML.. θέλουν 1 πέρασμα απο εδώ.. πριν μπουν στo React-app σας.

                        

                    

                                                        

                        
📧

                        

                            
React-Email / JSX Templates

                            
Όταν φτιάχνετε HTML Emails Newsletter, μπορείτε να μετατρεψετε Παραδοσιακά Tables(HMTL) σε JSX δομές για χρήση με Vercel/React-emails.

                        

                    

                                                        

                        
📝

                        

                            
Αποσύνδεση του CMS (Headless / WordPress To Front)

                            
Μεταφέρετε Σκηνικά/Σχεδιαστικά κομμάτια (Themes) απο κλασικά CMS Blocks -- Σε καθαρά (FrontEnd) Headless περιβάλλοντα (Gatsby/Next.js).

                        

                    

                            

        

        

            
React / (HTML vs JSX) ... Τα Κρυφά Μυστικά
            

            

                                                        

                        
✓ Το Μεγάλο Δράμα.. (class => className)!

                        
Δέκα (10) Γλωσσολογικά χρόνια πίσω: Το 'class', αποτελεί ΔΕΣΜΕΥΜΕΝΗ Λέξη στην ιδρυματική Javascript ! ((Για Class/OOO Programing!)). Γι' αυτό το React.. αποφάσισε να χρησιμοποιήσει το `className` - ως Λύση!

                    

                                                        

                        
✓ Form Labels.. (for => htmlFor)

                        
Όπως και με το 'class', το άμοιρο 'for' ειναι συνδεδεμένο με τη... Λούπα `for (let i=0) ` ... Ετσι για να λειτουργούν τα checkbox/Forms (Accessibility), απαιτείται να μετατραπεί σε `htmlFor=`!

                    

                                                        

                        
✓ Τα Inline Event Handlers -(OnClicks) Μεταφράζονται ... Χειροκίνητα !

                        
Εάν το HTML σας είχε `onclick="RunMyApp()"` .. Ο Converter μας (επίτηδες) δεν το αλλάζει ριζικά. Εσείς ΠΡΕΠΕΙ να καλέσετε την λειτουργία ΩΣ Function pointer (Π.χ. `onClick={() => setMyApp()}`).

                    

                                                        

                        
✓ Tα Σχόλια/Comments του HTML... Μετατρέπονται σε JS-JSX Μπλοκ!

                        
Τα Σημάδια `<!-- Auto σχόλιο -->` Στο JSX μετατρέπονται πάντα: Σε { /* Σχόλιο */ } Διαφορετικά... Θα φαινόντουσαν στον Χρήστη !

                    

                            

        

        

            

                ❓  Απορίες.. για (React.js Components)

            

                                                            

                            
Τι στο καλό είναι Τελικά το JSX; 

                            
Το JSX(JavaScript XML) - Είναι μία ('Tροποποιημένη - Εξωτική Συντακτική γλώσσα') του React! Μασκαρεύει την JavaScript ώστε.. Να Την Πληκτρολογείτε σαν (HTML). Αφού 'κάνετε Build', το (Babel / WebPack) Μετατρέπει ολα όσα γράψατε(<img> / <div>) .. ΣΕ καθαρές Javascript Functions: `React.createElement('div', { className: 'my-div'})` !

                        

                                                                                                                    

                            
Εκτός από το Class Name... υπάρχουν και αλλά Attributes Που ΑΛΛΑΖΟΥΝ ΟΝΟΜΑ;

                            
ΝΑΙ! Στο React-JSX όλα τα Attributes πρέπει πλέον να γράφονται Χωρίς-Παύλες Και με (CamelCase). Π.χ το `tabindex` => Γίνεται `tabIndex`. Το `stroke-width` (Στα SVG) => Γίνεται `strokeWidth`. O Converter μας, αλλάζει/διορθώνει (εκατοντάδες) απο αυτά τα κρυμμένα attributes!

                        

                                                                                                                    

                            
Κάποιες φορές το React χτυπάει σφάλμα (Adjacent JSX elements must be wrapped)... Τι φταίει;

                            
Το React απαιτεί Αυστηρά! -> ΚΑΘΕ Function (Return ())... Να επιστρέφει -ΜΟΝΟ ΕΝΑ- Kεντρικό-Tοp-Level Element (Γονέα/Πατέρα). Αν ο Converter σας επιστρέψει 2 Κουτιά <div> Ανεξάρτητα: Θελουν τύλιγμα! ΛΥΣΗ: Τυλίξτε τα με το Fragments `<>  ..τα div σας..  </>` (Άδειο Element-Δε φαινεται πουθενά στο HTML).

                        

                                                                                                                    

                            
Γιατί να μην βάλω 'class=' στο React μου.. Σιγά το πράγμα.. Διορθώνεται μόνο του πίσω-πίσω!

                            
Λειτουργικά ; Ναι, το React (στα μοντέρνα του Versions) ειναι αρκετά έξυπνο ώστε να το τρέξει (Compile) και να προσπαθήσει να το κάνει 'Fix' ! Όμως, Βομβαρδίζει το Console/Terminals σας.. με (Κόκκινα Red Error / Warnings) !! Δεν επιτρέπετε ΠΟΤΕ να βγαίνει (Warning/Error) σε Professional Παραγωγικό Κώδικα.