react:
hao123案例，可以通過控制臺來獲取一些數據填充：
復制網頁上的一些內容，
var a = 粘貼的內容.split(/\s+/)
輸入 a ,把獲得的數組復制；

var Nav = React.createClass({
        //["2017年放假安排:全年放假均趕在周末", "二手房價下跌", "合肥房價開啟暴跌模式", "牛！這名詩詞才女亮相央視才驚四座", ""穿山甲公子"身份疑曝光", "照片被扒出", "女白領追劇到凌晨3點", "眼中長滿結石", "女子春節相親被糾纏：喜歡我哪我改!", "男子看別人女朋友", "自己女朋友被暴打", "山西一官員因保護小三打老婆被停職", "春節回家,這些都是你不能錯過的經典!", ""]

    createLi:function(){
            var liDate = ["2017年放假安排:全年放假均趕在周末","二手房價下跌","合肥房價開啟暴跌模式", 
            "牛！這名詩詞才女亮相央視才驚四座","穿山甲公子身份疑曝光", 
            "照片被扒出","女白領追劇到凌晨3點","眼中長滿結石","女子春節相親被糾纏：喜歡我哪我改!", 
            "男子看別人女朋友","自己女朋友被暴打","山西一官員因保護小三打老婆被停職", 
            "春節回家,這些都是你不能錯過的經典!"];
            //根據數據渲染虛擬dom,將渲染的返回出來 map forEach可以遍歷，但是只有map有return
            return liDate.map(function(value,index,arrs){
                return (<li key={index}>{value}</li>)
            })
        },
    render:function(){//對于創建多個虛擬dom我們可以通過方法來渲染
        return (
            <div className="nav-part">
                <ul>
                
                    {this.createLi()}
                </ul>
            </div>
        )
    }
})

ReactDOM.render(< Nav/>,document.getElementById('app'))

在cmd進入該文件夾，輸入fis3 release -d ../test
cmd進入test文件夾，啟動node服務 node app
瀏覽器輸入localhost:3000查看效果

======================================================================

上面案例中，創建了一個組件Nav，有兩個方法,其中要循環多個li,就可以用到map，注意return和{}的用法；在render中調用是：this.createLi()

注釋：
在jsx中的注釋可以卸載dom元素塊的外面，也可以用{/**/}插值括號來寫；

======================================================================

props屬性

在html中div就是元素一樣，我們可以對其添加不同的屬性（id,class),或者是值來實現不同的功能不同的顯示效果；
一個組件渲染出來樣式一致，為了展現不同的樣式行為，我們對其添加不同的屬性；
但是添加的屬性如何獲取，組件中有個屬性叫props，這個屬性可以獲取組件上添加的屬性；

var Part = React.createClass({
    render:function(){
        // console.log(this.props); 
        //可以得到Object {fontColor: "red"} Object {fontColor: "green"}

        return (<h2 className={this.props.fontColor}>hello</h2>)
    }
})

ReactDOM.render(<Part fontColor="red" />,document.getElementById('app'))
ReactDOM.render(<Part fontColor="green" />,document.getElementById('app2'))

====================================================================================

getDefaultProps設置默認的屬性，如果新插入的組件沒有設置title，會報錯就用這個：

getDefaultProps:function(){
        return {
            title:['默認標題']
        }
    },

====================================================================================

整個代碼如下：

var Part = React.createClass({
    getDefaultProps:function(){
        return {
            title:['默認標題']
        }
    },
    createTitle:function(){
        return this.props.title.map(function(value,index){
            return (<li key={index}>{value}</li>)
        })
    },
    render:function(){
        console.log(this.props);
        // return (<h2 className={this.props.fontColor}>hello</h2>)

        return (
            <div className="part">
                <ul className="header">
                    {this.createTitle()}
                </ul>
            </div>
            )
    }
})

ReactDOM.render(<Part title={['今日要聞','深圳新聞']} />,document.getElementById('app'))
ReactDOM.render(<Part title={['今日話題']} />,document.getElementById('app2'))
ReactDOM.render(<Part title={['今日熱播','影視劇','綜藝']} />,document.getElementById('app3'))
ReactDOM.render(<Part />,document.getElementById('app3'))//這個就沒有寫titile

html部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .part{
        width: 300px;
        color:#0873c0;
        margin: 20px;
        height: 300px;
    }
    ul{
        border-top: 2px solid #ccc;
    }
    ul li{
        margin-top: -2px;
        border-top: 2px solid #ccc;
        font-size: 14px;
        line-height: 30px;
        height: 30px;
        float: left;
        padding:0 20px;
        text-align: center;
    }
    ul li:hover{
        border-top-color: blue;
        cursor: pointer;
    }
    </style>
</head>
<body>
<div id="app"></div>
<div id="app2"></div>
<div id="app3"></div>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="js/07.jsx"></script>
    
</body>
</html>

fis-conf.js的內容：

fis.match('**.jsx',{
    parser:fis.plugin('babel2'),
    rExt:'.js'
})

====================================================================================

設置樣式

先看一段代碼：

<script type="text/x-jsx">
    var Title = React.createClass({
        render:function(){
            var style ={
                color:'red',
                border:'1px solid #000',
                borderBottom:'5px solid #000',
                WebkitBoxShadow:'10px 10px 10px red'
            }
            return (<h1 style={style}>這是一個標題</h1>)
        
        }
    })
ReactDOM.render(< Title />,document.getElementById('app'))
</script>

在元素虛擬dom里寫樣式需要這樣：style={{ color : 'red' }},所以我們可以通過定義插值的方式：

var style ={
                color:'red',
                border:'1px solid #000',
                borderBottom:'5px solid #000',
                WebkitBoxShadow:'10px 10px 10px red'
            }
            return (<h1 style={style}>這是一個標題</h1>)

樣式名有-的都要用駝峰式的寫法，首字母小寫；
但是CSS3兼容性的屬性名，例如-webkit-box-shadow就要首字母大寫寫成WebkitBoxShadow;
由此可見，其實是否大寫取決于前面是否有-；

=====================================================================================

那么創建虛擬dom的語法中如何設置樣式呢？

var h1 = React.createElement('h1',
{
style:{color:'red'}
},'今天天氣真好')
ReactDOM.render(h1,document.getElementById('app'))

記住：
ReactDOM.render(h1,document.getElementById('app'))
中對第一個參數使用</>是針對創建組件的類名，這里就不需要；

=====================================================================================

react事件

react中為虛擬dom添加事件和html中為dom添加事件一樣：<div onclick=""></div>
通常我們為react添加的dom是一個方法，所以不要寫在字符中，因此要用插值符號為虛擬dom添加事件回調函數；

綁定一個click事件，記得駝峰式onClick:

var Demo = React.createClass({
    clickButton:function(){
        console.log(111)
    },
    render:function(){
        return (
            <div>
                <button onClick={this.clickButton} >顯示下面的內容</button>
            </div>
            )
    }
})

ReactDOM.render(<Demo />,document.getElementById('app'))

=====================================================================================

state狀態

getInitialState 函數返回一個對象{}
setState來修改state的對象

如果一個組件在渲染到頁面之后不會變化，那么我們通過props可以實現對組件樣式的設置以及行為的渲染；
這些組件不會受到外界的影響，組件是一成不變的，這類組件叫無狀態組件；
對于大部分組件來說，通常是要與用戶交互的，此時組件要處在不同的狀態，組件自身就應該要有狀態，有狀態組件；

對于組件內部的狀態控制，我們可以通過state屬性來控制

getInitialState:function(){
        return {
            index:0,
            text:''
        }
    }

可以通過事件來更改狀態的值：

clickButton:function(){
        this.setState({
            text:'顯示的文案'
        })
    }

完整的代碼如下：

var Demo = React.createClass({
    clickButton:function(){
        this.setState({
            text:'顯示的文案'
        })
    },
    getInitialState:function(){
        return {
            index:0,
            text:''
        }
    },
    render:function(){
        console.log(this.state)
        return (
            <div>
                <button onClick={this.clickButton} >顯示下面的內容</button>
                <p>{this.state.text}</p>
            </div>
            )
    }
})

ReactDOM.render(<Demo />,document.getElementById('app'))

======================================================================================

來實現一個點擊小圖換大圖背景的小案例

思路：批量創建li然后通過插值放入到大盒子里面，在Li上綁定事件changeBg來修改state狀態，實現對大圖的更換；

var Skin = React.createClass({
    createLi:function(){
        var arr = [];
        for(var i=1;i<13;i++){
            arr.push((<li onClick={this.changeBg} key={i}><img src={'skin/small_'+ (i >9 ? i :'0'+i )+ '.jpg'} data-id={i} alt=''/> </li>))
        }
        return arr;
    },
    changeBg:function(e){
        var id = e.target.getAttribute('data-id');
        this.setState({
            bg: 'url(skin/big_'+ (id > 9 ? id : '0' + id ) +'.jpg)'
        })
    },
    getInitialState:function(){
        return {
            bg: ''
        }
    },
    render:function(){
        // console.log(this.state.bg)
        var style={
            backgroundImage:this.state.bg
        };
        return (
        <div style={style} className="skin">
            <div className="list">
                <ul>
                    {this.createLi()}
                </ul>
            </div>
        </div>  
        )
    }
})
ReactDOM.render(<Skin />,document.getElementById('app'))

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

react學習資料二

react學習資料二

props屬性

設置樣式

那么創建虛擬dom的語法中如何設置樣式呢？

react事件

state狀態

來實現一個點擊小圖換大圖背景的小案例

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

react學習資料二

props屬性

設置樣式

那么創建虛擬dom的語法中如何設置樣式呢？

react事件

state狀態

來實現一個點擊小圖換大圖背景的小案例

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频