React 16 Docs Notes

General Recommendations

  • Prefer composition over inheritance, e.g. create basic components, then wrap them in a more specific one. For example create a Dialog component, and then put that in a WarningDialog component.
  • We strongly recommend against creating your own base component classes. favor composition over inheritance
  • all DOM properties and attributes (including event handlers) should be camelCased with the exception of exception is aria-* and data-*
  • dangerouslySetInnerHTML is React's replacement for using innerHTML in the browser DOM.
  • File structure suggestion:


  • Return a loading HTML JSX for async props
  • You can create a .env file declaring a constant of NODE_PATH pointing to where your src folder is, so that your import statements are absolute, e.g. import components/App.js instead of import ./components/App.js
  • Components must start with a capital letter
  • Variables with values starting in lower case letters are treated as DOM elements
  • Components declared as functions do not have states
  • Components declared to inherit from React.Component have state
  • Only use this.state.key='' in the constructor, else use this.setState()
  • Component props and state flow down
  • events are camelCased
  • event.preventDefault must be called explicitly
  • JSX expressions are wrapped in curly braces
  • Return null in your component if you don't want it to be rendered.
  • When printing collections in JSX, use your object's id first, and the array index as last resort
  • input form element values controlled by React are called controlled components
  • Each JSX element is just syntactic sugar for calling React.createElement(component, props, ...children)
  • Avoid using refs for anything that can be done declaratively.
  • Use controlled components in most cases to implement forms. A form element becomes "controlled" if you set its value via a prop

State and Props

  • Function components do not have state, only class components do
  • States are initialized in the constructor. It is set like so this.state = {key: VALUE}. Outside of the constructor, state is set using this.setState({key: VALUE}).
  • Controlled components are components where the value is set from the state <input value="this.state.key" onChange="this.onValueChange" />
  • Sharing state between siblings require the state to be lifted up to the parent
  • If you pass no value for a prop, it defaults to true.
  • a render prop is a function prop that a component uses to know what to render. <Mouse attr={(mouse) => ( <Cat mouse={mouse} /> )} />
  • If you don't initialize state and you don't bind methods, you don't need to implement a constructor for your React component.
  • You should not call setState() in the constructor(), use componentDidMount() instead
  • Think of setState() as a request rather than an immediate command to update the component.
  • Calls to setState are asynchronous - don't rely on this.state to reflect the new value immediately after calling setState.
  • Pass an updater function instead of an object if you need to compute values based on the current state e.g. this.setState((prevState) => { ... });

Events and Lifecyle

  • Event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser’s native event
  • Event callbacks that aren't in a function format and depends on the component, needs to call .bind(this)
  • Populate data with AJAX calls in the componentDidMount. This is so you can use setState to update your component when the data is retrieved.
  • Lifecycle
  • componentWillUpdate and componentWillReceiveProps are deprecated
  • use componentDidCatch to capture errors during rendering
  • componentDidMount is a good place to set up subscriptions, then unsubscribe from componentWillUnmount

Routing (react-router)

  • React Router comes bundled with history package.
  • browserHistory uses pushState, hashHistory uses hashes for the url