gulp-react-render
Gulp plugin for rendering reactjs components in existing markup
Installation
npm install gulp-react-render
Usage
var react_render = ; gulp;
Overview
Lets assume you creating some static site with html pages and have some react component:
//path - ./component/component1.jsReact = ; Comp1 = React; moduleexports = Comp1
Here is our source markup:
Header ... <!-- placing path to component file in data-rcomp attribute -->
After processing we will recieve:
Header ... <!-- placing path to component file in data-rcomp attribute --> testDiv
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:
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.: