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

varTimer=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)constTimerElement=()=>__Element(__.intervalSeq(Immutable.Range(),1000).__((count)=>(__.log.t=count))//console.log.__((count)=>(<div>{"Timer : "}{count}</div>)));};

Physics Equations

constPhysicsElement=()=>{//MKS system of unitsconstV0=90.0;// m/sconstDEG=45;//degreeconstTHETA=DEG/180*Math.PI;//radianconstG=9.8;//gravity const//t seconds elapsed 10msec time resolutionconstt=__.intervalSeq(Immutable.Range(),10).__((count)=>(count*10/1000));constx=__([t]).__(([t])=>V0*Math.cos(THETA)*t);consty=__([t]).__(([t])=>V0*Math.sin(THETA)*t-1/2*G*Math.pow(t,2));//==================================constDrawscale=1;//1 dot = 1 meterconst__seqEl=__([x,y])//atomic update.__(([x,y])=>(<div><svgheight="250"width="100%"><circler="2"fill="red"cx={50+x*Drawscale}cy={250-y*Drawscale}/></svg></div>));return__Element(__seqEl);};

See the live DEMO @ http://timeengine.github.io