vanwagonet / hexo-renderer-react

React+babel renderer plugin for Hexo

MIT License

40 stars 8 forks source link

readme

hexo-renderer-react

Render ES6 React components as hexo templates

Install

$ npm install hexo-renderer-react react react-dom --save

This requires you to have react installed as well.

Usage

Name your components with the .jsx extension
export default or module.exports = your component class
ES6/7 syntax and JSX is handled by babel Version 6
- .babelrc Config file preset requirements:
- babel-preset-es2015
- babel-preset-react
- babel-preset-stage-0

Examples

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>
    )
  }
}

License

This software is free to use under the MIT license. See the LICENSE-MIT file for license text and copyright information.