react — 基础语法

第一个react程序

注意：

1. 需要在html中引入 react.js、react-dom.js、browser.min.js，按照顺序依次引入，后者基于前者
2. body里面就一个容器，其他都是虚拟标签
3. script类型为type=text/babel 支持jsx语法，jsx支持dom和js的混写；jsx里遇到js就需要用{}括起来， jsx只接受Map循环
4. 注释用 {}包裹
5. 在render中最外层只能有一个容器

运行结果：

image.png

Map循环

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

    let arr = ["张三","李四","王五"];
    //最外层只能有一个容器  jsx只接受Map循环
    ReactDOM.render(
{arr.map(function(v,k){
            return 
{v}
    })}
    ,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[i].name};年龄是{obj[i].age}

        html.push(str);
    }
    ReactDOM.render(
{html}
        ,document.getElementById("app"));

运行结果：

image.png

style 样式

写法一

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

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

// style样式：
.mydiv{
    color:blue;
}
// js:
ReactDOM.render(
我是测试div
,document.getElementById("app"));

运行结果：

image.png

this.props.children

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

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

        }
    }
    ReactDOM.render(
        
我是第一条数据
        
我是第二条数据
    ,document.getElementById("app"));

运行结果：

image.png

组件

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

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

运行结果：

image.png

多个组件

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

   var WebView = React.createClass({
        render:function(){
            return 

        }
    })

    var LinkView = React.createClass({
        render(){
            return 
链接地址：{this.props.webName}
        }
    })
    ReactDOM.render(
    ,document.getElementById("app"))

运行结果：

image.png

image.png