grunt-react-render v0.1.3

Grunt plugin for rendering reactjs components in existing markup

Getting Started

This plugin requires Grunt ~0.4.4

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-react-render --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-react-render');

The "react_render" task

Overview

Lets assume you creating some static site with html pages and have some react component:

//path - ./component/component1.js
React = require('react');

Comp1 = React.createClass({
    render: function(){
        return React.DOM.div({id: "comp1", className: "test"}, "testDiv")
    }
});

module.exports = Comp1

Here is our source markup:

<!DOCTYPE html>
<html lang="en">
    <head></head>
    <body>
      <h1>Header ...</h1>
      <!-- placing path to component file in data-rcomp attribute -->
      <div data-rcomp="./component/component1.js" id="container"></div>
      <script type="javascript">
        //some init logic
      </script>
    </body>
</html>

After processing we will recieve:

<!DOCTYPE html>
<html lang="en">
    <head></head>
    <body>
      <h1>Header ...</h1>
      <!-- placing path to component file in data-rcomp attribute -->
      <div data-rcomp="./component/component1.js" id="container">
      <div id="comp1" class="test" data-reactid=".1vufboq169s" data-react-checksum="1034950555">testDiv</div>
      </div>
      <script type="javascript">
        //some init logic
      </script>
    </body>
</html>

So, as you may understood this plugin will iterate through all over the components and will call React.renderComponentToString for each component.

Using props

You can pass props to React object adding json to the data-rprop attribute, exe:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    </head>
    <body>
        <div class="container">
            <div data-rcomp="./test/fixtures/comp1" data-rprop="{&quot;p1&quot;:&quot;val1&quot;}" id="container"></div>            
        </div>
</body></html>

Rember to encode HTML special chars.

Usage Examples

Overwrite existing file

In this example we will overwrite an existing file:

grunt.initConfig({
  react_render: {
    task1: {
      options: {src: "./path/to/some/file.html"}
    },
  },
});

Create processed file at some dest

This configuration will create file with the same name at some destination path.

grunt.initConfig({
  react_render: {
    task1: {
      options: 
          {src: "./path/to/some/file.html",
          dest: "./dest/"}
    },
  },
});

Contributing

Take care to maintain the existing coding style. Add unit tests for any new or changed functionality.

AlexMost/grunt-react-render

AlexMost

Reviews

Repository Details