<html>
<head>
<meta name="description" content="React.js titty shaker">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>I need a Title Please!</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.min.css">
</head>
<body>
<div id="root"></div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://fb.me/react-with-addons-0.14.7.min.js"></script>
<script src="https://fb.me/react-dom-0.14.7.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.1/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.0.1/redux-thunk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/history/1.17.0/History.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/1.0.3/ReactRouter.min.js"></script>
<script src="https://npmcdn.com/react-router-active-component@3.0.0/umd/react-router-active-component.js"></script>
<script src='https://npmcdn.com/react-motion/build/react-motion.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
/*! Generated by Live LESS Theme Customizer */
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,700|Source+Sans+Pro:400,600,600italic,400italic|Inconsolata:400,700);
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");
.navbar {
border: none;
font-size: 13px;
font-weight: 300;
}
.navbar .navbar-toggle:hover .icon-bar {
background-color: #b3b3b3;
}
.navbar-collapse {
border-top-color: rgba(0, 0, 0, 0.2);
box-shadow: none;
}
.navbar .btn {
padding-top: 6px;
padding-bottom: 6px;
}
.navbar-form {
margin-top: 7px;
margin-bottom: 5px;
}
.navbar-form .form-control {
height: auto;
padding: 4px 6px;
}
.navbar-text {
margin: 12px 15px;
line-height: 21px;
}
.navbar .dropdown-menu {
border: none;
}
.navbar .dropdown-menu > li > a,
.navbar .dropdown-menu > li > a:focus {
background-color: transparent;
font-size: 13px;
font-weight: 300;
}
.navbar .dropdown-header {
color: rgba(255, 255, 255, 0.5);
}
.navbar-default .dropdown-menu {
background-color: #333333;
}
.navbar-default .dropdown-menu > li > a,
.navbar-default .dropdown-menu > li > a:focus {
color: #ffffff;
}
.navbar-default .dropdown-menu > li > a:hover,
.navbar-default .dropdown-menu > .active > a,
.navbar-default .dropdown-menu > .active > a:hover {
background-color: #272727;
}
.navbar-inverse .dropdown-menu {
background-color: #008cba;
}
.navbar-inverse .dropdown-menu > li > a,
.navbar-inverse .dropdown-menu > li > a:focus {
color: #ffffff;
}
.navbar-inverse .dropdown-menu > li > a:hover,
.navbar-inverse .dropdown-menu > .active > a,
.navbar-inverse .dropdown-menu > .active > a:hover {
background-color: #006687;
}
.btn {
padding: 8px 12px;
}
.btn-lg {
padding: 14px 20px;
}
.btn-sm {
padding: 8px 12px;
}
.btn-xs {
padding: 4px 6px;
}
.btn-group .btn ~ .dropdown-toggle {
padding-left: 16px;
padding-right: 16px;
}
.btn-group .dropdown-menu {
border-top-width: 0;
}
.btn-group.dropup .dropdown-menu {
border-top-width: 1px;
border-bottom-width: 0;
margin-bottom: 0;
}
.btn-group .dropdown-toggle.btn-default ~ .dropdown-menu {
background-color: #e7e7e7;
border-color: #cccccc;
}
.btn-group .dropdown-toggle.btn-default ~ .dropdown-menu > li > a {
color: #333333;
}
.btn-group .dropdown-toggle.btn-default ~ .dropdown-menu > li > a:hover {
background-color: #d3d3d3;
}
.btn-group .dropdown-toggle.btn-primary ~ .dropdown-menu {
background-color: #008cba;
border-color: #0079a1;
}
.btn-group .dropdown-toggle.btn-primary ~ .dropdown-menu > li > a {
color: #ffffff;
}
.btn-group .dropdown-toggle.btn-primary ~ .dropdown-menu > li > a:hover {
background-color: #006d91;
}
.btn-group .dropdown-toggle.btn-success ~ .dropdown-menu {
background-color: #43ac6a;
border-color: #3c9a5f;
}
.btn-group .dropdown-toggle.btn-success ~ .dropdown-menu > li > a {
color: #ffffff;
}
.btn-group .dropdown-toggle.btn-success ~ .dropdown-menu > li > a:hover {
background-color: #388f58;
}
.btn-group .dropdown-toggle.btn-info ~ .dropdown-menu {
background-color: #5bc0de;
border-color: #46b8da;
}
.btn-group .dropdown-toggle.btn-info ~ .dropdown-menu > li > a {
color: #ffffff;
}
.btn-group .dropdown-toggle.btn-info ~ .dropdown-menu > li > a:hover {
background-color: #39b3d7;
}
.btn-group .dropdown-toggle.btn-warning ~ .dropdown-menu {
background-color: #e99002;
border-color: #d08002;
}
.btn-group .dropdown-toggle.btn-warning ~ .dropdown-menu > li > a {
color: #ffffff;
}
.btn-group .dropdown-toggle.btn-warning ~ .dropdown-menu > li > a:hover {
background-color: #c17702;
}
.btn-group .dropdown-toggle.btn-danger ~ .dropdown-menu {
background-color: #f04124;
border-color: #ea2f10;
}
.btn-group .dropdown-toggle.btn-danger ~ .dropdown-menu > li > a {
color: #ffffff;
}
.btn-group .dropdown-toggle.btn-danger ~ .dropdown-menu > li > a:hover {
background-color: #dc2c0f;
}
.lead {
color: #6f6f6f;
}
cite {
font-style: italic;
}
blockquote {
border-left-width: 1px;
color: #6f6f6f;
}
blockquote.pull-right {
border-right-width: 1px;
}
blockquote small {
font-size: 12px;
font-weight: 300;
}
table {
font-size: 12px;
}
label,
.control-label,
.help-block,
.checkbox,
.radio {
font-size: 12px;
font-weight: normal;
}
input[type="radio"],
input[type="checkbox"] {
margin-top: 1px;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
border-color: transparent;
}
.nav-tabs > li > a {
background-color: #e7e7e7;
color: #222222;
}
.nav-tabs .caret {
border-top-color: #222222;
border-bottom-color: #222222;
}
.nav-pills {
font-weight: 300;
}
.breadcrumb {
border: 1px solid #dddddd;
border-radius: 3px;
font-size: 10px;
font-weight: 300;
text-transform: uppercase;
}
.pagination {
font-size: 12px;
font-weight: 300;
color: #999999;
}
.pagination > li > a,
.pagination > li > span {
margin-left: 4px;
color: #999999;
}
.pagination > .active > a,
.pagination > .active > span {
color: #fff;
}
.pagination > li > a,
.pagination > li:first-child > a,
.pagination > li:last-child > a,
.pagination > li > span,
.pagination > li:first-child > span,
.pagination > li:last-child > span {
border-radius: 3px;
}
.pagination-lg > li > a,
.pagination-lg > li > span {
padding-left: 22px;
padding-right: 22px;
}
.pagination-sm > li > a,
.pagination-sm > li > span {
padding: 0 5px;
}
.pager {
font-size: 12px;
font-weight: 300;
color: #999999;
}
.list-group {
font-size: 12px;
font-weight: 300;
}
.close {
opacity: 0.4;
text-decoration: none;
text-shadow: none;
}
.close:hover,
.close:focus {
opacity: 1;
}
.alert {
font-size: 12px;
font-weight: 300;
}
.alert .alert-link {
font-weight: normal;
color: #fff;
text-decoration: underline;
}
.label {
padding-left: 1em;
padding-right: 1em;
border-radius: 0;
font-weight: 300;
}
.label-default {
background-color: #e7e7e7;
color: #333333;
}
.badge {
font-weight: 300;
}
.progress {
height: 22px;
padding: 2px;
background-color: #f6f6f6;
border: 1px solid #ccc;
box-shadow: none;
}
.dropdown-menu {
padding: 0;
margin-top: 0;
font-size: 12px;
}
.dropdown-menu > li > a {
padding: 12px 15px;
}
.dropdown-header {
padding-left: 15px;
padding-right: 15px;
font-size: 9px;
text-transform: uppercase;
}
.popover {
color: #fff;
font-size: 12px;
font-weight: 300;
}
.panel-heading,
.panel-footer {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.panel-default .close {
color: #222222;
}
.modal .close {
color: #222222;
}
#banner {
overflow: hidden;
width: 100%;
}
#navi {
margin: 0;
}
#navi.affix {
position: fixed;
top: 0;
width: 100%;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
/* .container {
width: auto;
max-width: 680px;
padding: 0 15px;
} */
.container .text-muted {
margin: 20px 0;
}
// jQuery
// React, ReactDOM;
// Redux, ReduxThunk, ReactRedux
// ReactRouter, React-router-active-link
// ReactMotion
var { createStore, combineReducers, applyMiddleware } = Redux;
var { Router, Route, IndexRoute, IndexLink, History} = ReactRouter ;
var { Motion, spring } = ReactMotion ;
$.getMultiScripts = function(arr, path) {
var _arr = $.map(arr, (scr) => $.getScript( `//jsbin.com/${(path||"") + scr}.js` ) );
_arr.push($.Deferred(( deferred ) => $( deferred.resolve )));
return $.when.apply($, _arr);
}
var Header = React.createClass({
render: function(){
return (
<div className="container" id="banner">
<div className="row">
</div>
</div>
);
}
});
var Navi = React.createClass( {
render: function () {
var Link = reactRouterActiveComponent( 'li' )
return (
<nav className="navbar navbar-inverse navbar-static-top">
<div className="container">
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span className="sr-only">Toggle navigation</span><span className="icon-bar" /><span className="icon-bar" /><span className="icon-bar" />
</button>
<a className="navbar-brand" href="#">
{ this.props.brand }
</a>
</div>
<div id="navbar" className="navbar-collapse collapse">
<ul className="nav navbar-nav navbar-left">
</ul>
<ul className="nav navbar-nav navbar-right">
<Link to={ "/" } onlyActiveOnIndex><i className="fa fa-home" aria-hidden="true"></i> Home</Link>
<Link to={ 'about' }><i className={'fa fa-info'} aria-hidden="true" />{ ' About' }</Link>
</ul>
</div>
</div>
</nav>
);
}
});
var Heading = React.createClass({
componentDidMount(){
$(this.refs.navi).affix({
offset:{ top:$(this.refs.header).height()}
});
},
render(){
return (
<div>
<Header ref={'header'}/>
<Navi ref={'navi'} id={'navi'} {this.props}/>
</div>
);
}
});
var Footer = React.createClass({
render: function() {
return (
<footer className="footer">
<div className="container">
<p className="text-muted">{this.props.children}</p>
</div>
</footer>
);
}
});
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |