Basics

  • Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
  • Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called props) and return React elements describing what should appear on the screen.
  • React is all about one-way data flow down the component hierarchy.

Defining a component

JS function


    function Welcome(props) { return <h1>Hello, {props.name}</h1>; }

ES6 class


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

Rendering an Element

Passing a user-defined component


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

    function Welcome(props) { return <h1>Hello, {props.name}</h1>; }

    const element = <Welcome name="Sara" />;
    ReactDOM.render( element, document.getElementById('root') );

Nested Components


    function Avatar(props) {
        return ( <img className="Avatar" src={props.user.avatarUrl} alt={props.user.name} /> );
    }

    function UserInfo(props) {
        return ( <div className="UserInfo"> <Avatar user={props.user} /> <div className="UserInfo-name"> {props.user.name} </div> </div> );
    }

    function Comment(props) {
      return (
          <div className="Comment">
              <UserInfo user={props.author} />
              <div className="Comment-text"> {props.text} </div>
              <div className="Comment-date"> {formatDate(props.date)} </div>
          </div>
      );
    }

State vs Props

props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function).

operlaps:
  • Both props and state are plain JS objects
  • Both props and state changes trigger a render update
  • Both props and state are deterministic. If your Component generates different outputs for the same combination of props and state then you're doing something wrong.

If a Component needs to alter one of its attributes at some point in time, that attribute should be part of its state, otherwise it should just be a prop for that Component.
props state
Can get initial value from parent Component? Yes Yes
Can be changed by parent Component? Yes No
Can set default values inside Component?* Yes Yes
Can change inside Component? No Yes
Can set initial value for child Components? Yes Yes
Can change in child Components? Yes No
// Note that both props and state initial values received from parents override default values defined inside a Component.
// React treats components starting with lowercase letters as DOM tags. For example, <div /> represents an HTML div tag, but <Welcome /> represents a component and requires Welcome to be in scope.
// Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail.
// All React components must act like pure functions (ie should not change its own props) with respect to their props.