1、所有的模板要被一个根节点包含起来
2、模板元素不要加引号
3、{}绑定数据
4、绑定属性注意：
class 要变成 className
for 要变成 htmlFor
style属性和以前的写法有些不一样
<div style={{‘color‘:‘blue‘}}>{this.state.title}</div>
<div style={{‘color‘:this.state.color}}>{this.state.title}</div>
5、循环数据要加key
6、组件的构造函数中一定要注意 super
子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象
constructor(props){
super(props); /*用于父子组件传值 固定写法*/
this.state={
userinfo:‘张三‘
}
}
7、组件名称首字母大写、组件类名称首字母大写
demo：
import React from ‘react‘;
import ‘../assets/css/index.css‘;
/*
react绑定属性注意：
class要换成className
for要换成 htmlFor
style:
<div style={{"color":‘red‘}}>我是一个红的的 div 行内样式</div>
其他的属性和以前写法是一样的
*/
class Home extends React.Component{
// 子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象
constructor(props){
super(props); //固定写法
this.state={
msg:‘我是一个home组件‘,
title:‘我是一个title‘,
color:‘red‘,
style:{
color:‘red‘,
fontSize:‘40px‘
}
}
}
render(){
return(
<div>
<h2>{this.state.msg}</h2>
<div title="1111">我是一个div</div>
<br />
<div title={this.state.title}>我是一个div</div>
<br />
<div id="box" className=‘red‘>我是一个红的的div---id</div>
<br />
<div className={this.state.color}>我是一个红的的div 1111</div>
<br />
<label htmlFor="name">姓名</label>
<input id="name" />
<br />
<br />
<div style={{"color":‘red‘}}>我是一个红的的 div 行内样式</div>
<br />
<br />
<div style={this.state.style}>我是一个红的的 div 行内样式</div>
</div>
)
}
}
export default Home;
import React from ‘react‘;
import ‘../assets/css/index.css‘;
import logo from ‘../assets/images/1.jpg‘;
class News extends React.Component{
constructor(props){
super(props);
this.state={
msg:‘新闻‘,
list:[‘11111111111‘,‘222222222222‘,‘3333333333333‘],
list2:[<h2 key=‘1‘>我是一个h2</h2>,<h2 key=‘2‘>我是一个h2</h2>],
list3:[
{title:"新闻11111111"},
{title:"新闻22222"},
{title:"新闻33333333"},
{title:"新闻444444444"}
]
}
}
render(){
let listResult=this.state.list.map(function(value,key){
return <li key={key}>{value}</li>
})
return(
<div className="news">
{this.state.msg}
<img src={logo} />
<img src={require(‘../assets/images/1.jpg‘)} />
<img src="https://www.baidu.com/img/xinshouye_353af22a7f305e1fb6cfa259394dea9b.png" />
<hr/>
{this.state.list2}
<hr/>
<ul>
{listResult}
</ul>
<hr/>
<ul>
{
this.state.list3.map(function(value,key){
return (<li key={key}>{value.title}</li>);
})
}
</ul>
</div>
)
}
}
export default News;
app.js引用组件运行、测试即可
React 绑定属性( 绑定class 绑定style)、引入图片和循环数组渲染数据
原文：https://www.cnblogs.com/loaderman/p/11550721.html