react — 基礎(chǔ)語法

第一個(gè)react程序

注意:

  1. 需要在html中引入 react.js、react-dom.js、browser.min.js,按照順序依次引入,后者基于前者
  2. body里面就一個(gè)容器,其他都是虛擬標(biāo)簽
  3. script類型為type=text/babel 支持jsx語法,jsx支持dom和js的混寫;jsx里遇到j(luò)s就需要用{}括起來, jsx只接受Map循環(huán)
  4. 注釋用 {}包裹
  5. 在render中最外層只能有一個(gè)容器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一個(gè)程序</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>

運(yùn)行結(jié)果:


image.png

Map循環(huán)

需要加k值,唯一標(biāo)識(shí),否則盡管會(huì)出效果但也會(huì)報(bào)錯(cuò)

    let arr = ["張三","李四","王五"];
    //最外層只能有一個(gè)容器  jsx只接受Map循環(huán)
    ReactDOM.render(<div>{arr.map(function(v,k){
            return <p key={k}>{v}</p>
    })}</div>
    ,document.getElementById("app"));

image.png

for循環(huán)

將循環(huán)生成的用數(shù)組保存,str不需要加引號(hào),里面的變量用{}來解析

    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"));

運(yùn)行結(jié)果:

image.png

style 樣式

寫法一

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

寫法二
1.第一個(gè){}代表jsx環(huán)境,第二個(gè){}代表對(duì)象
2.class類用className, 因?yàn)閏lass是關(guān)鍵字

// style樣式:
.mydiv{
    color:blue;
}
// js:
ReactDOM.render(<div style={{width:"100px",height:"100px",background:"red" }} className="mydiv">我是測(cè)試div</div>
,document.getElementById("app"));

運(yùn)行結(jié)果:

image.png

this.props.children

this.props 對(duì)象的屬性與組件的屬性一一對(duì)應(yīng),但是有一個(gè)例外,就是 this.props.children 屬性。它表示組件的所有子節(jié)點(diǎn)

//ES6中類的多個(gè)方法不用逗號(hào)隔開
    class Hello extends React.Component{
        render(){
            return <h1>姓名是:{this.props.name}年齡是:{this.props.age}
                {/*外層需要用{}包裹,代表jsx環(huán)境   循環(huán)hello標(biāo)簽的兩個(gè)p標(biāo)簽*/}
                {React.Children.map(this.props.children,function(v,k){
                    //v的外層需要包裹容器
                    return <div>{v}</div>
                })}
            </h1>
        }
        test(){

        }
    }
    ReactDOM.render(<Hello
        name="張三"
        age="20"
    >
        <p>我是第一條數(shù)據(jù)</p>
        <p>我是第二條數(shù)據(jù)</p>
    </Hello>,document.getElementById("app"));

運(yùn)行結(jié)果:

image.png

組件

1.定義一個(gè)組件 組件的首字母大寫
2.通過屬性傳參

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

運(yùn)行結(jié)果:

image.png

多個(gè)組件

1.定義一個(gè)WebView、linkView(a鏈接,網(wǎng)站名字)組件
2.外部傳入網(wǎng)站名字和鏈接地址

   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"))

運(yùn)行結(jié)果:

image.png
image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 原教程內(nèi)容詳見精益 React 學(xué)習(xí)指南,這只是我在學(xué)習(xí)過程中的一些閱讀筆記,個(gè)人覺得該教程講解深入淺出,比目前大...
    leonaxiong閱讀 2,860評(píng)論 1 18
  • HTML模版 之后出現(xiàn)的React代碼嵌套入模版中。 1. Hello world 這段代碼將一個(gè)一級(jí)標(biāo)題插入到指...
    ryanho84閱讀 6,308評(píng)論 0 9
  • 深入JSX date:20170412筆記原文其實(shí)JSX是React.createElement(componen...
    gaoer1938閱讀 8,107評(píng)論 2 35
  • 3. JSX JSX是對(duì)JavaScript語言的一個(gè)擴(kuò)展語法, 用于生產(chǎn)React“元素”,建議在描述UI的時(shí)候...
    pixels閱讀 2,891評(píng)論 0 24
  • 回國(guó)之前一直很喜歡稱土耳其為土雞,因?yàn)楦杏X這個(gè)名字特親切,不過前一陣偶然認(rèn)識(shí)了學(xué)校的幾位土耳其小哥,他們說不喜歡這...
    1c74e5d15fbf閱讀 461評(píng)論 1 0