React Tips and Tricks

Here are a couple of helpful tips and reminders that might save you time when putting together a React app.

• Setting up a project, build the static versions of everything first (just including each render method).

• Single Responsibility Principle - Break up the UI model into components that represent exactly one piece of the data model. Put another way, a component should ideally do one thing. If it ends up growing, break it down into sub-components.

• For smaller apps, it’s okay to build ‘top down’ (parent component to children). For larger apps, build ‘bottom up’ from child components to the point that there is one parent component.

• Use forceUpdate() to tell React to re-render. It triggers the normal lifecycle of methods for each child component.

• Pass a new callback to a child component in the parent’s render() method. You can handle it as a property on the parent, and invoke the callback on the child.

• Don’t forget to .bind(this) after the success/error callbacks of an AJAX call in an event handler.