<html>
<head>
<meta name="description" content="React Redux Components">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>React Redux</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/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://npmcdn.com/redux-logger@2.6.1/dist/index.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
var { createStore, combineReducers, applyMiddleware } = Redux;
// React;
// Redux
// ReactDOM;
// ReactRedux;
// ReduxThunk;
var Main = React.createClass({
render: function() {
return (
<div className='container'>
{this.props.children}
</div>
);
}
});
var Content = React.createClass({
render: function() {
return (
<div className='row'>
<div className='col-xs-12'>
{'text is awesome from multiple bins'}
</div>
</div>
);
}
});
// console.log(Object.keys(window))
var Timeline = React.createClass({
render: function() {
return (
<div className="container">
<div className="page-header">
<h2>{this.props.title}<small> {this.props.subtext}</small></h2>
</div>
<div className="timeline">
<div className="line text-muted" />
<div className="separator text-muted">
<time></time>
</div>
<article className="panel panel-danger panel-outline">
{/* Icon */}
<div className="panel-heading icon">
<i className="glyphicon glyphicon-heart" />
</div>
{/* /Icon */}
{/* Body */}
<div className="panel-body">
<strong>Someone</strong> favourited your photo.
</div>
{/* /Body */}
</article>
<article className="panel panel-default panel-outline">
{/* Icon */}
<div className="panel-heading icon">
<i className="glyphicon glyphicon-picture" />
</div>
{/* /Icon */}
{/* Body */}
<div className="panel-body">
<img className="img-responsive img-rounded" src="//placehold.it/350x150" />
</div>
{/* /Body */}
</article>
<article className="panel panel-primary">
{/* Icon */}
<div className="panel-heading icon">
<i className="glyphicon glyphicon-plus" />
</div>
{/* /Icon */}
{/* Heading */}
<div className="panel-heading">
<h2 className="panel-title">New content added</h2>
</div>
{/* /Heading */}
{/* Body */}
<div className="panel-body">
Some new content has been added.
</div>
{/* /Body */}
{/* Footer */}
<div className="panel-footer">
<small>Footer is also supported!</small>
</div>
{/* /Footer */}
</article>
{/* /Panel */}
{/* Separator */}
<div className="separator text-muted">
<time>25. 3. 2015</time>
</div>
{/* /Separator */}
{/* Panel */}
<article className="panel panel-success">
{/* Icon */}
<div className="panel-heading icon">
<i className="glyphicon glyphicon-plus" />
</div>
{/* /Icon */}
{/* Heading */}
<div className="panel-heading">
<h2 className="panel-title">New content added</h2>
</div>
{/* /Heading */}
{/* Body */}
<div className="panel-body">
Anything you can do with <code>.panel</code>, can be done in timeline too!
</div>
{/* /Body */}
{/* List group */}
<ul className="list-group">
<li className="list-group-item">Like</li>
<li className="list-group-item">list</li>
<li className="list-group-item">groups</li>
<li className="list-group-item">and</li>
<li className="list-group-item">tables</li>
</ul>
</article>
{/* /Panel */}
{/* Panel */}
<article className="panel panel-info panel-outline">
{/* Icon */}
<div className="panel-heading icon">
<i className="glyphicon glyphicon-info-sign" />
</div>
{/* /Icon */}
{/* Body */}
<div className="panel-body">
That is all.
</div>
{/* /Body */}
</article>
{/* /Panel */}
</div>
{/* /Timeline */}
</div>
);
}
});
var Pomodoro = React.createClass({
render: function() {
return (
<div>
<title />
<div id="fancyClock">
<div className="orange clock">
<div className="display">17</div>
<div className="front left" />
<div className="rotate left">
<div className="bg left" />
</div>
<div className="rotate right" style={{display: 'block'}}>
<div className="bg right" />
</div>
</div>
<div className="blue clock">
<div className="display">35</div>
<div className="front left" />
<div className="rotate left">
<div className="bg left" />
</div>
<div className="rotate right" style={{display: 'block'}}>
<div className="bg right" />
</div>
</div>
<div className="green clock">
<div className="display">33</div>
<div className="front left" />
<div className="rotate left">
<div className="bg left" />
</div>
<div className="rotate right" style={{display: 'block'}}>
<div className="bg right" />
</div>
</div>
</div>
</div>
);
}
});
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. |