same helloworld html string class HelloWorldComponent extends React.Component { render() { return <div>Hello {this.props.text}!</div>; } } When text is “World” the output is: <div>Hello World!</div> var componentOptimization = require("electrode-react-ssr- optimization"); var componentOptimizationRef = componentOptimization({ components: { 'HelloWorldComponent': {
 keyAttrs: ["text"] } } });

render: function() { return ( <div className="product"> <img src={this.props.product.image}/> <div className="product-detail"> <p className="name">{this.props.product.name}</p> <p className="description">{this.props.product.description} </p> <p className="price">Price: ${this.props.product.price}</p> <button type="button" onClick={this.addToCart} disabled={this.props.inventory > 0 ? '' : 'disabled'}> Add To Cart </button> </div> </div> ); } }); module.exports = ProductView;

render: function() { return ( <div className="product"> <img src={this.props.product.image}/> <div className="product-detail"> <p className="name">{this.props.product.name}</p> <p className="description">{this.props.product.description} </p> <p className="price">Price: ${this.props.product.price}</p> <button type="button" onClick={this.addToCart} disabled={this.props.inventory > 0 ? '' : 'disabled'}> Add To Cart </button> </div> </div> ); } }); module.exports = ProductView; • Dynamic props that would be different for each product.
 • Switch the corresponding props with template delimiters 
 (i.e. ${ prop_name }) during react component rendering cycle. • The template is then compiled, cached, executed and the markup is handed back to React.

each product.
 • Switch the corresponding props with template delimiters 
 (i.e. ${ prop_name }) during react component rendering cycle. • The template is then compiled, cached, executed and the markup is handed back to React. <div className="product"> <img src=${product_image}/> <div className="product-detail"> <p className="name">${product_name}</p> <p className="description">${product_description}</p> <p className="price">Price: ${selected_price}</p> <button type="button" onClick={this.addToCart}> Add To Cart </button> </div> </div>

render: function() { return ( <div className="product"> <img src={this.props.product.image}/> <div className="product-detail"> <p className="name">{this.props.product.name}</p> <p className="description">{this.props.product.description} </p> <p className="price">Price: ${this.props.product.price}</p> <button type="button" onClick={this.addToCart} disabled={this.props.inventory > 0 ? '' : 'disabled'}> Add To Cart </button> </div> </div> ); } }); module.exports = ProductView; var componentOptimization = require("electrode-react-ssr- optimization"); var componentOptimizationRef = componentOptimization({ components: { "ProductView": { templateAttrs: ["product.image",
 "product.name", 
 "product.description", 
 "product.price"] }, } });

render: function() { return ( <div className="product"> <img src={this.props.product.image}/> <div className="product-detail"> <p className="name">{this.props.product.name}</p> <p className="description">{this.props.product.description} </p> <p className="price">Price: ${this.props.product.price}</p> <button type="button" onClick={this.addToCart} disabled={this.props.inventory > 0 ? '' : 'disabled'}> {this.props.inventory ? 'Add To Cart' : 'Sold Out'} </button> </div> </div> ); } }); module.exports = ProductView;

componentOptimization({ components: { "ProductView": { templateAttrs: ["product.image",
 "product.name", 
 "product.description", 
 “product.price”], keyAttrs: ["product.inventory"] }, } }); var React = require('react'); var ProductView = React.createClass({ render: function() { return ( <div className="product"> <img src={this.props.product.image}/> <div className="product-detail"> <p className="name">{this.props.product.name}</p> <p className="description">{this.props.product.description} </p> <p className="price">Price: ${this.props.product.price}</p> <button type="button" onClick={this.addToCart} disabled={this.props.inventory > 0 ? '' : 'disabled'}> {this.props.inventory ? 'Add To Cart' : 'Sold Out'} </button> </div> </div> ); } }); module.exports = ProductView;