Plain Javascript
reactJS
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
Congrats, you just learned 30% of reactJS.
Example wireframe
BOX ALL THE THINGS!
Your component is going to appear on the screen very shortly. That chunky render function, with all its beautifully off-putting JSX, is about to be called. What do you want to do?
Now we’re talking. Your component is out there, mounted and ready to be used. Now what?
Our component was doing just fine, when all of a sudden a stream of new props arrive to mess things up.
It’s almost over.
Your component is going to go away. Maybe forever. It’s very sad.