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; //导出组件
