Fun with React.js and ES6 Module Transpiler

partials.jsx

/**
  * @jsx React.DOM
  */
import React from 'react';

var ImagePlaceholder = {
  imgLoadError: function() {
    this.getDOMNode().querySelector('img').src = '/img/no-image.jpg';
  }
};

var ReviewTmpl = React.createClass({
  mixins: [ImagePlaceholder],
  render: function() {
    var data = this.props.data;
    var rating = data.average || data.Rating;
    var ratingStarsWidth = {width: "calc(" + ( rating /5) * 100 + "% - 0.12em)"};
    return (
      <div id="" className="review item">
        <div className="product-image-thumbnail"><img onError={this.imgLoadError} className="product-image" src={data.Product.ImageUrl} />
          <div className="product-name">{data.Product.Name}</div>
        </div>
        <div className="review-container">
          <div className="stars" rating={rating}>
            <div className="filled" style={ratingStarsWidth}>★★★★★</div>
            <div className="unfilled">★★★★★</div>
          </div>
          <div className="title">{data.Title}</div>
          <div className="nickname">{data.UserNickname}</div>
          <div className="text">{data.ReviewText}</div>
          <div className="tags">
            <div className="tags-pro hide"></div>
            <div className="tags-con hide"></div>
          </div>
        </div>
      </div>
    )
  }
});

var ProductTmpl = React.createClass({
  mixins: [ImagePlaceholder],
  render: function() {
    var data = this.props.data;
    var imageUrl = data.ImageUrl || data.product.ImageUrl;
    var rating = data.average || data.Rating;
    var ratingStarsWidth = {width: "calc(" + ( rating /5) * 100 + "% - 0.12em)"};
    var tags = typeof data.Tags === 'undefined' ? {Pro: [], Con: []} : data.Tags;
    return <div className="data item">
        <div className="product-data">
          <div className="rating">
            <div className="stars" rating={data.average}>
              <div className="filled" style={ratingStarsWidth}>★★★★★</div>
              <div className="unfilled">★★★★★</div>
            </div>
            <div className="hide rating-value">{rating}</div>
          </div>
          <div className="percent-recommend">
            <span className="percent-value">100%&nbsp;</span>
            <span className="percent-recommend-suffix">of reviewers recommend this product</span>
          </div>
        </div>
        <div className="product-image-thumbnail">
          <img src={imageUrl} onerror="this.src='/img/no-image.jpg'" className="product-image" />
          <div className="product-name medium_headline"></div>
        </div>
        <div className="tags">
          <div className="tags-pro">
            <Tags tags={tags.Pro} tagType="pro" />
          </div>
          <div className="tags-con">
            <Tags tags={tags.Con} tagType="con" />
          </div>
        </div>
        </div>
  }
});

/* Private */
var Tags = React.createClass({
  render: function() {
    var className = 'tag tag-' + this.props.tagType;
    var tags = this.props.tags.slice(0,2).map(function(tag) {
      return <div key={tag} className={className}>{tag}</div>
    });
    return <span>{tags}</span>
  }
})

export { ReviewTmpl, ProductTmpl }