<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/vzhenia/pen/WogEKZ?depth=everything&order=popularity&page=93&q=redux&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style class="cp-pen-styles">*{
font-family: courier;
font-size: 1.8rem;
}
button{
margin: 15px 0px 15px 0px;
}
.margContainer{
max-width: 500px;
margin: auto;
}
.left{
float: left;
}
.right{
float: right;
}
h2{
text-align: center;
}
</style></head><body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js'></script>
<script src="https://unpkg.com/expect/umd/expect.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.6/react-redux.js" ></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<div id="root"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script >"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
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 _React = React;
var Component = _React.Component;
var MainView = function (_React$Component) {
_inherits(MainView, _React$Component);
function MainView(props) {
_classCallCheck(this, MainView);
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
_this.state = {};
return _this;
}
MainView.prototype.render = function render() {
return React.createElement(
"div",
{ className: "container-fluid" },
React.createElement(
"div",
{ className: "container margContainer" },
React.createElement(
"button",
{ className: "btn btn-default left" },
"What I Want"
),
React.createElement(
"button",
{ className: "btn btn-default right" },
"What I Have"
)
),
React.createElement(
"div",
{ className: "margContainer" },
React.createElement(
"h2",
null,
"Our Choice of Top Rated Recipes"
)
),
React.createElement(
"div",
{ className: "margContainer" },
React.createElement(
"div",
{ id: "carousel-top", className: "carousel slide", "data-ride": "carousel" },
React.createElement(
"ol",
{ className: "carousel-indicators" },
React.createElement("li", { "data-target": "#carousel-top", "data-slide-to": "0", className: "active" }),
React.createElement("li", { "data-target": "#carousel-top", "data-slide-to": "1" }),
React.createElement("li", { "data-target": "#carousel-top", "data-slide-to": "2" })
),
React.createElement(
"div",
{ className: "carousel-inner" },
React.createElement(
"div",
{ className: "item active", style: { maxHeight: '200px' } },
React.createElement("img", { alt: "First", src: "https://static1.squarespace.com/static/54af3016e4b066a5a28811ac/t/54e3a861e4b04edd5845e2e7/1424205929190/bahaullah-covenant-feature-img.jpg?format=1500w" }),
React.createElement(
"div",
{ className: "carousel-caption" },
React.createElement(
"h3",
null,
"Heading One"
),
React.createElement(
"p",
null,
"Caption Text One"
)
)
),
React.createElement(
"div",
{ className: "item", style: { maxHeight: '200px' } },
React.createElement("img", { alt: "Second", src: "https://legacy.semantic-ui.com/images/demo/photo.jpg" }),
React.createElement(
"div",
{ className: "carousel-caption" },
React.createElement(
"h3",
null,
"Heading Second"
),
React.createElement(
"p",
null,
"Caption Text Second"
)
)
),
React.createElement(
"div",
{ className: "item", style: { maxHeight: '200px' } },
React.createElement("img", { alt: "Third", src: "http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg" }),
React.createElement(
"div",
{ className: "carousel-caption" },
React.createElement(
"h3",
null,
"Heading Third"
),
React.createElement(
"p",
null,
"Caption Text Third"
)
)
)
),
React.createElement(
"a",
{ className: "left carousel-control", href: "#carousel-top", "data-slide": "prev" },
React.createElement("span", { className: "glyphicon glyphicon-chevron-left" })
),
React.createElement(
"a",
{ className: "right carousel-control", href: "#carousel-top", "data-slide": "next" },
React.createElement("span", { className: "glyphicon glyphicon-chevron-right" })
)
)
),
React.createElement(
"div",
{ className: "container margContainer" },
React.createElement(
"button",
{ className: "btn btn-default left" },
"Saved Links"
),
React.createElement(
"button",
{ className: "btn btn-default right" },
"Articles"
)
)
);
};
return MainView;
}(React.Component);
var ReactApp = function ReactApp() {
return React.createElement(
"div",
null,
React.createElement(MainView, null)
);
};
//rendering ReactDOM
//Provider will wrap the APP and pass props implicitly via context
ReactDOM.render(React.createElement(ReactApp, null), document.getElementById('root'));
//# sourceURL=pen.js
</script>
</body></html>
