Todo React-Redux Demo
A demo demonstrating using Redux with React. Uses React, Redux, and React-Redux. Uses babel to handle some ES6 syntax, and Lodash for some syntactic sugar.
by vaheed akhtar
August 17, 2018
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/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/babel-polyfill/6.13.0/polyfill.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.2/lodash.js"></script>
<div>
<!-- left side -->
<div id="leftside">
<div>
left
</div>
</div>
<!-- main -->
<div id="main">
<div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div>
<div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
lkjdsfhlkjdsahfkdsahflkjdsaf
</div> <div>
...
CSS
#leftside{
width:20%;
float:left;
background-color:grey;
}
#main{
width:60%;
color:red;
float:left;
background-color:grey;
}
#rightside{
width:20%;
float:left;
background-color:grey;
}