Learn the fundamentals of React, including simple and class components, state, props, and submitting form data.
Extracting Components
<div id="root"></div> |
function formatDate(date) { | |
return date.toLocaleDateString(); | |
} | |
function Comment(props) { | |
return ( | |
<div className="Comment"> | |
<div className="UserInfo"> | |
<img className="Avatar" | |
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: 'Hello Kitty', | |
avatarUrl: 'http://placekitten.com/g/64/64' | |
} | |
}; | |
ReactDOM.render( | |
<Comment | |
date={comment.date} | |
text={comment.text} | |
author={comment.author} />, | |
document.getElementById("root") | |
); |
<script src="https://unpkg.com/react/umd/react.development.js"></script> | |
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> |