1、創(chuàng)建組件

1.1注意事項

（1）所有的模板要被一個根節(jié)點包含起來；
（2）模板元素不要加引號；
（3）組件名稱首字母大寫、組件類名稱首字母大寫；
（4）組件的構(gòu)造函數(shù)中一定要注意 super
子類必須在constructor方法中調(diào)用super方法，否則新建實例時會報錯。這是因為子類沒有自己的this對象，而是繼承父類的this對象，然后對其進行加工。如果不調(diào)用super方法，子類就得不到this對象。

constructor(props){
        super(props);  /*用于父子組件傳值  固定寫法*/
        this.state={
            userinfo:'張三'
        }
}

1.2定義組件

import React from 'react';
class 組件名稱 extends React.Component{
    //子類必須在constructor方法中調(diào)用supper方法，否則會在新建實例時會報錯，這是因為子類沒有自己的this對象，而是繼承父類的this對象。
    constructor(props){
        super(props);
        this.state={
           msg:'Hello Word!'
        }
    }

    render(){
        return (
            <div>
                <div>{this.state.msg}</div>
            </div>
        )
    }

}
export default 組件名稱;

2、綁定數(shù)據(jù)

通過{}綁定數(shù)據(jù)

（1）在構(gòu)造函數(shù)中定義數(shù)據(jù)

this.state={
    msg:'Hello Word!'
}

（2）在模板中獲取綁定數(shù)據(jù)

 {this.state.msg}

3、綁定屬性

（1）class 要變成 className
（2）for 要變成 htmlFor
（3）style屬性和以前的寫法有些不一樣

<div style={{'color':this.state.color}}>{this.state.title}</div>

4、引入圖片

4.1通過import的方式引入圖片

（1）引入圖片

import imgUrl from '../assets/images/03.jpg'; 

（2）模板中調(diào)用

<img src={imgUrl} />

4.2通過ES6語法require

<img src={require("../assets/images/03.jpg")} />

5、循環(huán)數(shù)組并渲染數(shù)據(jù)

（1）構(gòu)造函數(shù)中定義數(shù)據(jù)

//構(gòu)造函數(shù)
constructor(props){
    super(props);
    this.state={
        list1:['學習React.js','學習Vue.js','學習SpringBoot'],
        list2:[<li key='1'>學習SpringMVC</li>,<li key='2'>學習SpringCloud</li>,<li key='3'>學習SpringBoot</li>],
        list3:[
            {title:'時政新聞'},
            {title:'娛樂新聞'},
           {title:'軍事新聞'}
        ]
    }
}

（2）模板中調(diào)用數(shù)據(jù)

render(){
    let lNews=this.state.list1.map(function (values,index){
         return <li key={index}>{values}</li>
    })
    return(
        <div>
             {/* 第一種方式，通過定義變量的方式*/}
             <ul>
                {lNews}
            </ul>
            <br/>
            {/* 第二種方式：數(shù)組中有標簽元素，直接通過this.state調(diào)用*/}
            <ul>
                {this.state.list2}
            </ul>
            <br/>
            {/* 第三種方式：調(diào)用對象的方式*/}
            <ul>
                {
                    this.state.list3.map(function (value,index) {
                         return(<li key={index}>{value.title}</li>)
                    })
                }
            </ul>
        </div>
    )
}

6、完整DEMO示例

6.1綁定數(shù)據(jù)、綁定屬性

 import React from 'react';
import '../assets/css/index.css';

/*
* 綁定屬性要注意
*   （1）class換成className
*   （2）for要換成htmlFor
*    (3) style屬性和以前的寫法有些不一樣
          <div style={{'color':'blue'}}>{this.state.title}</div>
        <div style={{'color':this.state.color}}>{this.state.title}</div>
* */
class Lesson03 extends React.Component{

    //子類必須在constructor方法中調(diào)用supper方法，否則會在新建實例時會報錯，這是因為子類沒有自己的this對象，而是繼承父類的this對象。
    constructor(props){
        super(props);
        this.state={
           msg:'Hello Word!',
           title:'我是一個title',
           color:'divred',//定義樣式
           style:{
               color:'red',
               fontSize:'18px'
            }
        }
    }

    render(){
        return (
            <div>
                <div>{this.state.msg}</div>
                <div title={this.state.title}>我是一個DIV</div>
                <div className="divred">我是一個紅色的DIV</div>
                <div className={this.state.color}>我是一個紅色的DIV2</div>
                <div style={{color:'red'}}>行內(nèi)樣式1</div>
                <div style={this.state.style}>行內(nèi)樣式2</div>
            </div>
        )
    }

}
export default Lesson03;//導出組件

6.2綁定圖片、循環(huán)數(shù)組

import React from 'react';
import imgUrl from '../assets/images/03.jpg';
import "../assets/css/index.css";
//定義組件
class News extends  React.Component{
    //構(gòu)造函數(shù)
    constructor(props){
        super(props);
        this.state={
            msg:'你好世界，我是一個新聞組件',
            imgAlt:"這是一個圖片",
            list:['學習React.js','學習Vue.js','學習SpringBoot'],
            list2:[<li key='1'>學習SpringMVC</li>,<li key='2'>學習SpringCloud</li>,<li key='3'>學習SpringBoot</li>],
            list3:[
                {title:'時政新聞'},
                {title:'娛樂新聞'},
                {title:'軍事新聞'}
            ]
        }
    }

    render(){
        let lNews=this.state.list.map(function (values,index){
             return <li key={index}>{values}</li>
        })
        return(
            <div>
                <div>{this.state.msg}</div>

                {/* 第一種方式：通過import的方式引入*/}
                <img src={imgUrl} title={this.state.imgAlt} style={{'width':'500px'}}/>

                {/* 第二種方式：通過ES6的語法方式進行圖片的引入 require */}
                <img src={require("../assets/images/03.jpg")} title={this.state.imgAlt} style={{'width':'500px'}}/>
                <br/>
                    <ul>
                        {lNews}
                    </ul>
                <br/>
                <ul>
                    {this.state.list2}
                </ul>
                <br/>
                <ul>
                    {
                        this.state.list3.map(function (value,index) {
                             return(<li key={index}>{value.title}</li>)
                        })
                    }
                </ul>
            </div>
        )

    }
}
export default  News; //導出組件