Render ES6 React components as hexo templates
$ npm install hexo-renderer-react react react-dom --saveThis requires you to have react installed as well.
- Name your components with the
.jsxextension export defaultormodule.exports =your component class- ES6/7 syntax and JSX is handled by
babelVersion 6.babelrcConfig file preset requirements:
layout.jsx
import React from 'react';
export default class extends React.Component {
render() {
return (
<html>
<head>
<title>{this.props.page.title}</title>
</head>
<body>
<main dangerouslySetInnerHTML={{__html: this.props.page.body}} />
</body>
</html>
);
}
}post.jsx
import React from 'react';
export default class extends React.Component {
render() {
return (
<div>
<h3>POST: {this.props.page.title}</h3>
<div>{this.props.page.date.toString()}</div>
</div>
)
}
}This software is free to use under the MIT license. See the LICENSE-MIT file for license text and copyright information.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent