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;
Leave a Reply