REACT JS A JAVASCRIPT LIBRARY FOR BUILDING USER

REACT JS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

REACT�� Declarative — MVVM令交互式UI更�� Component-Based — �件化开�，高内聚，可复用 Learn Once, Write Anywhere — 跨平台 H 5，IOS， ANDROID

REACT��模式 MV P MVVM

REACT — JSX�法 // tutorial 1. js var Comment. Box = React. create. Class({ render: function() { return ( <div class. Name="comment. Box"> Hello, world! I am a Comment. Box. </div> ); } }); React. DOM. render( <Comment. Box />, document. get. Element. By. Id('content') );

REACT — �件 COMPONENT // tutorial 2. js var Comment. List = React. create. Class({ render: function() { return ( <div class. Name=“comment. List"> <Comment. Box author=“liangdong”/> </div> ); } }); React. DOM. render( <Comment. List />, document. get. Element. By. Id('content') );

REACT - 属性PROPS var Comment. Box = React. create. Class({ render: function() { return ( <div class. Name="comment. Box"> Hello, world! I am a {this. props. author}. </div> ); } });

REACT - 状� STATE

REACT - 事件响� class Like. Button extends Component { constructor(props) { super(props); this. state = { liked: false }; } handle. Click(e) { this. set. State({ liked: !this. state. liked }); } render() { const text = this. state. liked ? 'like' : 'haven't liked'; return ( <p on. Click={this. handle. Click. bind(this)}> You {text} this. Click to toggle. </p> ); } }