Convert HTML to React components

$ 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">
    <h1 class="heading" data-component="Heading">Hello, world!</h1>
  </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 <h1 className="heading">Hello, world!</h1>;
  }
});

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