<!DOCTYPE html>
<html>
<head>
<script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
<script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react-dom.min.js"></script>
<script data-require="ramda@*" data-semver="0.23.0" src="https://unpkg.com/ramda@0.23.0/dist/ramda.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="app"></div>
<script src="script.js"></script>
</body>
</html>
const {inc, dec, lensProp, over} = R
const countL = lensProp('count')
const transformCount = over(countL)
const incCount = transformCount(inc)
const decCount = transformCount(dec)
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
count: 0
}
this.increase = this.increase.bind(this)
this.decrease = this.decrease.bind(this)
}
increase() {
this.setState(incCount)
}
decrease() {
this.setState(decCount)
}
render() {
return (
<div>
<button onClick={this.increase}>+</button>
<div>
{this.state.count}
</div>
<button onClick={this.decrease}>-</button>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'))
/* Styles go here */