extracts from React’s ‘Quick Start’.


thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs

Components accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

components can be defined using plain function or ES6 class:

// functional component
function Welcome (props) {
  return <h1>Hello, {}</h1>;

// class component
class Welcome extends React.Component {
  render () {
    return <h1>Hello, {}</h1>;

elements can also represent user-defined components:

const element = <Welcome name="Sara" />;

When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object called “props”.

Components must return a single root element.

if a part of your UI is used several times (Button, Panel) or is complex enough on its own (App, Comment), it is a good candidate to be a reusable component.

All React components must act like pure functions with respect to their props.

class components have additional features: local state and lifecycle hooks.