react纯前端不依赖于打包工具的代码

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

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

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

<!doctype html>

<head>

    <meta charset="utf-8">

    <!--reset.css-->

    <link rel="stylesheet" href="/frontend/css/reset.css" />

    <!--jquery-->

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <!--react【核心库】【dom操作库】【jsx语法库】-->

    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>

    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>

    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

    <!--bootStrap-->

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" >

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" >

    <script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <!--jquery.cookie-->

    <script src="http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.js"></script>

    <link rel="stylesheet" href="login.css" type="text/css" />

    <title>

        页面

    </title>

</head>

<body style="margin: auto">

<div id="root"></div>

<script type="text/babel" src="login.js"></script>

</body>

</html>

.login{

    background-color: red;

}

.header{

    height: 30px;

    background-color: gray;

}

.userRole{

    height:80px;

    background-color: lightcyan;

}

.userId{

}

.userPassword{

}

.submitButtonEnabled{

    color:blue;

}

.submitButtonDisabled{

    color: gray;

}

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(

        <div className="login">

            <div className="header">

                {this.props.title}

            </div>

            <div className="userRole">

                {this.props.role}

            </div>

            <input className="userId" type="text" ref="_ref_userId" placeholder="用户名" onChange={()=>this.handleChangeId()} />

            <input className="userPassword" type="password" ref="_ref_userPassword" placeholder="密码" onChange={()=>this.handleChangePassword()} />

            <button type="button" onClick={()=>this.handleClickSubmit()}

                    className={this.state.submitEnabled?"submitButtonEnabled":"submitButtonDisabled"}>登录</button>

        </div>);

    }

}

ReactDOM.render(

    <Login title="title" role="ddd"/>,

    document.getElementById('root')

);

巴特西

react纯前端不依赖于打包工具的代码

最新文章

热门文章