render()
class Profile extends React.Component {
userData = () => {
return data || fetchDataFromDatabase();
}
render() {
<Header>
<Profile
name={userData.name}
interests={userData.interests}
description={userData.description}
/>
<Activity />
<Contact />
</Header>
}
}
index.js
initiates the components tree from the top level<html>
<body>
<div id="root"/>
</body>
<script>
ReactDom.render(<Profile />,
document.getElementById('root')
)
</script>
</html>
class ProfileList extends React.Component {
render() {
<Header>
[
<Profile userId="One"/>,
<Profile userId="Two"/>,
<Profile userId="Three"/>
]
</Header>
}
}
class Comment extends React.Component {
render () {
return (
<li>
<p>User: {this.props.user}</p>
<p>Comment: {this.props.content}</p>
</li>
)
}
}
class CommentList extends React.Component {
render() {
const comments = [
{ user: 'Joshua', content: 'Components are my fave!' },
{ user: 'Ada', content: 'Yes they make life easy' },
{ user: 'Alex', content: 'Loved them for years' }
];
const commentComponents = forms.map((comment, index) => {
return <Comment user={ comment.user } content={ comment.content }/>
});
return (
<div className="comments">
<h2>Comment List</h2>
<ul>
{ commentComponents }
</ul>
</div>
)
}
}
<html>
<body>
<div id="root"/>
</body>
<script>
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
// highlight-next-line
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
</script>
</html>
See the Pen React Clock Example by Joshua Burke (@Dangeranger) on CodePen.
http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
/