HTML から React コンポーネントの JavaScript (JSX) を生成する html-to-react-components という npm モジュールを試してみました。

インストール

npm install で普通に。

$ npm install -g html-to-react-components

HTML

Hello World から。

<!-- a.html -->

<div data-component="Greeting">
    Hello, World!
</div>

data-component が肝です。この例の場合 Greeting というコンポーネントが作られます。複数あればそれぞれ JavaScript に変換されます。変換には html2react コマンドを使います。

$ html2react a.html

これで components/Greeting.js というファイルが作られます。

import React from 'react';

const Greeting = React.createClass({
  render() {
    return <div>
        Hello, World!
      </div>;
  }
});

export default Greeting;

ES2015

上の結果だと React.createClass を使った形になっています。 ES2015 の class を使ったコードを生成するには -c es6 オプションを付ければいいみたいです。

$ html2react -c es6 a.html

これで結果が class を使った形になりました。

import React from 'react';

class Greeting extends React.Component {
  render() {
    return <div>
        Hello, World!
      </div>;
  }
}

export default Greeting;

CommonJS

デフォルトだと ES2015 の import export を使いますが -m cjs オプションで CommonJS を使うこともできます。

$ html2react -m cjs a.html
const React = require('react');

const Greeting = React.createClass({
  render() {
    return <div>
        Hello, World!
      </div>;
  }
});

module.exports = Greeting;

出力先を変える

デフォルトで components/コンポーネント名.js というファイルに出力されます。

-o オプションで出力するディレクトリが変更できます。

<!-- b.html -->

<section data-component="Section">
  <header data-component="SectionHeader">header</header>
  <div data-component="SectionBody">body</div>
  <footer data-component="SectionFooter">footer</footer>
</section>
$ html2react -o src b.html
$ ls src
Section.js
SectionHeader.js
SectionBody.js
SectionFooter.js

-o src で出力先が src なっています。

ファイル名をハイフン区切りにするには -d - というオプションでできます。

$ html2react -d - b.html
$ ls components
section-body.js
section-footer.js
section-header.js
section.js

すべて小文字のハイフン区切りになりました。 -d _ だとアンダースコア区切りになります。

拡張子を変えるには -e オプションを使います。

$ html2react -e jsx b.html
$ ls components
section-body.jsx
section-footer.jsx
section-header.jsx
section.jsx

まとめ

html2react コマンドで HTML を React コンポーネント変換しました。

用途として考えられるのはデザインを先に HTML で作った場合や、他のライブラリのためのテンプレートを React 用に変換する場合とかでしょうか。 class 属性を className に書き換えてくれたりもするので手で書き換えをするよりもずっと簡単なはずです。

細かく出力結果を変えられるので、それぞれのプロジェクトの規約に合わせて色々できそうなのもいいです。