react純前端不依賴於打包工具的代碼

最後更新：2017-01-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：button dom 11.2 script react event cdn name const

####react最基礎的文法和不依賴環境的純前端免編譯代碼

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

注意事項：1.必須放倒伺服器上，在檔案系統上無法運行

<!doctype html><head>    <meta charset="utf-8">    <script src="https://npmcdn.com/[email protected]/dist/react-with-addons.min.js"></script>    <script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script>    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>    <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/jquery/1.11.2/jquery.min.js"></script>    <script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.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純前端不依賴於打包工具的代碼

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More