Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
    <meta name="description" content="React.js Main">
    <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">
    <link rel="stylesheet" href="https://output.jsbin.com/wibeda.css">
    <link rel="stylesheet" href="https://output.jsbin.com/salilo.css">
  </head>
  <body>
    <div id="root"></div>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/lodash/lodash/3.0.1/lodash.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>
 
$width_height:3em;
.flex-container{
  /* Flexbox properties */
  display:flex;
  flex-direction:row;
  justify-content: center;    // defines how to distribute flex-items
  align-items: center;        // vertical align for flex-items
  min-height:10em;           // TODO: remove
  background:dodgerblue;  
  .flex-row{
    line-height: 3em;
    color: white;
    font-weight: bold;
    text-align: center;
    .box{
      background:tomato;
      
      /*       border:1px solid black; */
      width:$width_height; 
      height:$width_height;
      margin-bottom:1px;
      margin-right:1px;
    }
  }  
}
 
// jQuery
// React, ReactDOM;
// Redux, ReduxThunk, ReactRedux
// ReactRouter, React-router-active-link
// ReactMotion
var { PropTypes } = React ; 
var { createStore, combineReducers, applyMiddleware } = Redux;
var { Router, Route, IndexRoute, IndexLink, History} = ReactRouter ;
var { Motion, spring, presets, TransitionMotion, StaggeredMotion  } = ReactMotion ;
const myScripts = { common:'wibeda', motion:'salilo' }
// const myBins = ['wibeda', 'salilo'];
const myBins = Object.keys(myScripts).reduce((prev, curr, i , arry) => prev.concat(myScripts[curr]), []);
$.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);
}
$(document).ready(function(){
  $.getMultiScripts(myBins).done(() => {   
    
    
    
    var About = React.createClass({
      render: function() {
        return (
          <div className="jumbotron">
            <h1>{this.props.heading || 'Hello, about!'}</h1>
            <p>{this.props.caption || 'captions are amazing too'}</p>
            <p>
              <a className="btn btn-success btn-lg" href="#" role="button">
                Learn more
              </a>
            </p>
          </div>
        );
      }
    });
    var Main = React.createClass({
      getLinks:function(){
        return [
          { label:'Home', icon:'home', path:'/' },
          { label:'About', icon:'info', path:'about' },
          { label:'ChatHeads', icon:'briefcase', path:'chatheads' },
          { label:'Ripple', icon: '', path:'ripple' }];
      },
      render: function() {
        return (
          <div>
            <Navi links={this.getLinks()} />
            <div ref='container' className='container'>
              {this.props.children}
            </div>
              <Footer>
                {'Made with '}<i className={'fa fa-heart'}/>{' by James Choi'}
              </Footer>
          </div>
        );
      }
    });
  
  
  
  
  
  
    var Content = React.createClass({
      getRows: function(){
        return (
          <div className='flex-row'>
            {_.times(3, () => {
              return (
                <div className="box">{'x'}</div>
              );
            })}
          </div>
        )        
      },
      render: function(){
        return (
          <div className="flex-container">
            {this.getRows()}
          </div>
        );
      }
    });
  
  
  
    const toRender = (
      <Router>
        <Route path={'/'} component={Main}>
          <IndexRoute component={Content}/>
          <Route path={'content'} component={Content} />
          <Route path={'about'} component={About}/>
          <Route path={'chatheads'} component={ChatHeads}/>
          <Route path={'ripple'} component={Ripple}/>
        </Route>
      </Router>
    );
    ReactDOM.render( toRender, document.getElementById('root') );  
  });
})
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kizzlebotpro
0viewers