Skip to content

Instantly share code, notes, and snippets.

@johndavedecano

johndavedecano/index.html

Created March 15, 2017 05:17
Show Gist options
  • Save johndavedecano/2fc18ff90ed265255eda3408ae6fa760 to your computer and use it in GitHub Desktop.
Save johndavedecano/2fc18ff90ed265255eda3408ae6fa760 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;
}
.imgs-grid .imgs-grid-image .view-all {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
}
.imgs-grid .imgs-grid-image .view-all:before {
display: inline-block;
content: "";
vertical-align: middle;
height: 100%;
}
.imgs-grid .imgs-grid-image .view-all:hover {
cursor: pointer;
}
.imgs-grid .imgs-grid-image .view-all:hover .view-all-text {
text-decoration: underline;
}
.imgs-grid .imgs-grid-image .view-all .view-all-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.4;
}
.imgs-grid .imgs-grid-image .view-all .view-all-text {
position: relative;
font-size: 16px;
font-family: sans-serif;
color: white;
}
@media (max-width: 350px) {
.imgs-grid .imgs-grid-image .view-all .view-all-text {
font-size: 10px;
}
}
</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/500/700/sports'
},
people: {
src: 'http://lorempixel.com/500/700/people'
},
animals: {
src: 'http://lorempixel.com/500/700/animals'
},
nothing: {
src: 'http://lorempixel.com/500/700/animals'
}
});
var ImageGridItem = (function (_React$Component) {
_inherits(ImageGridItem, _React$Component);
function ImageGridItem() {
_classCallCheck(this, ImageGridItem);
_get(Object.getPrototypeOf(ImageGridItem.prototype), 'constructor', this).apply(this, arguments);
}
_createClass(ImageGridItem, [{
key: 'onLoad',
value: function onLoad() {}
}, {
key: 'render',
value: function render() {
return React.createElement(
'div',
{ className: 'imgs-grid-image' },
React.createElement(
'div',
{ className: 'image-wrap' },
React.createElement('img', { src: this.props.thumbnail, onLoad: this.props.onLoad })
)
);
}
}], [{
key: 'defaultProps',
value: {
onLoad: function onLoad() {}
},
enumerable: true
}]);
return ImageGridItem;
})(React.Component);
var ImageGrid = (function (_React$Component2) {
_inherits(ImageGrid, _React$Component2);
_createClass(ImageGrid, null, [{
key: 'defaultProps',
value: {
images: Immutable.Map()
},
enumerable: true
}]);
function ImageGrid(props) {
_classCallCheck(this, ImageGrid);
_get(Object.getPrototypeOf(ImageGrid.prototype), 'constructor', this).call(this, props);
this.maxGridImages = 5;
this.imageLoadCount = 0;
}
_createClass(ImageGrid, [{
key: 'getGridClass',
value: function getGridClass() {
if (this.props.images.size > 5) {
return 'imgs-grid imgs-grid-' + 5;
} else {
return 'imgs-grid imgs-grid-' + this.props.images.size;
}
}
}, {
key: 'renderImages',
value: function renderImages() {
return this.props.images.map(function (img, key) {
return React.createElement(ImageGridItem, { key: key, id: key, thumbnail: img.src });
}).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 }), 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;
}
.imgs-grid .imgs-grid-image .view-all {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
}
.imgs-grid .imgs-grid-image .view-all:before {
display: inline-block;
content: "";
vertical-align: middle;
height: 100%;
}
.imgs-grid .imgs-grid-image .view-all:hover {
cursor: pointer;
}
.imgs-grid .imgs-grid-image .view-all:hover .view-all-text {
text-decoration: underline;
}
.imgs-grid .imgs-grid-image .view-all .view-all-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.4;
}
.imgs-grid .imgs-grid-image .view-all .view-all-text {
position: relative;
font-size: 16px;
font-family: sans-serif;
color: white;
}
@media (max-width: 350px) {
.imgs-grid .imgs-grid-image .view-all .view-all-text {
font-size: 10px;
}
}</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/500/700/sports',
},
people: {
src: 'http://lorempixel.com/500/700/people',
},
animals: {
src: 'http://lorempixel.com/500/700/animals'
},
nothing: {
src: 'http://lorempixel.com/500/700/animals'
}
});
class ImageGridItem extends React.Component {
static defaultProps = {
onLoad: () => {}
}
onLoad() {
}
render() {
return <div className="imgs-grid-image">
<div className="image-wrap">
<img src={this.props.thumbnail} onLoad={this.props.onLoad} />
</div>
</div>
}
}
class ImageGrid extends React.Component {
static defaultProps = {
images: Immutable.Map()
}
maxGridImages = 5;
imageLoadCount = 0;
constructor(props) {
super(props);
}
getGridClass() {
if (this.props.images.size > 5) {
return 'imgs-grid imgs-grid-' + 5;
} else {
return 'imgs-grid imgs-grid-' + this.props.images.size;
}
}
renderImages() {
return this.props.images.map((img, key) => {
return <ImageGridItem key={key} id={key} thumbnail={img.src} />
}).toArray();
}
render() {
return <div className={this.getGridClass()}>{this.renderImages()}</div>
}
}
React.render(
<ImageGrid images={images} />,
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;
}
.imgs-grid .imgs-grid-image .view-all {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
}
.imgs-grid .imgs-grid-image .view-all:before {
display: inline-block;
content: "";
vertical-align: middle;
height: 100%;
}
.imgs-grid .imgs-grid-image .view-all:hover {
cursor: pointer;
}
.imgs-grid .imgs-grid-image .view-all:hover .view-all-text {
text-decoration: underline;
}
.imgs-grid .imgs-grid-image .view-all .view-all-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.4;
}
.imgs-grid .imgs-grid-image .view-all .view-all-text {
position: relative;
font-size: 16px;
font-family: sans-serif;
color: white;
}
@media (max-width: 350px) {
.imgs-grid .imgs-grid-image .view-all .view-all-text {
font-size: 10px;
}
}
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/500/700/sports'
},
people: {
src: 'http://lorempixel.com/500/700/people'
},
animals: {
src: 'http://lorempixel.com/500/700/animals'
},
nothing: {
src: 'http://lorempixel.com/500/700/animals'
}
});
var ImageGridItem = (function (_React$Component) {
_inherits(ImageGridItem, _React$Component);
function ImageGridItem() {
_classCallCheck(this, ImageGridItem);
_get(Object.getPrototypeOf(ImageGridItem.prototype), 'constructor', this).apply(this, arguments);
}
_createClass(ImageGridItem, [{
key: 'onLoad',
value: function onLoad() {}
}, {
key: 'render',
value: function render() {
return React.createElement(
'div',
{ className: 'imgs-grid-image' },
React.createElement(
'div',
{ className: 'image-wrap' },
React.createElement('img', { src: this.props.thumbnail, onLoad: this.props.onLoad })
)
);
}
}], [{
key: 'defaultProps',
value: {
onLoad: function onLoad() {}
},
enumerable: true
}]);
return ImageGridItem;
})(React.Component);
var ImageGrid = (function (_React$Component2) {
_inherits(ImageGrid, _React$Component2);
_createClass(ImageGrid, null, [{
key: 'defaultProps',
value: {
images: Immutable.Map()
},
enumerable: true
}]);
function ImageGrid(props) {
_classCallCheck(this, ImageGrid);
_get(Object.getPrototypeOf(ImageGrid.prototype), 'constructor', this).call(this, props);
this.maxGridImages = 5;
this.imageLoadCount = 0;
}
_createClass(ImageGrid, [{
key: 'getGridClass',
value: function getGridClass() {
if (this.props.images.size > 5) {
return 'imgs-grid imgs-grid-' + 5;
} else {
return 'imgs-grid imgs-grid-' + this.props.images.size;
}
}
}, {
key: 'renderImages',
value: function renderImages() {
return this.props.images.map(function (img, key) {
return React.createElement(ImageGridItem, { key: key, id: key, thumbnail: img.src });
}).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 }), document.getElementById('react_example'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment