第一个react程序

注意：

需要在html中引入 react.js、react-dom.js、browser.min.js，按照顺序依次引入，后者基于前者

body里面就一个容器，其他都是虚拟标签

script类型为type=text/babel 支持jsx语法，jsx支持dom和js的混写；jsx里遇到js就需要用{}括起来， jsx只接受Map循环

注释用 {}包裹

在render中最外层只能有一个容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个程序</title>
    <!--引入文件必须按照以下顺序-->
    <script type="text/javascript" src="react.js"></script>
    <script type="text/javascript" src="react-dom.js"></script>
    <script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
    <div id="app">
    </div>
</body>
<script type="text/babel">
    var str = "我是字符串";
    ReactDOM.render(<h1>{str} {array} hello word /*我是假注释*/{/*我是注释*/}</h1>
    ,document.getElementById("app"));
</script>
</html>

运行结果：

image.png

Map循环

需要加k值，唯一标识，否则尽管会出效果但也会报错

    let arr = ["张三","李四","王五"];
    //最外层只能有一个容器  jsx只接受Map循环
    ReactDOM.render(<div>{arr.map(function(v,k){
            return <p key={k}>{v}</p>
    })}</div>
    ,document.getElementById("app"));

image.png

for循环

将循环生成的用数组保存，str不需要加引号，里面的变量用{}来解析

    let obj = [{name:"张三",age:19},{name:"李四",age:12},{name:"王五",age:20}];
    var html = [];
    for(var i=0;i<obj.length;i++){
        var str = <p key={i}>姓名是{obj[i].name};年龄是{obj[i].age}</p>
        html.push(str);
    }
    ReactDOM.render(<div>{html}</div>
        ,document.getElementById("app"));

运行结果：

image.png

style 样式

写法一

var mystyle = {width:"100px",height:"100px",background:"red" };
ReactDOM.render(<div style={mystyle}>我是测试div</div>,document.getElementById("app"));

写法二
1.第一个{}代表jsx环境，第二个{}代表对象
2.class类用className, 因为class是关键字

// style样式：
.mydiv{
    color:blue;
}
// js:
ReactDOM.render(<div style={{width:"100px",height:"100px",background:"red" }} className="mydiv">我是测试div</div>
,document.getElementById("app"));

运行结果：

image.png

this.props.children

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点

//ES6中类的多个方法不用逗号隔开
    class Hello extends React.Component{
        render(){
            return <h1>姓名是：{this.props.name}年龄是：{this.props.age}
                {/*外层需要用{}包裹，代表jsx环境   循环hello标签的两个p标签*/}
                {React.Children.map(this.props.children,function(v,k){
                    //v的外层需要包裹容器
                    return <div>{v}</div>
                })}
            </h1>
        }
        test(){

        }
    }
    ReactDOM.render(<Hello
        name="张三"
        age="20"
    >
        <p>我是第一条数据</p>
        <p>我是第二条数据</p>
    </Hello>,document.getElementById("app"));

运行结果：

image.png

组件

1.定义一个组件组件的首字母大写
2.通过属性传参

var Hello = React.createClass({
    render:function(){
        return <div>我是HELLO组件,姓名是：{this.props.name}</div>;
    }
})
ReactDOM.render(<Hello name="张三"/>,document.getElementById("app"))

运行结果：

image.png

多个组件

1.定义一个WebView、linkView(a链接，网站名字)组件
2.外部传入网站名字和链接地址

   var WebView = React.createClass({
        render:function(){
            return <div><LinkView {...this.props}/></div>
        }
    })

    var LinkView = React.createClass({
        render(){
            return <div>链接地址：<a href={this.props.link}>{this.props.webName}</a></div>
        }
    })
    ReactDOM.render(<WebView webName="百度" link="https://www.baidu.com/"></WebView>
    ,document.getElementById("app"))