react入门教程

最新推荐文章于 2024-07-10 10:07:13 发布

wx_lidysun

最新推荐文章于 2024-07-10 10:07:13 发布

阅读量712

点赞数

分类专栏： Javascript 框架插件文章标签： reactjs react

本文链接：https://blog.csdn.net/lidysun/article/details/54913769

版权

Javascript 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

框架插件

14 篇文章 0 订阅

订阅专栏

* demo地址：*
* HTML*

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
<!-- 引用外部JSX文件(text/babel) -->
<script type="text/babel" src="js/JSXscript.js"></script> 
<style>
    *{font-size:14px;}
    #para{color:red;}
</style>
</head>
<body>
    <div id="example"></div>
</body>
</html>

* JS*

// 变量
var content = document.getElementById('example');
var  i = 1;

// 样式对象
var mystyle = {
    fontSize:20,
    padding:'0 15px',
    color:'blue',
    fontWeight:700
}

var background_gray = {
    backgroundColor:'#eee',
    padding:10
}

// 数组
var arr = [
    <h3>arr数组的h3</h3>,
    <h4>arr数组的h4</h4>
]

// 单组件
var HelloMessage = React.createClass({
    render:function(){
        return <p>单个组件 {this.props.name}</p>;
    }
})

// 多组件嵌套
var Website = React.createClass({
    render:function(){
        return (
            <div style={background_gray}>
                <Name name={this.props.name} />
                <Link site={this.props.site} />
            </div>
        )
    }
})

var Name = React.createClass({
    render:function(){
        return <h1>{this.props.name}</h1> 


    }
})

var Link = React.createClass({
    render:function(){
        return <a href={'https://' + this.props.site}>{this.props.site}</a>
    }
})

// State(状态)
var Likeme = React.createClass({
    // 'state'是固定单词
    getInitialState:function(){
        return {key:true}
    },
    changeState:function(event){
        this.setState({key:!this.state.key})
    },
    render:function(){
        var text = this.state.key ? '喜欢' :'讨厌';
        return <p onClick = {this.changeState}>react state: 你<b>{text}</b>我,点击切换</p>
    }
})

//单getDefaultProps
var Defaultprops = React.createClass({
    getDefaultProps:function(){
        return {
            name : '作者'
        }
    },
    render:function(){
        return <p><b>{this.props.name}</b>的基本资料：</p>
    }
})

//多getDefaultProps
var Myinfo = React.createClass({
    getDefaultProps:function(){
        return {
            name : 'lidy',
            sex : 'male',
            email : '820262236',
            age : 27
        }
    },
    render:function(){
        return (
            <div>
                简称：{this.props.name}<br/>
                姓别：{this.props.sex}<br/>
                邮箱：{this.props.email}@<b>qq</b>.com<br/>
                年龄：{this.props.age}
            </div>
        )
    }
})

// setState & replaceState
var Counter = React.createClass({
    getInitialState:function(){
        return {num:0}
    },
    changeNum:function(){
        //合并state
        this.setState({num:this.state.num+1});
        //替换state
        // this.replaceState({num:this.state.num+2});
    },
    render:function(){
        return <p onClick={this.changeNum}>点击次数为：{this.state.num}</p>
    }

})

// setProps & replaceProps --ERROR
/*var Counter2 = React.createClass({
    getDefaultProps:function(){
        return {num:0};
    },
    changeNum:function(){
        this.setProps({num:this.props.num+2})
    },
    render:function(){
        return <p onClick={this.changeNum}>点击次数为：{this.props.num}</p>
    }
})*/

//componentDidMount第一次渲染后调用，客户端
var Opacity = React.createClass({
    getInitialState:function(){
        return {opacity:1}
    },
    componentWillMount:function() {
          // alert(1);
          console.log('Component WILL MOUNT!')
    },
    componentWillReceiveProps:function(newProps) {
        console.log('Component WILL RECEIVE PROPS!')
    },
    componentDidMount :function(){
        console.log('Component DID MOUNT!');
        this.t = setInterval(function(){
            var opacity = this.state.opacity;
            opacity-=0.05;
            if(opacity<0.1){opacity = 1}
            this.setState({opacity:opacity});
        }.bind(this),100)
    },
    render:function(){
        return <p style={{opacity:this.state.opacity,padding:10,backgroundColor:'#eee'}}>Hello {this.props.name}</p>
    }
})

//react Ajax
var UserGist = React.createClass({
    getInitialState:function(){
        return {
            username:'',
            lastGistUrl:''
        }
    },
    componentDidMount:function(){
        // 需引入jquery
        this.serverRequest = $.get(this.props.source,function(result){
            var lastGist = result[0]; //? WHY result[0]
            this.setState({
                username:lastGist.owner.login,
                lastGistUrl:lastGist.html_url
            })
        }.bind(this));
    },
    componentWillUnmount:function(){
        this.serverRequest.abort();
    },
    render:function(){
        return (
            <div style={background_gray}>
                AJAX: 用户{this.state.username}最新的Gist共享地址：
                <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
            </div>
        )
    }
})

//表单
var InputBox = React.createClass({
    getInitialState:function(){
        return {value:'lidysun'}
    },
    changeValue:function(event){
        this.setState({value:event.target.value});
    },
    render:function(){
        var value = this.state.value;
        return (
            <div style={{margin:'10px 0',backgroundColor:'#ddd',padding:10}}>
                <input value={value} onChange={this.changeValue} />
                <p>{value}</p>
            </div>
        )
    }
})

//handleChange updateStateProp子组建更新父组建state
var Inner = React.createClass({
    render:function(){
        return (
            <div>
                <input type="button" value="点击我" onClick={this.props.handleChange} /> 
                子组建更新父组建state
                <p>{this.props.newProp}</p>
            </div>
        )
    }
})

var HellowMessage = React.createClass({
    getInitialState:function(){
        return {value:'hello world!'}
    },
    handleChange:function(){
        this.setState({value:'孙刚同学'})
    },
    render:function(){
        var value = this.state.value;
        return <Inner newProp={value} handleChange={this.handleChange} />
    }
})

//渲染
ReactDOM.render(
    <div>
        <h1>欢迎光临</h1>
        <h2>react by facebook</h2>  
        {/*注释...*/}
        <p id="para">我的id是para{0.5+0.5}</p>
        <p>三元运算符结果：{i==1?'true':'false'}</p>
        <p style={mystyle}>内联样式style</p>
        <div>{arr}</div>
        <div><HelloMessage name='react createClass'/></div>
        <Website name="组件嵌套" site="www.baidu.com" />
        <Likeme />
        <div style={background_gray}>
            <Defaultprops />
            <Myinfo />
        </div>
        <Counter />
        <Opacity name = "world"/>
        <UserGist source="http://api.github.com/users/octocat/gists" />
        <InputBox />
        <HellowMessage />

    </div>,content
)