1.react初始
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('app')
);
</script>
</body>
</html>
引入組件Penel
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Penel extends React.Component {
render(){
return <h1>我的react</h1>
}
}
ReactDOM.render(
<Penel />,
document.getElementById('app')
);
</script>
</body>
</html>
插值表達式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<!-- dataList -->
<script src="./data.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Penel extends React.Component {
setShow(){
var list = [<h1>我的React</h1>,<h1>我的React</h1>,<h1>我的React</h1>]
return list
}
render(){
return (
<div className="penel">
{this.setShow()}
</div>
);
}
}
ReactDOM.render(
<Penel />,
document.getElementById('app')
);
</script>
</body>
</html>
2.示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="./data.js"></script>
<style>
.penel{
border: 1px solid #000;
width: 80%;
}
.title{
margin:0;
padding: 10px;
background: #ccc;
}
p.vip{
color:red;
}
p.message{
color:#aaa;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class List extends React.Component{
render(){
return (<ul>
{this.props.list.map(function(val,index){
return (
<li key={index}>
<p className="vip">{val.username}</p>
<p className="message">{val.message}</p>
</li>
)
})}
</ul>)
}
}
class Item extends React.Component{
render(){
console.log(this.props);
return(<div>
<h2 className="title">{this.props.data.name}</h2>
<List list={this.props.data.list} />
</div>)
}
}
class Penel extends React.Component {
setShow(){
var list = Object.keys(dataList).map(function(val,index){
return <Item data={dataList[val]} key={index}/>
});
return list
}
render(){
return (
<div className="penel">
{this.setShow()}
</div>
);
}
}
ReactDOM.render(
<Penel />,
document.getElementById('app')
);
</script>
</body>
</html>
data.js
let dataList = {
friends:{
name: '朋友',
list:[
{username: '九華彩', message: '什麼叫人脈0',vip:true},
{username: '客如意', message: '什麼叫人脈0',vip:false},
{username: '紫文麗', message: '什麼叫人脈0',vip:false},
{username: '程正思', message: '什麼叫人脈0',vip:true}
]
},
families:{
name: '家人',
list:[
{username: '九華彩1', message: '什麼叫人脈1',vip:true},
{username: '客如意1', message: '什麼叫人脈1',vip:false},
{username: '紫文麗1', message: '什麼叫人脈1',vip:false},
{username: '程正思1', message: '什麼叫人脈1',vip:true}
]
},
colleagues:{
name: '同事',
list:[
{username: '九華彩2', message: '什麼叫人脈2',vip:true},
{username: '客如意2', message: '什麼叫人脈2',vip:false},
{username: '紫文麗2', message: '什麼叫人脈2',vip:false},
{username: '程正思2', message: '什麼叫人脈2',vip:true}
]
},
}
效果
