React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by Laura Kishimoto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.0/css/swiper.css">
<link rel="stylesheet" href="https://code.jquery.com/mobile/git/jquery.mobile-git.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.0/js/swiper.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

const Slider = ({ config, getSliderRef, children }) => {
  return (
    (!!children &&
      <Swiper
        {...config}
        ref={(node) => {
          if (node) {
            getSliderRef(node.swiper)
          }
        }}
      >
        {children}
      </Swiper>
    )
  )
}

// ==========================

const sliderConfig = {
  slidesPerView: 'auto'
}

export class Filter extends PureComponent {
  constructor(props) {
    super(props)

    this.getMasterSliderRef = this.getMasterSliderRef.bind(this)
    this.getNewSlideIndex = this.getNewSlideIndex.bind(this)
    this.goToSlide = this.goToSlide.bind(this)
    this.state = {
      masterSlider: null
    }
  }

  getMasterSliderRef(slider) {
    // should be the slider with the most slides?
    this.masterSlider = slider
  }

  getModels(models) {
    const {
      make, imageConfig
    } = this.props
    return models.map((model) => {
      return (
        <Model
          key={`model-${model.displayName}`}
          href="#"
        >
          <img
            src={`${imageConfig.baseUrl}${imageConfig.width}/${imageConfig.height}/?random`}
          />
        </Model>
      )
    })
  }

  getGroups() {
    const { data } = this.props
    return data.map((item, index) => {
      const getSliderRef = index === 0 ? this.getMasterSliderRef : undefined
      return (
        <Slider config={SliderConfig} getSliderRef={getSliderRef}>
          {this.getModels(item.data)}
        </Slider>
      )
    })
  }

  getNewSlideIndex(slider, direction) {
    const { imageConfig } = this.props
    const multiplier = direction === 'next' ? 1 : -1
    const slidesToScroll = Math.floor(slider.width / imageConfig.width) * multiplier
    return slider.activeIndex + slidesToScroll
  }

  goToSlide(direction) {
    if (this.masterSlider) {
      this.masterSlider.slideTo(this.getNewSlideIndex(this.masterSlider, direction))
    }
  }

  render() {
    const { ...props } = this.props

    return (
      <div>
       ...