核心提示：className for clearly understandhtmlheadtitleDocument/titlescript src=../react.js/scriptscript src=....
className for clearly understand
<html>
<head>
<title>Document</title>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
</head>
<body>
<p id="demo"></p>
<script type="text/babel">
function formatDate(date) {
return date.toLocaleDateString()
}
function Comment(props) {
return (
<p className="Comment">
<p className="UserInfo">
<img className="Avater" src={props.author.avatarUrl} alt={props.author.name} />
<p className="UserInfo-name">{props.author.name}</p>
</p>
<p className="Comment-text">
{props.text}
</p>
<p className="Comment-date">
{formatDate(props.date)}
</p>
</p>
)
}
const comment = {
date: new Date(),
text: 'I hope you enjoy learning React',
author: {
name: 'wlh',
avatarUrl: 'https://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="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
</head>
<body>
<p id="demo"></p>
<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 (
<p className="UserInfo">
<Avater user={props.user} />
<p className="UserInfo-name">{props.user.name}</p>
</p>
)
}
function Comment(props) {
return (
<p className="Comment">
<UserInfo user={props.author} />
<p className="Comment-text">
{props.text}
</p>
<p className="Comment-date">
{formatDate(props.date)}
</p>
</p>
)
}
const comment = {
date: new Date(),
text: 'I hope you enjoy learning React',
author: {
name: 'wlh',
avatarUrl: 'https://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>
