timeengine-react v4.0.0
timeengine-react
TimeEngine ( timeengine ) Extension for Stateless React programming without props and state
https://www.npmjs.com/package/timeengine
https://www.npmjs.com/package/timeengine-react
https://github.com/TimeEngine/timeengine
https://github.com/TimeEngine/timeengine-react
From version 5.0.0, the project repository has moved to the project page.
See the Demo and Documentation of the project:
http://timeengine.github.io
Before
https://facebook.github.io/react/
A Stateful Component
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
});
After
A Stateless functional Element (Single statement code!!)
// `.intervalSeq` is to map Immutable-js infinite Sequence
// on TimeEngine infinite Sequence
// map natural numbers sequence on intervalSeq(1000)
const TimerElement = () => __Element(__
.intervalSeq(Immutable.Range(), 1000)
.__((count) => (__.log.t = count)) //console.log
.__((count) => (<div>{"Timer : "}{count}</div>)));
};
Physics Equations
const PhysicsElement = () => {
//MKS system of units
const V0 = 90.0; // m/s
const DEG = 45; //degree
const THETA = DEG / 180 * Math.PI; //radian
const G = 9.8; //gravity const
//t seconds elapsed 10msec time resolution
const t = __
.intervalSeq(Immutable.Range(), 10)
.__((count) => (count * 10 / 1000));
const x = __([t]).__(([t]) => V0 * Math.cos(THETA) * t);
const y = __([t]).__(([t]) => V0 * Math.sin(THETA) * t - 1 / 2 * G * Math.pow(t, 2));
//==================================
const Drawscale = 1; //1 dot = 1 meter
const __seqEl = __([x, y]) //atomic update
.__(([x, y]) => (
<div>
<svg height = "250" width = "100%">
<circle r="2" fill="red"
cx = {50 + x * Drawscale} cy = {250 - y * Drawscale}/>
</svg>
</div>));
return __Element(__seqEl);
};
See the live DEMO @ http://timeengine.github.io
8 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago