Reacterminator converts html into es6 react components.
To get started, annotate your html tags with several simple data attributes that reacterminator recognizes.
For example, you can add a data-component-name attribute to your html to let
reacterminator know that it is a react component:
// file: example.html
<body>
<div data-component-name="Unicorn"></div>
</body>
Then let reacterminator do the work:
$ reacterminator convert example.html
A file named 'Unicorn.jsx' will be generated at './components/Unicorn.jsx' with the following content:
import React from 'react';
export default class Unicorn extends React.Component {
render() {
return (
<div/>
);
}
}
Please check the kitchen sink test for a comprehensive example of what reacterminator is capable of.
npm i -g reacterminator
You can use reacterminator or rt for short.
Usage: reacterminator [options] [command]
Commands:
convert|c <path> convert html files into react component files.
generate|g <path> generate custom files.
help [cmd] display help for [cmd]
Convert html files to react components
Options:
-h, --help output usage information
-V, --version output the version number
Examples:
$ reacterminator c design.html
$ reacterminator c design/
$ reacterminator g components/MyCustom
Notes:
If the input is a folder, files ending with -ignore.html will be ignored.
/**
* convert html to react components
*
* @param {Object} input
* {('path'|'string')} input.type
* {string} input.content
* When input.type is 'string', input.content is the html content.
* When input.type is 'path', input.content specifies the path.
* The path can be a directory or a file.
*
* @param {Object} options
* {boolean} [options.generateFiles=false]
* {string} [options.outputPath='./components']
* {boolean} [options.recursive=false]
* When options.recursive is true, reacterminator will find .html files recursivly
* and convert them into react components.
* When false, reacterminator will only find the .html files
* in the current directory.
**/
var reacterminator = require('reacterminator');
var components = reacterminator(
{
type: 'string',
content: '<div data-component-name="Unicorn""></div>'
},
{
generatefiles: false,
}
);
console.log(components.Unicorn.formattedFileSnippet)
// import React from 'react';
//
// export default class Unicorn extends React.Component {
// render() {
// return (
// <div/>
// );
// }
// }
- write spec in read me
- write tests
- implementation ( please practic TDD by
npm run test:watch:mocha) - ensure the following before you do a PR (
npm test)- linting pass
- tests pass
- 100% coverage
- install correct node version
nvm install # .nvmrc is used to specify node version
nvm use
- make sure you can run this command:
npm run test
// Coverall will give you an error since your local is not a travis-ci environment.
// That is OK.