TutorialWeb Tips and Tricks

Easiest Way To Convert HTML Pages Into React Components

HTML to React Converting Tool

Web Hosting Sale

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

$ 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;
Tags
Show More

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close

Adblock Detected

Please consider supporting us by disabling your ad blocker