Конвертируйте JSX в HTML
Tool guide
The reverse trip comes up less often but regularly: a chunk of JSX has to go to a markup designer, into an email, into a Django template or onto a static landing page with no React on it. A fragment copied straight from a component will not work there — the browser ignores className and never applies style={{}}. Paste it into JSX Input, press Convert, and HTML Output gives you plain markup with class and a string style. See also: turn plain markup into JSX for a React component, strip the tags down to plain text, unescape HTML entities back to characters.
No. These are text replacements, not a React build, so {user.name}, {items.map(...)} and ternaries survive into the output and break the markup. Substitute real values before converting, or delete the logic and keep only the static part of the fragment.
They come through unchanged, slash included. Browsers are fine with that — is valid HTML5 and parses as an ordinary br. If your linter or email templating engine demands the strict form, remove the slashes with a find-and-replace.
{/* … */} is the JSX way of writing a comment and has no meaning in HTML, so those blocks are stripped. If the note matters to whoever picks up the markup, add it back afterwards in the usual form.
Not always. React appends px to bare numbers, but here the value is copied literally, so style={{width: 200}} yields width:200 with no unit and the browser drops the rule. Write units explicitly in the source JSX, or add them to the resulting style string.
Direction and purpose. That page is for markup moving into a React project; this one is for showing a React fragment somewhere React does not run — an email, a static page, a server-side template. Going back always loses the dynamic parts: props, handlers and every braced expression.
No, a script on your own tab performs every replacement, the field contents are never transmitted, and nothing survives a reload. That is also why the converter keeps working with the network off once the page is open.
Before: Buy
After: Buy
Before: {/* draft */}Offer terms After: Offer terms
Your rating and feedback help decide what to improve next.