tooling
create
npx create-react-app my-app
run
npm run start
build
npm run build
overview
A component takes in parameters, called props for short, and returns a hierarchy of views to display via the render method.
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>
);
}
}
// Example usage: <ShoppingList name="Mark" />
The render method returns a description of what you want to see on the screen.
React takes the description and displays the result. In particular, render
returns a React element, which is a lightweight description of what to render.
Most React developers use a special syntax called jsx which makes these
structures easier to write. The <div /> syntax is transformed at build time to
React.createElement('div'). The example above is equivalent to:
return React.createElement('div', {className: 'shopping-list'},
React.createElement('h1', /* ... h1 children ... */),
React.createElement('ul', /* ... ul children ... */)
);