<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="十七-vikang" />
<title>十七 - http://www.itdecent.cn/u/626b6b7f6b78</title>
<script src="js/react.js"></script> <!--這里需要注意引入了三個(gè)-->
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<script type="text/babel"> <!--這里需要將text/javascript改為text/babel-->
//定義一個(gè)組件，我命名為A（首字母大寫），類里面的方法后面不加‘；’
class A extends React.Component{
//一個(gè)方法constructor，為了初始化
constructor(...args){
//超類super代表的是父類的構(gòu)造函數(shù)，必須調(diào)用，為了先完成父類構(gòu)造的相關(guān)工作，要把參數(shù)都傳給父類可以用Arguements
super(...args);
//在這里初始化狀態(tài)
this.state={value:''};
}
//修改狀態(tài)自寫的一個(gè)方法，命名隨意，在此我叫text
text(ev){
//修改狀態(tài)要用setState
this.setState({
//target就是指的發(fā)生事件的那個(gè)對(duì)象
value:ev.target.value
})
}
//方法之一，渲染的作用
render(){
//需要注意這里return的div這個(gè)父級(jí)元素有且只能有一個(gè)，里面可以包很多。
return <div>
//text不是函數(shù)而是方法，需要加上this，后面用bind(this)為了防止this混亂；還有這里的事件不可以小寫成onchange，注意所有事件的大小寫
<input type="text" onChange={this.text.bind(this)}/><br />
//用模板將數(shù)據(jù)輸出
<span>{this.state.value}</span>
</div>
}
};
window.onload=function(){
var oBox=document.getElementById('box');
ReactDOM.render(
<A/>, //渲染的東西，組件在這里當(dāng)單標(biāo)簽用
oBox //渲染到哪里
);
};
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
react入門
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- 在React這股目前最熱前端框架之風(fēng)刮來之前，一直在Cocos2d-html5游戲和半路出家的Android應(yīng)用的...
- 一、準(zhǔn)備工作 先安裝React Native，然后初始化一個(gè)示例工程 二、什么是JavaScript？ JS是一個(gè)...
- React是由數(shù)據(jù)驅(qū)動(dòng)的，簡(jiǎn)單來說React中最重要的props以及state服務(wù)的最終對(duì)象都是數(shù)據(jù)。props作...
- react事件 由于react的虛擬DOM模式，react對(duì)所有的事件也都做了專門的處理和優(yōu)化，官方的說法是引入了...
- 經(jīng)常接受心靈雞湯的洗禮有時(shí)候真的會(huì)有些作用比如那個(gè)蹲的越低跳的就越高的案例就讓我更好的堅(jiān)持下來雖然不知道未來到底如...
