# # #react最基础的语法和不依赖环境的纯前端免编译代码
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
Class Login extends react.component{//props type and whether it must be filled in//static Proptypes = {//}; Constructor (props) {super (props); This.state = {userId: ', UserPassword: ', Submitenabled:false,}; } componentwillmount () {Console.log ("Componentwillmount"); } componentdidmount () {Console.log ("Componentdidmount"); } componentwillunmount () {Console.log ("Componentwillunmount"); }//event Handleclicksubmit () {if (This.state.userId.length < 1 | | This.state.userPassword.length < 1) { Return } $.get ("Http://publicschool.sinaapp.com/test/test.php?name=jack", function (Result) {Console.log (Result ); }); } Handlechangeid () {this.setstate ({userid:this.refs._ref_userid.value, submitenabled:th Is.refs._ref_userid.value.length > 0 && this.refs._ref_userpassword.value.length > 0,}); } handlechangepassword () {this.setstate ({userpassword:this.refs._ref_userpassword.value, Submitenabled:this.refs._ref_userid.value.length > 0 && this.refs._ref_userpassword.value.length > 0, }); }//Render method render () {return (<div classname= "Login" > <div classname= "Header" > {this.props.title} </div> <div classname= "Userrole" > {this.prop S.role} </div> <input classname= "userId" type= "text" ref= "_ref_userid" placeholder= "User name" on change={() =>this.handlechangeid ()}/> <input classname= "userpassword" type= "password" ref= "_ref_userPa ssWOrd "placeholder=" password "onchange={() =>this.handlechangepassword ()}/> <button type=" button "onClick={ () =>this.handleclicksubmit ()} classname={this.state.submitenabled? " Submitbuttonenabled ":" Submitbuttondisabled "}> login </button> </div>); }}reactdom.render (<login title= "title" role= "ddd"/>, document.getElementById (' root '));
REACT pure front end does not depend on the packaging tool code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
