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">
  </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>
 
// 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({
      render: function(){
        return (
          <div className="container" id="tic_tac_toe">
            {'fuck'}
          </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 300px

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

Dismiss x
public
Bin info
kizzlebotpro
0viewers