react 入门（二）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Basic Example</title>
    <!-- react.js是react的核心库-->
    <script src="./build/react.js" charset="utf-8"></script>
    <!-- react-dom.js提供与dom有关的功能-->
    <script src="./build/react-dom.js" charset="utf-8"></script>
    <!-- browser.min.js将JSX语法转换成javascript语法，然后才能在浏览器上执行-->
    <script src="./build/browser.min.js" charset="utf-8"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script>-->

    <style type="text/css">
        .pStyle{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!-- react渲染的模板内容会插入到这个DOM节点中，作为一个容器-->
    <div id="container">
    </div>
</body>
<!-- 在react开发中，使用JSX，跟JavaScript语法不兼容，在使用JSX的地方，药设置type="text/babel"-->
<!-- babel转换编译器，ES6转换成可以在浏览器中运行的代码-->
<script type="text/babel">
    /*此处编辑react代码*/
    /*
    003.创建组件类
    创建一个组件类，用于输出"basic react native 变量"
    1.React中创建的组件类以大写字母开头，驼峰命名法
    2.React中使用React.createClass方法创建一个组件类
    3.每个组件类都必须实现自己的render方法，输出定义好的组件模板，返回值：null、false、组件模板
    4.组件类只能包含一个顶层标签
    */
    /*创建组件类React.createClass，参数一般都要有render方法*/
    /*var HelloMessage = React.createClass({
        render: function () {
            return <h1>basic react native 变量</h1>
        }
    });*/
    /*渲染，ReactDOM.render三个参数：渲染内容、插入到哪个DOM节点、渲染后回馈*/
    /*ReactDOM.render(
        <HelloMessage />,
        document.getElementById("container")
    );*/

    /*
    004.React设置组件的样式
    第一种：内敛样式
    第二种：对象样式
    第三种：选择器样式
    在React中和在HTML5中设置样式，书写格式有区别
    1.html5以;结尾  React以,结尾
    2.html5中key和value都不加引号 React中属于JavaScript对象，key的名字不能出现“-”，需要使用驼峰命名法，如果value为字符串，需要加引号
    3.html5中，value如果是数字，需要带单位 React中需要带单位
    注意：在React中使用选择器样式设置组件样式时，属性名class要用className代替，for需要用htmlFor代替
    */
    /*
    var hStyle = {
        backgroundColor:"yellow",
        color:"red"
    }
    var ShowMessage = React.createClass({
        render:function(){
            return (
                <div style={{backgroundColor:"yellow",borderWidth:5,borderColor:"black",borderStyle:"solid"}}>
                    div内敛样式
                    <h1 style={hStyle}>{this.props.firstName}</h1>
                    <p className="pStyle">{this.props.secondName}</p>
                </div>
            );
        }
    });
    ReactDOM.render(
        <ShowMessage firstName="我是h1对象样式" secondName = "我是p选择器样式"/>,
        document.getElementById("container")
    );*/
    /*
    005.复合组件
    组合组件，创建多个组件合成一个组件
    定义一个组件WebShow输出网站名称和网址，其中网站名称使用WebName组件，网址使用WebLink组件
    */
    /*
    var WebName = React.createClass({
        render:function(){
            return <h1>百度</h1>;
        }
    });
    var WebLink = React.createClass({
        render:function(){
            return <a href="http://www.baidu.com">http://www.baidu.com</a>;
        }
    });
    var WebShow = React.createClass({
        render:function(){
            return (
                <div>
                    <WebName />
                    <WebLink />
                </div>
            );
        }
    });
    ReactDOM.render(
        <WebShow />,
        document.getElementById("container")
    );*/
    /*
    006.props
    props是组件自身的属性，一般用于嵌套的内外层组件中，负责传递信息，一般是由父层组件传递给子组件
    props对象中的属性与组件的属性一一对应(children例外)，不要直接去修改props中属性的值：
    this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点。

    ...this.props 是props提供的语法糖，可以将父组件中的全部属性全部复制给子组件
    例如：定义一个组件Link（父），其中只包含一个<a>（子），我们不给<a>设置任何属性，所有属性从父组件中复制得到

    this.props.children 组件的所有子节点

    组件类的属性验证 propTypes
    用于验证组件实例的属性是否符合要求

    设置组件属性的默认值，通过实现组件的getDefaultProps方法，对属性设置默认值
    */
    /*
    var WebName = React.createClass({
        render:function(){
            return <h1>{this.props.webName}</h1>;
        }
    });
    var WebLink = React.createClass({
        render:function(){
            return <a href={this.props.webLink}>{this.props.webLink}</a>;
        }
    });
    var WebShow = React.createClass({
        render:function(){
            return (
                <div>
                    <WebName webName={this.props.wName}/>
                    <WebLink webLink={this.props.wLink}/>
                </div>
            );
        }
    });
    ReactDOM.render(
        <WebShow wName="百度" wLink="http://www.baidu.com"/>,
        document.getElementById("container")
    );*/
    /*
    var Link = React.createClass({
        render:function(){
            return <a {...this.props}>{this.props.name}</a>;
        }
    });
    ReactDOM.render(
        <Link name="百度" href="http://www.baidu.com"/>,
        document.getElementById("container")
    );
    */
    /*
                        列表项数量和内容都不确定，在创建模板时才能确定
                        利用this.props.children从父组件获取需要展示的列表项内容
                        获取到列表项内容后，需要遍历children，逐项进行设置
                        使用React.Children.map方法
                        返回值：数组对象，这里数组中的元素是<li>
                        //child是遍历得到的父组件的子节点
    */


    var ListComponent = React.createClass({
        render:function(){
            return (
                <ul>
                    React.Children.map(this.props.children,function(child){
                        return <li>{child}</li>;
                    });
                </ul>
            );
        }
    });
    ReactDOM.render(
        (
            <ListComponent>
                <h1>百度</h1>
                <a href="http://www.baidu.com">http://www.baidu.com</a>
            </ListComponent>
        ),
        document.getElementById("container")
    );


    /*
    var ListComponent = React.createClass({
        propTypes:{
            //验证title的数据类型必须是字符串
            title:React.PropTypes.string.isRequired
        },
        render:function(){
            return <h1>{this.props.title}</h1>;
        }
    });
    ReactDOM.render(
        (
            <ListComponent title="组件类属性验证机制">
            </ListComponent>
        ),
        document.getElementById("container")
    );
    */

    /*
    var ListComponent = React.createClass({
        getDefaultProps:function(){
            //设置属性默认值
            return {title:"设置属性默认值"};
        },
        render:function(){
            return <h1>{this.props.title}</h1>;
        }
    });
    ReactDOM.render(
        (
            <ListComponent>
            </ListComponent>
        ),
        document.getElementById("container")
    );
    */

</script>
</html>
posted @ 2017-11-05 20:47 我将枕中记忆抹去任岁月浮光掠影阅读(205) 评论(0) 编辑收藏举报
刷新页面返回顶部
我将枕中记忆抹去任岁月浮光掠影

react 入门（二）

公告
