React全家桶：
1.react庫主題；
2.webpack 自動化的一個構架工具（grunt gulp);
3.flex 布局用的；
4.redux view層用，把特別復雜的html頁面分成一部分一部分的；
5.babel:編譯器；

?

jsx語法： 不能直接用，要編譯；
它就相當于js編譯器，把普通的js轉成支持es6的語法規則；
1、增強版的js語法，
babel：編譯器；

注意：有且只有一個一個父元素；（頂元素）

第一個react；

ReactDOM.render();
render有2個參數，一個參數是渲染的內容；第二個參數是渲染到哪個位置(標簽內)

react最強大的地方在于：
1、組件；
2、狀態；

react的組件；一個組件就是一個class

<script type="text/babel">
class Comp extends React.Component{ //創建一個類：
render(){
return <span>qqaazz</span>;
}
}
window.onload = function(){
var odiv = document.getElementById('oDiv');
ReactDOM.render(
<Comp/>,
odiv
);
}
</script>

創建一個類：
一個組件就相當于是一個自定義標簽或者是一個class；
在window.onload方法中渲染comp這個組件，組件都是可見的，因此，組件內必須得有一個方法，叫做render,
render方法的作用就是：當我要渲染組件的時候，組件內的render方法就要把渲染的內容返回回來；上面的代碼就渲染并返回了一個span；
直接渲染組件就可以了，組件內部的方法體中寫具體渲染的內容

作為一個組件，必須要在頁面上被渲染出來；

1、定義一個組件：
class 名字 extends React.Component{
//至少有一個方法（渲染的內容）
render(){
return //返回渲染的內容；
}

}
2、使用這個組件
//就跟標簽一樣用；
//ReactDOM.render(參數1，參數2)；
ReactDOM.render(
<Comp/>,
odiv
);



組件是可以有屬性的：

用法：
<Comp name="zhangsan"/>
return <span>{this.props.name}</span>;

{} 模板字符串 在這里放你的變量
props 我們傳的所有的屬性都在props里面，用的時候可寫成：props.name；

當傳2個參數時，這樣寫：
<Comp name = "zhangsan" age="26"/>,
return <span>{this.props.name},{this.props.age}</span>; 都寫在span內。用2個{}分開寫；

react事件；onChange onClick

狀態：可以變的，不固定；
constructor(...args){
super(...args);//super()代表的是超類父類構造函數，先完成父類的函數構造，然后才能處理其他構造函數
this.state ={value:''};//初始化state
}
setState(); 設置狀態
this.state.value 獲取狀態
this.setState({
value:e.target.value
});

state不可能只是一個數據，所以他應該是個對象，對象包含很多個state

綁定事件：
事件函數
fn(e){//處理事件所用的函數
this.setState({
value:e.target.value
});
}

<input type="text" onChange = {this.fn.bind(this)}/>

轉載于:https://www.cnblogs.com/Jerry-spo/p/6629326.html

總結

以上是生活随笔為你收集整理的react笔记记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。