Μετατροπέας HTML σε JSX
Επικολλήστε HTML και πάρτε καθαρό React JSX — το class γίνεται className, τα attributes γράφονται σε camelCase, τα style strings γίνονται αντικείμενα και τα tags αυτοκλείνουν. Τρέχει εξ ολοκλήρου στον browser σας. Δωρεάν.
Όλα τρέχουν στον browser σας — ο κώδικάς σας δεν φεύγει ποτέ από τη συσκευή σας.
1
Σχετικά με το Μετατροπέας HTML σε JSX
Ο Μετατροπέας HTML σε JSX μετατρέπει απλή σήμανση HTML σε JSX έτοιμη για React σε πραγματικό χρόνο. Μετονομάζει το class σε className και το for σε htmlFor, μετατρέπει σε camelCase τα χαρακτηριστικά με ενωτικά και τα χαρακτηριστικά SVG, μετατρέπει συμβολοσειρές inline style σε αντικείμενα style JSX, και κλείνει αυτόματα κενά στοιχεία όπως img και br — ακριβώς τις επεξεργασίες που θα κάνατε διαφορετικά με το χέρι.
Επικολλήστε ένα απόσπασμα, μια πλήρη ενότητα σελίδας, ή σήμανση που εξήχθη από ένα εργαλείο σχεδίασης, και το πεδίο JSX ενημερώνεται καθώς πληκτρολογείτε, με επισήμανση σύνταξης. Ένα προαιρετικό περιτύλιγμα μετατρέπει την έξοδο σε ονομασμένο συστατικό συνάρτησης, ώστε το αποτέλεσμα να εισάγεται απευθείας σε ένα έργο React χωρίς περαιτέρω επεξεργασία.
Ο μετατροπέας είναι ένα πλήρως πλευράς-πελάτη εργαλείο HTML σε JSX: η σήμανσή σας μετασχηματίζεται από JavaScript στο πρόγραμμα περιήγησής σας και δεν εγκαταλείπει ποτέ τη συσκευή σας, γεγονός που το καθιστά ασφαλές για χρήση με ιδιόκτητα πρότυπα και εσωτερικές σελίδες.
Πώς να χρησιμοποιήσετε το Μετατροπέας HTML σε JSX
- Επικολλήστε την HTML σας στο αριστερό πεδίο, ή κάντε κλικ στο Δείγμα για να φορτωθεί ένα παράδειγμα.
- Παρακολουθήστε το πεδίο JSX να ενημερώνεται ακαριαία καθώς πληκτρολογείτε ή επεξεργάζεστε.
- Ενεργοποιήστε το Περιτύλιγμα σε συστατικό και ορίστε ένα όνομα συστατικού αν θέλετε ένα έτοιμο συστατικό συνάρτησης.
- Κάντε κλικ στο Αντιγραφή για να πάρετε το JSX, ή στο Λήψη για να το αποθηκεύσετε ως Component.jsx.
- Χρησιμοποιήστε το Καθαρισμός για να επαναφέρετε και τα δύο πεδία και να μετατρέψετε ένα άλλο απόσπασμα.