Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<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

Dismiss x
public
Bin info
kizzlebotpro
0viewers