<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!--react.js是React的核心庫--> <script src="./build/react.js" charset="utf-8"></script> <!--react-dom.js的作用是提供與DOM相關的功能--> <script src="./build/react-dom.js" charset="utf-8"></script> <!--browser.min.js的作用是JSX文法轉換成JavaScript文法--> <script src="./build/browser.min.js" charset="utf-8"></script> </head> <body> <!--React渲染的模板內容會插入到這個DOM節點中，也可以理解為一個容器--> <div id="container"> </div> </body> <!--在React開發中，使用JSX,跟JavaScript不相容，所以在使用JSX的地方需要設定type="text/babel"--> <!--babel是一個轉換編譯器，可以將ES6轉成可以在瀏覽器中啟動並執行代碼--> <script type="text/babel"> //在此處編寫React代碼 /** 事件處理 react中的事件名稱，遵循駝峰命名法，首字母得小寫 案例：定義一個組件，組件中包含一個button，給button綁定onClick事件 **/ // // var MyButton =React.createClass({ // handleClick:function(){ // alert("點擊按鈕觸發的效果"); // }, // render:function(){ // return( // <button onClick={this.handleClick}>{this.props.buttonTitle}</button> // ); // } // }); // ReactDOM.render( // <MyButton buttonTitle="按鈕"/>, // document.getElementById("container") // ); /** state 狀態 props 組件自身的屬性 this.state **/ //需求：建立一個CheckButton的組件，包含一個checkbox類型<input>,複選框在選中和未選中兩種狀態下會顯示不同的文字，即根據狀態渲染// var CheckButton=React.createClass({// //定義初始狀態// getInitialState:function(){// return{// //在這個對象中設定的屬性，將會儲存在state中// //預設狀態，未選中// isCheck:false// }// },//// //定義事件綁定的方法// handleChange:function(){// //修改狀態值，通過this.state讀取設定的狀態值// this.setState({// isCheck:!this.state.isCheck// });// },//// render:function(){// //根據狀態值設定顯示的文字// //在JSX文法中，不能直接使用if,使用三目運算子// var text=this.state.isCheck ? "已選中" :"未選中";// return(// <div>// <input type="checkbox" onChange={this.handleChange} />// {text}// </div>// );// }// });//// ReactDOM.render(// <CheckButton />,// document.getElementById("container")// ); //當state發生變化時，會調用組件內部的render方法/** 需求：定義一個組件，將使用者在輸入框內輸入的內容進行即時顯示 分析： 組件與使用者互動過程中，存在狀態的變化，即輸入框的值**/ var Input=React.createClass({ getInitialState:function(){ return{ value:"請輸入" }; }, handleChange:function(event){ //通過event.target.value讀取使用者輸入的值 this.setState({ value:event.target.value }); }, render:function(){ var value=this.state.value; return( <div> <input type="text" value={value} onChange={this.handleChange}/> <p>{value}</p> </div> ); } });ReactDOM.render( <Input />, document.getElementById("container")); </script></html>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
