React atom logo with component tree and JSX code snippet showing Props, State, Components, and Lifecycle concepts

React.js Beginner Notes

Notes from a beginner: React.js

What is it?

A javascript library for building user interfaces

Useful references

Read these (in order):

  1. Getting Started
  2. Tutorial
  3. 9 things every React.js beginner should know (From 24 Jan 2016)

Additional references:

Basics

React.js was created by the folks at Facebook. It is only intended to be used for creating “views”. For “state” and “logic”, consider Redux.js.

Terminology

Component

Components render a data model. Components can be composed of sub-components (child components). For example, to render a table, you could create a table component that is composed of a column heading component and one or more row components. Most components should take data from props and render it. Try to keep components as stateless as possible. Sometimes, however, you need to respond to user input, a server request or the passage of time. In these cases you use state.

Props

Props are a way of passing data from a parent component to a component.

State

Notes from Interactivity and Dynamic UIs

State should contain data that a component’s event handlers may change to trigger a UI update. this.state should only contain the minimal amount of data needed to represent your UI’s state. Do not include the following in state: Computed data, React components, duplicated data from props.

Component methods

These come from this gist.

  • getInitialState() : The object returned by this method sets the initial value of this.state

  • getDefaultProps() : The object returned by this method sets the initial value of this.props.

  • render() : Retuns the jsx markup for a component. Should not update this.state or this.props.

  • mixins[] : An array of objects each of which can augment the lifecycle methods

  • statics : Functions that can e invoked on the component without creating instances.

Lifecycle Methods

  • componentWillMount() : Invoked once before first render.

  • componentDidMount() : Invoked once after the first render.

  • componentWillReceiveProps(nextProps) : Invoked whenever there is a prop change. Called before render.

  • shouldComponentUpdate(nextProps, nextState) : Determines if the render method should run in the subsequent step. Called before a render. Not called for the initial render.

  • componentWillUpdate(nextProps, nextState) : Called immediately before a render.

  • componentDidUpdate(prevProps, prevState) : Called immediately after a render.

  • componentWillUnmount() : Called immediately before a component is unmounted.