React Canvas: High-Performance rendering React group, reactcanvas

React Canvas: High-Performance rendering React group, reactcanvas

React Canvas providesCanvasThe ability to render mobile Web App interfaces, replacing the traditionalDOMRendering, with a user experience closer to the Native App. React Canvas provides a set of standard React components, which are abstracted by rendering elements.

 

 

 

Download GitHub source code

　

Sample Code:

var React = require('react');var ReactCanvas = require('react-canvas');var Surface = ReactCanvas.Surface;var Image = ReactCanvas.Image;var Text = ReactCanvas.Text;var MyComponent = React.createClass({  render: function () {    var surfaceWidth = window.innerWidth;    var surfaceHeight = window.innerHeight;    var imageStyle = this.getImageStyle();    var textStyle = this.getTextStyle();    return (      <Surface width={surfaceWidth} height={surfaceHeight} left={0} top={0}>        <Image style={imageStyle} src='...' />        <Text style={textStyle}>          Here is some text below an image.        </Text>      </Surface>    );  },  getImageHeight: function () {    return Math.round(window.innerHeight / 2);  },  getImageStyle: function () {    return {      top: 0,      left: 0,      width: window.innerWidth,      height: this.getImageHeight()    };  },  getTextStyle: function () {    return {      top: this.getImageHeight() + 10,      left: 0,      width: window.innerWidth,      height: 20,      lineHeight: 20,      fontSize: 12    };  }});

　　

Articles you may be interested in

• Useful jQuery effects in website development [Source Code]
• Share 35 amazing CSS3 animation demos
• Amazing 8 HTML5 & JavaScript Special Effects
• 10 useful results in Web development [Source Code download]
• 12 classic jQuery image carousel plug-ins

 

Link: React Canvas: High-Performance rendering React component

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources