在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:roman01la/html-to-react-components开源软件地址:https://github.com/roman01la/html-to-react-components开源编程语言:JavaScript 96.9%开源软件介绍:Extract annotated portions of HTML into React components as separate modules. 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. Try in online REPL Contents
When to use itThis utility was designed to free React developers from a boring task of translating HTML into 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 should be automated! Installation
UsageHTML element with Additionally specify which HTML attributes should be exposed as React props using <input public:type="text" id="input" data-component="Input" /> // at usage place
<Input type="text" />;
// ----^^^^^^^^^^^
// in component's module
class Input extends React.Component {
render() {
const { type } = this.props; // <----
return <input type={type} id="input" />;
// -----------^^^^^^^^^^^
}
} See and run CLI
You can also use any glob pattern to recursively generate the corresponding react file. Just make sure to use double quotes when specifying the pattern:
OptionscomponentType, --component, -cType of generated React components. Values:
moduleType, --module, -mType of generated JavaScript modules. Values:
moduleFileNameDelimiter, --delimiter, -dDelimiter character to be used in modules filename. If you don't specify a delimiter, or pass -d without a value, then the component name in the HTML will be used unchanged as the filename. If you do specify a delimiter character, then the module name is broken into words, joined with the delimiter and lower-cased. outputConfiguration options for output to file system. path, --out, -oOutput directory path. Default is fileExtension, --ext, -eOutput files extension. Default value is Node.js APIconst extractReactComponents = require("html-to-react-components");
extractReactComponents(
`<!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>
<nav class="nav" data-component="Nav">
<ul class="list">
<li class="list-item" data-component="ListItem">#1</li>
<li class="list-item" data-component="ListItem">#2</li>
</ul>
</nav>
</header>
</body>
</html>
`,
{
componentType: "stateless",
moduleType: false
}
);
/*
{ Header: 'const Header = () => <header className="header">\n\n <Heading></Heading>\n\n <Nav></Nav>\n\n </header>;',
Heading: 'const Heading = () => <h1 className="heading">Hello, world!</h1>;',
Nav: 'const Nav = () => <nav className="nav">\n <ul className="list">\n <ListItem></ListItem>\n <ListItem></ListItem>\n </ul>\n </nav>;',
ListItem: 'const ListItem = () => <li className="list-item">#2</li>;' }
*/ Building for browserWhen building for in-browser usage an env variable Example of defining a var in Webpack config: plugins: [
new webpack.DefinePlugin({
IN_BROWSER: JSON.stringify(true),
}),
], ResourcesA quick video demo on converting a simple HTML page into React components and rendering them into the same looking UI. Annotating HTML in the editor is not the best experience, because you cannot see rendered UI itself. It's possible to annotate HTML using DevTools. Be aware that you'll have to spend time on copying and pasting markup from DevTools into files which will be processed. Ecosystem
ContributingIf you spotted a bug, please, submit a pull request with a bug fix. If you would like to add a feature or change existing behaviour, open an issue and tell about what exactly you want to change/add. LicenseMIT |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论