Конвертор HTML во JSX

Како да го користите конверторот HTML во JSX

Залепете го вашиот HTML код во полето за внесување и кликнете Конвертирај во JSX. Алатката го трансформира вашиот HTML во валиден JSX со конвертирање на атрибутите, затворање на void елементите, трансформирање на inline стиловите и обработка на коментарите. Панелот за статистика го прикажува бројот на направени промени како и должините во знаци на влезот и излезот. Користете го копчето Копирај за да го копирате JSX излезот директно во вашата React компонентна датотека.

Оваа алатка е суштинска за React програмерите кои мигрираат постоечки HTML шаблони во React компоненти, копираат HTML фрагменти од дизајнерски алатки или конвертираат статички HTML прототипови во динамични React апликации. Наместо рачно менување на секој атрибут и елемент, конверторот автоматски ги обработува сите трансформации со еден клик.

Разбирање на JSX и React компоненти

JSX е синтаксата која го прави React развојот продуктивен. Ви овозможува да пишувате код за кориснички интерфејс кој личи на HTML но всушност е JavaScript. Кога пишувате <div className="container"> во JSX, React build алатката го трансформира во повик на функција React.createElement('div', {className: 'container'}). Ова значи дека JSX ги следи правилата на JavaScript, не на HTML, затоа некои атрибути и шаблони мора да се променат.

Најважната разлика е тоа што JSX ги користи конвенциите за именување на JavaScript за атрибутите. Бидејќи class и for се резервирани зборови во JavaScript, тие стануваат соодветно className и htmlFor. Сите атрибути за обработувачи на настани користат camelCase: onclick станува onClick, onchange станува onChange, и onsubmit станува onSubmit. Овие промени на именување се конзистентни и предвидливи.

Правила за конверзија на атрибути

Покрај class и for, неколку други HTML атрибути имаат различни имиња во JSX. Атрибутот tabindex станува tabIndex. Атрибутите colspan и rowspan стануваат colSpan и rowSpan. Атрибутот crossorigin станува crossOrigin. Буловите атрибути како checked, disabled и readonly функционираат исто, но readonly станува readOnly во JSX. data атрибутите (data-*) и ARIA атрибутите (aria-*) се исклучоци и остануваат непроменети во JSX.

Трансформација на inline стилови

HTML inline стиловите користат CSS стринг: style="color: red; font-size: 16px; background-color: blue". JSX бара JavaScript објект со имиња на својства во camelCase: style={{color: 'red', fontSize: '16px', backgroundColor: 'blue'}}. Конверторот автоматски ја обработува оваа трансформација, конвертирајќи ги CSS својствата со цртички во camelCase и обвивајќи ги вредностите во JavaScript објектен литерал. Нумеричките вредности за својства базирани на пиксели можат да ја изостават единицата 'px' во JSX.

Самозатворачки елементи

HTML дозволува void елементите како <img>, <br>, <hr> и <input> да бидат напишани без затворачка коса црта. JSX бара сите елементи да бидат експлицитно затворени, или со затворачки таг или со самозатворачка коса црта. Конверторот се грижи сите void елементи да бидат правилно самозатворени: <img> станува <img />, <br> станува <br />, итн. Ова е задолжително во JSX и ќе предизвика грешка при компилација ако се изостави.

Често поставувани прашања

Што е JSX?

JSX е синтаксно проширување на JavaScript кое се користи во React и ви овозможува да пишувате код сличен на HTML во JavaScript датотеки. Користи атрибути во camelCase и бара затворање на сите елементи.

Зошто да конвертирам HTML во JSX?

HTML и JSX имаат суптилни но важни разлики во имињата на атрибутите, синтаксата на стиловите, затворањето на елементите и коментарите. Рачната конверзија е досадна и подложна на грешки.

Кои атрибути се менуваат?

class станува className, for станува htmlFor, tabindex станува tabIndex, обработувачите на настани преминуваат во camelCase, и readonly станува readOnly. data и ARIA атрибутите остануваат непроменети.

Како се обработуваат стиловите?

CSS стринговите стануваат JavaScript објекти со својства во camelCase. "font-size: 16px" станува {fontSize: '16px'}.

Дали алатката ги обработува коментарите?

Да. HTML коментарите <!-- коментар --> стануваат JSX коментари {/* коментар */} обвиени во витичасти загради со синтакса за блок коментар.