使用React.js实现的响应式相册

相册图片使用了http://placebabies.com网站的图片服务。（注：无法访问，更新替换为unsplash.it，如还是无法访问请替换为本地图片。）使用jsxtransformer来在线解析jsx代码。

react, jsx, gallery

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 6357
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<h1>React Image Gallery</h1>
<div id="gallery"></div>
<script src='/uploads/141201/react-0.11.1.js'></script>
<script src='/uploads/141201/jsxtransformer-0.11.0.js'></script>
<script type="text/jsx">
/** @jsx React.DOM **/
data = [{"id":"1"},{"id":"2"},{"id":"3"}]

var selectedImg = React.createClass({
  render: function() {
    return (
      <div className="hero-img">
        <img src={this.props.hero} />
      </div>
    )
  }  
});

var imgItem = React.createClass({
  render: function() {
    return (<img src={'https://unsplash.it/200/200?image=' + this.props.path} />)
  }
});

var imgRow = React.createClass({
  render: function() {
    return (
      <div className="img-row">
        <ul>
            {this.props.children}
        </ul>
      </div>
    )
  }
});

React.renderComponent(<Gallery data={data} />, document.getElementById('gallery')); 
</script>

相册图片使用了http://placebabies.com网站的图片服务。（注：无法访问，更新替换为unsplash.it，如还是无法访问请替换为本地图片。）使用jsxtransformer来在线解析jsx代码。

react, jsx, gallery

编辑器支持Emmet

快捷键

相册图片使用了http://placebabies.com网站的图片服务。（注：无法访问，更新替换为unsplash.it，如还是无法访问请替换为本地图片。） 使用jsxtransformer来在线解析jsx代码。

react, jsx, gallery

使用React.js实现的电子商务订单跟踪系统应用程序

使用React.js实现的SVG图形变形转换器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

相册图片使用了http://placebabies.com网站的图片服务。（注：无法访问，更新替换为unsplash.it，如还是无法访问请替换为本地图片。）使用jsxtransformer来在线解析jsx代码。