Reference: http://www.ruanyifeng.com/blog/2015/03/react.html
Note: 1. Must be placed on the server and cannot be run on the file system
Login.html
<!doctype html>
Login.css
. login{ background-color:red;}. header{ height:30px; Background-color:gray;}. userrole{ height:80px; Background-color:lightcyan;}. userid{}.userpassword{}.submitbuttonenabled{ Color:blue;}. submitbuttondisabled{ Color:gray;}
Login.js
var Login = React.createclass ({//props type and whether proptypes must be filled in: {title:React.PropTypes.string.isRequired, Role:React.PropTypes.string.isRequired,}, Getdefaultprops:function () {Console.log ("getdefaultprops"); return {title: ' Default title ', Role: ' Default role ',}; },//Initialize state getinitialstate:function () {Console.log ("getinitialstate"); return {userId: ', UserPassword: ', Submitenabled:false,}; }, Componentwillmount:function () {Console.log ("Componentwillmount"); This.timer = setinterval (function () {}.bind (this), 100); }, Componentdidmount:function () {Console.log ("Componentdidmount"); This.timer = setinterval (function () {}.bind (this), 100); }, Componentwillunmount:function () {Console.log ("Componentwillunmount"); This.timer = setinterval (function () {}.bind (this), 100); },//event handleclicksubmit:function () {if (This.state.userId.length < 1 | | this.state.userPassword.leng Th < 1) {return; } alert ("Submit"); $.get ("Http://publicschool.sinaapp.com/test/test.php?name=jack", function (Result) {Console.log (result); }.bind (this));//bind this, ' callback function ' to use ' this '}, Handlechangeid:function () {this.setstate ({userId: This.refs._ref_userid.value, submitenabled:this.refs._ref_userid.value.length > 0 && this.refs._ref_ UserPassword.value.length > 0,}); }, Handlechangepassword:function () {this.setstate ({userpassword:this.refs._ref_userpassword.value, Submitenabled:this.refs._ref_userid.value.length > 0 && this.refs._ref_userpassword.value.length &G T 0,}); },//Render method Render:function () {return (<div classname= "Login" > <div class NAme= "Header" > {this.props.title} </div> <div classname= "Userr Ole "> {this.props.role} </div> <input classname=" UserId "type = "text" ref= "_ref_userid" placeholder= "User name" Onchange={this.handlechangeid}/> <input classname= "UserP Assword "type=" password "ref=" _ref_userpassword "placeholder=" password "Onchange={this.handlechangepassword}/> <button type= "button" Onclick={this.handleclicksubmit} classname={this.state.submitenabled? " Submitbuttonenabled ":" submitbuttondisabled "}> login </button> </div>); },}); Reactdom.render (<login title= "I am the title" role= "Student's parent"/> document.getElementById (' root '));
React JS Basic usage [ES5, pure front-end notation]