className for clearly understand
<html>
<head>
<title>Document</title>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
</head>
<body>
<div id="demo"></div>
<script type="text/babel">
function formatDate(date) {
return date.toLocaleDateString()
}
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avater" src={props.author.avatarUrl} alt={props.author.name} />
<div className="UserInfo-name">{props.author.name}</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
)
}
const comment = {
date: new Date(),
text: 'I hope you enjoy learning React',
author: {
name: 'wlh',
avatarUrl: 'http://placekitten.com/g/64/64'
}
}
const element = <Comment author={comment.author} text={comment.text} date={comment.date} />
ReactDOM.render(
element,
document.getElementById('demo')
)
</script>
</body>
</html>
extract: complex
name :own point of view
<html>
<head>
<title>Document</title>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
</head>
<body>
<div id="demo"></div>
<script type="text/babel">
function formatDate(date) {
return date.toLocaleDateString()
}
function Avater(props) {
return <img className="Avater" src={props.user.avatarUrl} alt={props.user.name} />
}
function UserInfo(props) {
return (
<div className="UserInfo">
<Avater user={props.user} />
<div className="UserInfo-name">{props.user.name}</div>
</div>
)
}
function Comment(props) {
return (
<div className="Comment">
<UserInfo user={props.author} />
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
)
}
const comment = {
date: new Date(),
text: 'I hope you enjoy learning React',
author: {
name: 'wlh',
avatarUrl: 'http://placekitten.com/g/64/64'
}
}
const element = <Comment author={comment.author} text={comment.text} date={comment.date} />
ReactDOM.render(
element,
document.getElementById('demo')
)
</script>
</body>
</html>