Skip to content

Instantly share code, notes, and snippets.

@johndavedecano

johndavedecano/index.html

Created March 15, 2017 07:51
Show Gist options
  • Save johndavedecano/01ace0417cb8a9c68c7eab50b34f42f0 to your computer and use it in GitHub Desktop.
Save johndavedecano/01ace0417cb8a9c68c7eab50b34f42f0 to your computer and use it in GitHub Desktop.
Download ZIP
React Hello World w/ JSBin // source http://jsbin.com/netuji
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.3/immutable.min.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
<script src="http://fb.me/react-0.13.1.js"></script>
<meta charset="utf-8">
<title>React Hello World w/ JSBin</title>
<style id="jsbin-css">
.imgs-grid {
max-width: 800px;
margin: 0 auto;
font-size: 0;
}
.imgs-grid.imgs-grid-1 .imgs-grid-image {
width: 100%;
text-align: center;
}
.imgs-grid.imgs-grid-2 .imgs-grid-image {
width: 50%;
}
.imgs-grid.imgs-grid-3 .imgs-grid-image {
width: 33.333333333333336%;
}
.imgs-grid.imgs-grid-4 .imgs-grid-image {
width: 50%;
}
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(1),
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(2),
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(3) {
width: 33.333333333333336%;
}
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(4),
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(5) {
width: 50%;
}
.imgs-grid .imgs-grid-image {
position: relative;
display: inline-block;
padding: 1px;
box-sizing: border-box;
}
.imgs-grid .imgs-grid-image:hover {
cursor: pointer;
}
.imgs-grid .imgs-grid-image .image-wrap {
position: relative;
display: inline-block;
overflow: hidden;
vertical-align: middle;
}
.imgs-grid .imgs-grid-image .image-wrap img {
position: relative;
width: 100%;
height: auto;
margin: 0;
visibility: hidden;
}
.imgs-grid .imgs-grid-image .view-all {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
opacity: 0.5;
z-index: 1;
}
.imgs-grid .imgs-grid-image .view-all-text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.preview-number {
font-size: 35px;
color: white;
}
@media (max-width: 480px) {
.preview-number {
font-size: 30px
}
}
</style>
</head>
<body>
<div id="react_example"></div>
<script id="jsbin-javascript">
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var images = Immutable.Map({
transport: {
src: 'http://lorempixel.com/500/700/transport'
},
sports: {
src: 'http://lorempixel.com/200/600/sports'
},
y: {
src: 'http://lorempixel.com/500/700/transport'
},
x: {
src: 'http://lorempixel.com/200/600/sports'
},
j: {
src: 'http://lorempixel.com/200/600/sports'
}
});
var ImageGridItem = (function (_React$Component) {
_inherits(ImageGridItem, _React$Component);
function ImageGridItem() {
var _this = this;
_classCallCheck(this, ImageGridItem);
_get(Object.getPrototypeOf(ImageGridItem.prototype), 'constructor', this).apply(this, arguments);
this.state = {
height: 0,
imageHeight: 0
};
this.updateDimensions = function () {
return _this.load();
};
this.load = function () {
var elWidth = React.findDOMNode(_this.refs.image).getBoundingClientRect().width;
_this.setState({ height: elWidth });
_this.props.onLoad(_this.props.id);
};
}
_createClass(ImageGridItem, [{
key: 'componentDidMount',
value: function componentDidMount() {
window.addEventListener("resize", this.updateDimensions);
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions);
}
}, {
key: 'renderOverLay',
value: function renderOverLay() {
if (this.props.isLastImage && this.props.hasMoreImages) {
return React.createElement('div', { className: 'view-all' });
}
return null;
}
}, {
key: 'renderOverLayText',
value: function renderOverLayText() {
if (this.props.isLastImage && this.props.hasMoreImages) {
return React.createElement(
'div',
{ className: 'view-all-text' },
React.createElement(
'div',
{ className: 'preview-number' },
'+' + (this.props.totalImages - 5)
)
);
}
return null;
}
}, {
key: 'render',
value: function render() {
var style = {
width: this.state.height - 2,
height: this.state.height,
backgroundImage: 'url(' + this.props.thumbnail + ')',
backgroundSize: 'cover',
backgroundPosition: 'center'
};
var wrapperStyle = {
minHeight: this.state.height
};
return React.createElement(
'div',
{ ref: 'image',
style: wrapperStyle,
className: 'imgs-grid-image',
onClick: this.props.onClick },
React.createElement(
'div',
{ style: style, className: 'image-wrap' },
React.createElement('img', { src: this.props.thumbnail, onLoad: this.load }),
this.renderOverLay(),
this.renderOverLayText()
)
);
}
}], [{
key: 'defaultProps',
value: {
id: undefined,
thumbnail: undefined,
totalImagesGiven: 0,
totalImages: 0,
onClick: function onClick() {},
onLoad: function onLoad() {}
},
enumerable: true
}]);
return ImageGridItem;
})(React.Component);
var ImageGrid = (function (_React$Component2) {
_inherits(ImageGrid, _React$Component2);
_createClass(ImageGrid, null, [{
key: 'defaultProps',
value: {
align: true,
images: Immutable.Map(),
totalImages: 0,
onWindowResize: function onWindowResize() {},
onImagesLoaded: function onImagesLoaded() {},
onImageClick: function onImageClick() {}
},
enumerable: true
}]);
function ImageGrid(props) {
var _this2 = this;
_classCallCheck(this, ImageGrid);
_get(Object.getPrototypeOf(ImageGrid.prototype), 'constructor', this).call(this, props);
this.maxGridImages = 5;
this.state = {
imageLoadCount: 0,
lastResizeTimestamp: null
};
this.onImageLoad = function (id) {
var imageLoadCount = _this2.state.imageLoadCount + 1;
_this2.setState({
imageLoadCount: imageLoadCount
});
// Check if all images has been loaded
if (imageLoadCount === _this2.props.images.size) {
_this2.setState({ imageLoadCount: 0 });
_this2.allImagesLoaded();
}
};
}
_createClass(ImageGrid, [{
key: 'getGridClass',
value: function getGridClass() {
if (this.props.images.size > this.maxGridImages) {
return 'imgs-grid imgs-grid-' + this.maxGridImages;
} else {
return 'imgs-grid imgs-grid-' + this.props.images.size;
}
}
}, {
key: 'allImagesLoaded',
value: function allImagesLoaded() {
this.props.onImagesLoaded();
}
}, {
key: 'onClick',
value: function onClick(key) {
this.props.onImageClick(key);
}
}, {
key: 'renderImages',
value: function renderImages() {
var _this3 = this;
var count = 0;
return this.props.images.map(function (img, key) {
count++;
return React.createElement(ImageGridItem, { key: key,
id: key,
thumbnail: img.src,
isLastImage: count === _this3.props.images.size,
hasMoreImages: _this3.props.totalImages > _this3.props.images.size,
totalImages: _this3.props.totalImages,
onClick: _this3.onClick.bind(_this3, key),
onLoad: _this3.onImageLoad });
}).toArray();
}
}, {
key: 'render',
value: function render() {
return React.createElement(
'div',
{ className: this.getGridClass() },
this.renderImages()
);
}
}]);
return ImageGrid;
})(React.Component);
React.render(React.createElement(ImageGrid, { images: images, totalImages: 100 }), document.getElementById('react_example'));
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.3/immutable.min.js"><\/script>
<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"><\/script>
<script src="//fb.me/react-0.13.1.js"><\/script>
<meta charset="utf-8">
<title>React Hello World w/ JSBin</title>
</head>
<body>
<div id="react_example"></div>
</body>
</html> </script>
<script id="jsbin-source-css" type="text/css">.imgs-grid {
max-width: 800px;
margin: 0 auto;
font-size: 0;
}
.imgs-grid.imgs-grid-1 .imgs-grid-image {
width: 100%;
text-align: center;
}
.imgs-grid.imgs-grid-2 .imgs-grid-image {
width: 50%;
}
.imgs-grid.imgs-grid-3 .imgs-grid-image {
width: 33.333333333333336%;
}
.imgs-grid.imgs-grid-4 .imgs-grid-image {
width: 50%;
}
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(1),
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(2),
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(3) {
width: 33.333333333333336%;
}
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(4),
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(5) {
width: 50%;
}
.imgs-grid .imgs-grid-image {
position: relative;
display: inline-block;
padding: 1px;
box-sizing: border-box;
}
.imgs-grid .imgs-grid-image:hover {
cursor: pointer;
}
.imgs-grid .imgs-grid-image .image-wrap {
position: relative;
display: inline-block;
overflow: hidden;
vertical-align: middle;
}
.imgs-grid .imgs-grid-image .image-wrap img {
position: relative;
width: 100%;
height: auto;
margin: 0;
visibility: hidden;
}
.imgs-grid .imgs-grid-image .view-all {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
opacity: 0.5;
z-index: 1;
}
.imgs-grid .imgs-grid-image .view-all-text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.preview-number {
font-size: 35px;
color: white;
}
@media (max-width: 480px) {
.preview-number {
font-size: 30px
}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">let images = Immutable.Map({
transport: {
src: 'http://lorempixel.com/500/700/transport'
},
sports: {
src: 'http://lorempixel.com/200/600/sports',
},
y: {
src: 'http://lorempixel.com/500/700/transport'
},
x: {
src: 'http://lorempixel.com/200/600/sports',
},
j: {
src: 'http://lorempixel.com/200/600/sports',
}
});
class ImageGridItem extends React.Component {
state = {
height: 0,
imageHeight: 0
}
static defaultProps = {
id: undefined,
thumbnail: undefined,
totalImagesGiven: 0,
totalImages: 0,
onClick: () => {},
onLoad: () => {}
}
componentDidMount() {
window.addEventListener("resize", this.updateDimensions);
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions);
}
updateDimensions = () => this.load();
load = () => {
var elWidth = React.findDOMNode(this.refs.image).getBoundingClientRect().width;
this.setState({height: elWidth});
this.props.onLoad(this.props.id);
}
renderOverLay() {
if (this.props.isLastImage && this.props.hasMoreImages) {
return <div className="view-all"></div>
}
return null;
}
renderOverLayText() {
if (this.props.isLastImage && this.props.hasMoreImages) {
return <div className="view-all-text">
<div className="preview-number">{ '+' + (this.props.totalImages - 5)}</div>
</div>
}
return null;
}
render() {
const style = {
width: this.state.height - 2,
height: this.state.height,
backgroundImage: `url(${this.props.thumbnail})`,
backgroundSize: 'cover',
backgroundPosition: 'center'
};
const wrapperStyle = {
minHeight: this.state.height
};
return <div ref="image"
style={wrapperStyle}
className="imgs-grid-image"
onClick={this.props.onClick}>
<div style={style} className="image-wrap">
<img src={this.props.thumbnail} onLoad={this.load} />
{this.renderOverLay()}
{this.renderOverLayText()}
</div>
</div>
}
}
class ImageGrid extends React.Component {
static defaultProps = {
align: true,
images: Immutable.Map(),
totalImages: 0,
onWindowResize: () => {},
onImagesLoaded: () => {},
onImageClick: () => {}
}
maxGridImages = 5;
state = {
imageLoadCount: 0,
lastResizeTimestamp: null
}
constructor(props) {
super(props);
}
getGridClass() {
if (this.props.images.size > this.maxGridImages) {
return 'imgs-grid imgs-grid-' + this.maxGridImages;
} else {
return 'imgs-grid imgs-grid-' + this.props.images.size;
}
}
allImagesLoaded() {
this.props.onImagesLoaded();
}
onImageLoad = (id) => {
const imageLoadCount = this.state.imageLoadCount + 1;
this.setState({
imageLoadCount: imageLoadCount
});
// Check if all images has been loaded
if (imageLoadCount === this.props.images.size) {
this.setState({imageLoadCount: 0});
this.allImagesLoaded();
}
}
onClick(key) {
this.props.onImageClick(key);
}
renderImages() {
let count = 0;
return this.props.images.map((img, key) => {
count++;
return <ImageGridItem key={key}
id={key}
thumbnail={img.src}
isLastImage={count === this.props.images.size}
hasMoreImages={this.props.totalImages > this.props.images.size}
totalImages={this.props.totalImages}
onClick={this.onClick.bind(this, key)}
onLoad={this.onImageLoad} />
}).toArray();
}
render() {
return <div className={this.getGridClass()}>{this.renderImages()}</div>
}
}
React.render(
<ImageGrid images={images} totalImages={100} />,
document.getElementById('react_example')
);</script></body>
</html>
Raw
jsbin.netuji.css
.imgs-grid {
max-width: 800px;
margin: 0 auto;
font-size: 0;
}
.imgs-grid.imgs-grid-1 .imgs-grid-image {
width: 100%;
text-align: center;
}
.imgs-grid.imgs-grid-2 .imgs-grid-image {
width: 50%;
}
.imgs-grid.imgs-grid-3 .imgs-grid-image {
width: 33.333333333333336%;
}
.imgs-grid.imgs-grid-4 .imgs-grid-image {
width: 50%;
}
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(1),
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(2),
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(3) {
width: 33.333333333333336%;
}
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(4),
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(5) {
width: 50%;
}
.imgs-grid .imgs-grid-image {
position: relative;
display: inline-block;
padding: 1px;
box-sizing: border-box;
}
.imgs-grid .imgs-grid-image:hover {
cursor: pointer;
}
.imgs-grid .imgs-grid-image .image-wrap {
position: relative;
display: inline-block;
overflow: hidden;
vertical-align: middle;
}
.imgs-grid .imgs-grid-image .image-wrap img {
position: relative;
width: 100%;
height: auto;
margin: 0;
visibility: hidden;
}
.imgs-grid .imgs-grid-image .view-all {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
opacity: 0.5;
z-index: 1;
}
.imgs-grid .imgs-grid-image .view-all-text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.preview-number {
font-size: 35px;
color: white;
}
@media (max-width: 480px) {
.preview-number {
font-size: 30px
}
}
Raw
jsbin.netuji.js
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var images = Immutable.Map({
transport: {
src: 'http://lorempixel.com/500/700/transport'
},
sports: {
src: 'http://lorempixel.com/200/600/sports'
},
y: {
src: 'http://lorempixel.com/500/700/transport'
},
x: {
src: 'http://lorempixel.com/200/600/sports'
},
j: {
src: 'http://lorempixel.com/200/600/sports'
}
});
var ImageGridItem = (function (_React$Component) {
_inherits(ImageGridItem, _React$Component);
function ImageGridItem() {
var _this = this;
_classCallCheck(this, ImageGridItem);
_get(Object.getPrototypeOf(ImageGridItem.prototype), 'constructor', this).apply(this, arguments);
this.state = {
height: 0,
imageHeight: 0
};
this.updateDimensions = function () {
return _this.load();
};
this.load = function () {
var elWidth = React.findDOMNode(_this.refs.image).getBoundingClientRect().width;
_this.setState({ height: elWidth });
_this.props.onLoad(_this.props.id);
};
}
_createClass(ImageGridItem, [{
key: 'componentDidMount',
value: function componentDidMount() {
window.addEventListener("resize", this.updateDimensions);
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions);
}
}, {
key: 'renderOverLay',
value: function renderOverLay() {
if (this.props.isLastImage && this.props.hasMoreImages) {
return React.createElement('div', { className: 'view-all' });
}
return null;
}
}, {
key: 'renderOverLayText',
value: function renderOverLayText() {
if (this.props.isLastImage && this.props.hasMoreImages) {
return React.createElement(
'div',
{ className: 'view-all-text' },
React.createElement(
'div',
{ className: 'preview-number' },
'+' + (this.props.totalImages - 5)
)
);
}
return null;
}
}, {
key: 'render',
value: function render() {
var style = {
width: this.state.height - 2,
height: this.state.height,
backgroundImage: 'url(' + this.props.thumbnail + ')',
backgroundSize: 'cover',
backgroundPosition: 'center'
};
var wrapperStyle = {
minHeight: this.state.height
};
return React.createElement(
'div',
{ ref: 'image',
style: wrapperStyle,
className: 'imgs-grid-image',
onClick: this.props.onClick },
React.createElement(
'div',
{ style: style, className: 'image-wrap' },
React.createElement('img', { src: this.props.thumbnail, onLoad: this.load }),
this.renderOverLay(),
this.renderOverLayText()
)
);
}
}], [{
key: 'defaultProps',
value: {
id: undefined,
thumbnail: undefined,
totalImagesGiven: 0,
totalImages: 0,
onClick: function onClick() {},
onLoad: function onLoad() {}
},
enumerable: true
}]);
return ImageGridItem;
})(React.Component);
var ImageGrid = (function (_React$Component2) {
_inherits(ImageGrid, _React$Component2);
_createClass(ImageGrid, null, [{
key: 'defaultProps',
value: {
align: true,
images: Immutable.Map(),
totalImages: 0,
onWindowResize: function onWindowResize() {},
onImagesLoaded: function onImagesLoaded() {},
onImageClick: function onImageClick() {}
},
enumerable: true
}]);
function ImageGrid(props) {
var _this2 = this;
_classCallCheck(this, ImageGrid);
_get(Object.getPrototypeOf(ImageGrid.prototype), 'constructor', this).call(this, props);
this.maxGridImages = 5;
this.state = {
imageLoadCount: 0,
lastResizeTimestamp: null
};
this.onImageLoad = function (id) {
var imageLoadCount = _this2.state.imageLoadCount + 1;
_this2.setState({
imageLoadCount: imageLoadCount
});
// Check if all images has been loaded
if (imageLoadCount === _this2.props.images.size) {
_this2.setState({ imageLoadCount: 0 });
_this2.allImagesLoaded();
}
};
}
_createClass(ImageGrid, [{
key: 'getGridClass',
value: function getGridClass() {
if (this.props.images.size > this.maxGridImages) {
return 'imgs-grid imgs-grid-' + this.maxGridImages;
} else {
return 'imgs-grid imgs-grid-' + this.props.images.size;
}
}
}, {
key: 'allImagesLoaded',
value: function allImagesLoaded() {
this.props.onImagesLoaded();
}
}, {
key: 'onClick',
value: function onClick(key) {
this.props.onImageClick(key);
}
}, {
key: 'renderImages',
value: function renderImages() {
var _this3 = this;
var count = 0;
return this.props.images.map(function (img, key) {
count++;
return React.createElement(ImageGridItem, { key: key,
id: key,
thumbnail: img.src,
isLastImage: count === _this3.props.images.size,
hasMoreImages: _this3.props.totalImages > _this3.props.images.size,
totalImages: _this3.props.totalImages,
onClick: _this3.onClick.bind(_this3, key),
onLoad: _this3.onImageLoad });
}).toArray();
}
}, {
key: 'render',
value: function render() {
return React.createElement(
'div',
{ className: this.getGridClass() },
this.renderImages()
);
}
}]);
return ImageGrid;
})(React.Component);
React.render(React.createElement(ImageGrid, { images: images, totalImages: 100 }), document.getElementById('react_example'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment