React

Source

React Tutorial

React Component Type

• takes in parameters, props, and return a hierarchy of views to display via Render method
• component can store state, which shoule be considered as private member set by this.setState({<state name>: <state value>})
• when changing state, it’s best to create a copy then change on the copy - Immutability

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" />

Function Component

• only contain Render method and don’t have state

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

React Element

• a JavaScript object that can store in a variable or pass around in the program

Render

Return a description of waht you want to see on the screen

• return a React Element

Key of React List Items

• each list item, e.g., “
• ” has a id key, so when re-rendering, React cal tell which component needs to be created, destroyed or just moved to a new position
• Keys do not need to be globally unique; they only need to be unique between components and their siblings.