Use this HTML to JSX converter tool by pasting or uploading HTML in the left box below. Results will appear in the box on the right. This transforms your HTML into a React class (JSX).
Input (HTML) - Paste your HTML here Converted.
Output (JSX) - The converted JSX Converted.
Converter Options
Create class
Wrap output in React.createClass()
Class Variable Name
Class variable name for the created React class
How to use HTML to JSX Conversion Tool
- Paste your HTML input into the left input box and it will automatically convert it into JSX.
- The JSX output is the box to the right.
- If there are any errors in the HTML and the converter isn't able to do the conversion, the error message will appear in the output box letting you know where the error was found in the HTML.
- Use the control box to select options that will affect the conversion.
- Your HTML data is secure. ConvertSimple's converter does not send your HTML data to our servers for conversion, the process is done completely in your web browser. That's what makes ConvertSimple's converter the safest and fastest converter out there.
HTML Format
Name | HTML |
Full form name | Hypertext Markup Language |
File extension | .htm, .html, .xhtml |
Type of format | Markdown Language |
MIME type | text/html |
JSX Format
Name | JSX |
Full form name | JavaScript XML |
File extension | .jsx |
Type of format | JavaScript Extension Syntax |
MIME type | text/jsx |
A basic Visual Studio Code plugin that converts html text to JSX string
You can select your html text and use the shortcut ctrl+alt+x
There are many things to do
- Add functionality to validate html code
- Add support to format the resulting string
- Add support to convert javascript strings to html code
Change log
$ npm i -g html-to-react-components$ html2react index.html
<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <header class="header" data-component="Header"> <h2 class="heading" data-component="Heading">Hello, world!</h2> </header> </body> </html>// header.js import React from 'react'; import Heading from './heading'; const Header = React.createClass({ render() { return ( <header className="header"> <Heading></Heading> </header> ); } }); export default Header; // heading.js import React from 'react'; const Heading = React.createClass({ render() { return <h2 className="heading">Hello, world!</h2>; } }); export default Heading;
This utility was designed to free React developers from a boring work of translating HTML into React components.
Imagine you just got a pile of HTML from your designers. The first thing you will do is break HTML into React components. This is boring and we can automate this.
HTML components should be annotated with data-component attribute. The value of the attribute is the name of the React component. The structure of HTML is preserved by importing child components and replacing appropriate pieces of HTML with them. As a result you get an entire components tree ready to be rendered.
Read API and CLI build options reference