####react最基础的语法和不依赖环境的纯前端免编译代码

参照：http://www.ruanyifeng.com/blog/2015/03/react.html

 

注意事项：1.必须放倒服务器上，在文件系统上无法运行

 

login.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的类型和是否必须填写//    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:this.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 () {    return(        
     
            
      
                       {this.props.title}            
      
            
      
                       {this.props.role}            
      
            
      this.handleChangeId()} />            
      this.handleChangePassword()} />            
      this.handleClickSubmit()}                    className={this.state.submitEnabled?"submitButtonEnabled":"submitButtonDisabled"}>登录        
     
);    }}ReactDOM.render(    
     ,    document.getElementById('root'));