1、创建组件

1.1注意事项

（1）所有的模板要被一个根节点包含起来；
（2）模板元素不要加引号；
（3）组件名称首字母大写、组件类名称首字母大写；
（4）组件的构造函数中一定要注意 super
子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

constructor(props){
        super(props);  /*用于父子组件传值  固定写法*/
        this.state={
            userinfo:'张三'
        }
}

1.2定义组件

import React from 'react';
class 组件名称 extends React.Component{
    //子类必须在constructor方法中调用supper方法，否则会在新建实例时会报错，这是因为子类没有自己的this对象，而是继承父类的this对象。
    constructor(props){
        super(props);
        this.state={
           msg:'Hello Word!'
        }
    }

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

}
export default 组件名称;

2、绑定数据

通过{}绑定数据

（1）在构造函数中定义数据

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

（2）在模板中获取绑定数据

 {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）模板中调用

<img src={imgUrl} />

4.2通过ES6语法require

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

5、循环数组并渲染数据

（1）构造函数中定义数据

//构造函数
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）模板中调用数据

render(){
    let lNews=this.state.list1.map(function (values,index){
         return <li key={index}>{values}</li>
    })
    return(
        <div>
             {/* 第一种方式，通过定义变量的方式*/}
             <ul>
                {lNews}
            </ul>
            <br/>
            {/* 第二种方式：数组中有标签元素，直接通过this.state调用*/}
            <ul>
                {this.state.list2}
            </ul>
            <br/>
            {/* 第三种方式：调用对象的方式*/}
            <ul>
                {
                    this.state.list3.map(function (value,index) {
                         return(<li key={index}>{value.title}</li>)
                    })
                }
            </ul>
        </div>
    )
}

6、完整DEMO示例

6.1绑定数据、绑定属性

 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方法中调用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'}}>行内样式1</div>
                <div style={this.state.style}>行内样式2</div>
            </div>
        )
    }

}
export default Lesson03;//导出组件

6.2绑定图片、循环数组

import React from 'react';
import imgUrl from '../assets/images/03.jpg';
import "../assets/css/index.css";
//定义组件
class News extends  React.Component{
    //构造函数
    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; //导出组件