1.0.1 • Published 8 years ago
html2jsx-loader v1.0.1
html2jsx-loader
Webpack loader module that exports HTML as React JSX class. I created this loader to help webmasters work with layouts in friendly html environment. HTML can be then just copied by front-end developer to proper component or container for further development.
Usage
Installation
npm i html2jsx-loader
Examples
Add the html2jsx-loader to your Webpack configuration:
{
resolve: {
extensions: ['','.js','.html']
}
...
module: {
loaders: [{
test: /.html$/
, loader: 'babel!htmltojsx'
}
]}
...
}
Now you can write raw HTML (e.g. Layout1.html) and webpack will automatically convert the content of this file to a React component.
Finally, you can reference this component in your JavaScript code as follows:
const Layout1 = require('./Layout1');
const Layout2 = require('./Layout2');
//Layout1 is not HTML but ReactJS class.
const routes = (
<Route path="/" component={RootLayout}>
<Route path = "layout1" component = {Layout1} />
<Route path = "layout2" component = {Layout2} />
...