React

Dev Environment Setup

Key Concepts

JSX

Elements

Components

  • Official React Tutorial: Components and Props.
    • Covers
      • Function and Class Components
      • Rendering a Component
      • Composing Components
      • Extracting Components
      • Props are Read-Only
    • Some Key Information
      • “Always start component names with a letter.”
      • “We recommend naming props from the component’s own point of view rather than the context in which it is being used.”
      • “All React components must act like pure functions with respect to their props.”

Props

State

  • Official React Tutorial: State and Lifecycle.
    • Covers
      • Converting a Function to a Class (in Five Steps)
      • Adding Local State to a Class (in Three Steps)
    • Some Key Information
      • “State is similar to props, but it is private and fully controlled by the component.”
      • “The render method will be called each time an update happens, but as long as we render…into the same DOM node, only a single instance of the…class will be used.”
      • “Class components should always call the base constructor with props.”

Lifecycle

  • Official React Tutorial: State and Lifecycle.
    • Covers
      • Adding Lifecycle Methods to a Class
        • componentDidMount()
        • componentWillUnmount()
      • Using State Correctly
        • Do Not Modify State Directly
        • State Updates May Be Asynchronous
        • State Updates Are Merged
      • The Data Flows Down
    • Some Key Information
      • “The componentDidMount() method runs after the component output has been render to the DOM.”
      • “While this.props is set up by React itself and this.state has a special meaning, you are free to add additional fields to the class manually if you need to store something that doesn’t participate in the data flow (like a timer ID).”
      • “If the…component is ever removed from the DOM, React calls the componentWillUnmount lifecycle method…”
      • “Do not modify state directly..instead use setState()“.
      • “The only place where you can assign this.state is the constructor.”
      • “State updates may be asynchronous…React may batch multiple setState() calls into a single update for performance.”
      • “Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.”
      • “[Instead] use a second form of setState() that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument…”
      • “State updates are merged…when you call setState(), React merges the object you provide into the current state.”
      • “[Y]our state may contain several independent variables…you can update them independently with separate setState() calls…The merging is shallow…” (that is, it does not replace the entire State, only the specified portions of the state).
      • “Neither parent nor child components can know if a certain component is stateful or stateless, and they shouldn’t care whether it is defined as a function or a class…This is why state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it.”
      • “A component may choose to pass its state down as props to its child components…”
      • “Any state is always owned by some specific component, and any data or UI derived from that state can only affect components ‘below’ them in the tree.”

Events

  • Covers
    • Handling Events
    • Passing Arguments to Event Handlers
  • Some Key Information
  • “React events are named using camelCase, rather than lowercase.”
  • “With JSX you pass a function as the event handler, rather than a string.”
  • “[Y]ou cannot return false to prevent default behavior in React. You must call preventDefault explicitly.”
  • “When using React, you generally don’t need to call addEventListener to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.”
  • “When you defined a component using an ES6 class, a common pattern is for an event handler to be a method on the class.”
  • “In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.”
    • this.handeClick = this.handleClick.bind(this)
  • “Generally, if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.”
  • Alternatively:
    • (experimental) “use class fields to correctly bind callbacks”
    • “use an arrow function in the callback” (not recommended)
  • “Inside a loop it is common to want to pass an extra parameter to an event handler.”
    • Can be accomplishing using arrow functions or Function.prototype.bind.

Conditional Rendering

  • Covers
    • Element Variables
    • Inline If with Logical && Operator
    • Inline If-Else with Conditional Operator
    • Preventing Component from Rendering
  • Key Thoughts
  • “You may embed any expressions in JSX by wrapping them in curly braces.”