<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
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. |