Html文件里溯警，弄一個(gè)container趣苏，但會(huì)被replace
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
js里，一個(gè)render方法梯轻，（A,B）食磕，A是組件名稱，里面還能插入組件屬性喳挑，如下面的name="world"彬伦，并通過this.prop.xxx調(diào)用，B是插入到html的那個(gè)標(biāo)簽并replace掉
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
關(guān)于組件新建伊诵，就是
React.createClass（{
XXX:XXX;
XXX:xxx;
...
}
）
就是一個(gè)對(duì)象下面各種屬性方法哈
react與css
兩種寫法单绑，一個(gè)寫在css文件中，但要注意的是曹宴，給標(biāo)簽添加class時(shí)搂橙，根據(jù)es6最新特性，要寫成className
<Hello name="World" className="ddd" />
另一種寫法笛坦，是寫在js新建組件里面区转，render方法return時(shí)加上style={（鍵值對(duì)寫法）}（react規(guī)定）
來個(gè)例子
var Hello=React.createClass({
render:function(){
var styleObj={
color:"red";(react規(guī)定要以字符串形式，所以雙引號(hào))
fontSize:"40px"(react規(guī)定名字要駝峰式寫法）
}弯屈；
return<div style={styleObj}></div>;
}
生命周期和this.state
一張圖蜗帜，一個(gè)hook的理念，在creatClass方法中的hook方法進(jìn)行使用资厉，應(yīng)該就把生命周期闡述完了厅缺。
講到生命周期，不得不說this.state.在圖中你能看到宴偿，mounting階段湘捎，有一個(gè)getinitialState()方法是處于所有hook之前，這個(gè)方法用于定義初始狀態(tài)窄刘，也就是一個(gè)對(duì)象窥妇，這個(gè)對(duì)象可以在接下來的creatClass方法通過 this.state.xxx讀取屬性
既然有了this.state了，肯定要有改變值的方法娩践，就是this.setState活翩，這個(gè)可謂是核心，每次修改以后翻伺，自動(dòng)調(diào)用 this.render方法材泄，再次渲染組件。就是所謂的動(dòng)態(tài)改變了吨岭，弄一個(gè)例子看看
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
獲取真實(shí)的dom
其實(shí)就是給標(biāo)簽綁定一個(gè)ref值拉宗，通過索引ref值得到真實(shí)dom節(jié)點(diǎn)
最后來一個(gè)實(shí)例來結(jié)束入門
var TestClickComponent=React.createClass({
render:funtion(){
handleClick:function(event){
var tipE =React.findDomNode(this.refs.ddd);
if(tipE.style.display="none")
{
.......
}
return(
<div>
<button onClick={this.handleClick}>顯示隱藏</button><span ref="ddd">測(cè)試點(diǎn)擊隱藏
<div>
);
}
});
var TestInputComponent=React.createClass({
getInitialState:function(){
return {
inputContent:""
}
},
render:function(){
changHandler:function(event){
this.setState({
inputContent:event.target.value
})；
}
return(
<div>
<input type="text" onChange={this.changeHandler}}/><span>{this.state.inputContent}</span>
<div>
);
}
});
React.render(
<div>
<TestClickCompent/>
<TestInputCompent/>
</div>
document.getElementById("container"));
- 文本輸入框的值，不能用this.props.value讀取旦事，而要定義一個(gè)onChange
事件的回調(diào)函數(shù)魁巩，通過event.target.value讀取用戶輸入的值。textarea元素姐浮，select元素谷遂，radio元素都屬于這種情況 - 盡量都使用駝峰式寫法命名，能避免很多bug单料，有一個(gè)特別注意埋凯，組件命名第一個(gè)字母要大寫的
- React的監(jiān)聽事件中，要獲取真實(shí)的dom扫尖，有React.findDomNode(this.refs.XXX)白对，就是相當(dāng)于原來的選擇器，但這里要和文本框內(nèi)容區(qū)分開
- 在render中换怖，對(duì)兩個(gè)組件用了個(gè)div包起來甩恼，因?yàn)閞ender不能直接放兩個(gè)組件
- 第一個(gè)組件，就是在button中添加事件（注意大小寫）handleClick沉颂，在handClick方法中獲取span的真實(shí)dom節(jié)點(diǎn)及其屬性并進(jìn)行操作
- 第二個(gè)組件中条摸，就是一個(gè)state和setState進(jìn)行動(dòng)態(tài)交互的一個(gè)小例子，在 getInitialState中定義屬性inputContent铸屉，并在事件對(duì)調(diào)函數(shù)中改變他進(jìn)行動(dòng)態(tài)輸出（event.target.value）
