• Stars
    star
    7
  • Rank 2,294,772 (Top 46 %)
  • Language
    CoffeeScript
  • Created over 9 years ago
  • Updated over 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Gulp plugin for rendering reactjs components in existing markup

Build Status Dependency Status

gulp-react-render

Gulp plugin for rendering reactjs components in existing markup

Installation

npm install gulp-react-render

Usage

var react_render = require('gulp-react-render');

gulp.task('prerender', function() {
  gulp.src('./src/*.html')
    .pipe(react_render())
    .pipe(gulp.dest('./public/'))
});

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.

Using props from json file

If you have many properties, it can be better to put the data into an extra json file. This can be done with the data-rpropfile attribute, e.g.:

<!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-rpropfile="./test/fixtures/comp1.json" id="container"></div>            
        </div>
</body>
</html>

More Repositories

1

eslint-plugin-deprecate

simple eslint rules for deprecation
JavaScript
80
star
2

RxReact

Demo projects for concept of building client-side apps with Rx.js and React.js
JavaScript
43
star
3

fretboard

guitar fretboard http://alexmost.github.io/fretboard/
JavaScript
36
star
4

morse

Here you can test your morse skills
JavaScript
21
star
5

2048

2048 implementation in elm
Elm
11
star
6

webpack-inspect

website
JavaScript
6
star
7

fresh-monads

Implementation of monads in coffeescript (inspired by haskell)
CoffeeScript
4
star
8

grunt-react-render

Renders react components in existing markup
CoffeeScript
4
star
9

hatrix

some useless but beautiful stuff in haskell
Haskell
4
star
10

url_for_for_spine

Helper for extending Spne.js Controllers functionality. Adds support for generating dynamic urls by name of controller and action. Just like in Pylons.
CoffeeScript
3
star
11

apollo-hiku-example

JavaScript
2
star
12

chai-rx-assert

Plugin for the chai assert library for comparing observables in tests
JavaScript
2
star
13

abs.js

Awesome Build Sequence based on Gulp tasks and streams.
CoffeeScript
2
star
14

my-courses

Online courses materials, examples and problem solvings
Assembly
2
star
15

hsnake

snake written in haskell
Haskell
2
star
16

wrapper-commonjs

wraps javascript files in modules and bundles
CoffeeScript
2
star
17

generator-rxreact

yeoman generator for modules with usage of Rx.js and React.js
CoffeeScript
1
star
18

map-set-demo

Demo for map and set usecase
JavaScript
1
star
19

rx-assert

Helper methods for assertions in unit tests for rxjs library
JavaScript
1
star
20

gimme-deps

Package for resolving require dependencies from node modules.
CoffeeScript
1
star
21

banner-test

Python
1
star
22

waitevent

waitevent
CoffeeScript
1
star
23

eslint-plugin-cross-import

Plugin that prevents crossimports
JavaScript
1
star