Stateless React Components
Use stateless React components. Counteract a common problem, where a feature or bug comes from anomalous state. Due in part to state being a combination of local data, DOM, and view, and other views/models. Having multiple sources of data can be overwhelming for developers. It becomes necessary to keep the whole system in mind when working on a local feature. Use stateless components to reduce the proliferation of application state across domains.
Immutable State (Immutable.js)
Rely on immutable state, provided to components. Prevent dangling variable references, causing memory leaks and unstable applications. Avoid anomalous event handlers and unpredictable behavior.
Avoid dependency between view components. Views should accept any conforming component, function, or data. The interface should be simple and made of primitives. Rely on strings, numbers, arrays as much as possible. Be defensive about inputs, and avoid dependency on specific components.
Component views become tightly coupled as they rely on each other for data and functionality. Instead, rely on data outside of view components. Rely on functions outside of view components. Benefit in two ways. View components are easy to understand, and tend more to serve a single purpose. View components are easily tested.
Avoid DOM Manipulation
Avoid direct interactions with the DOM. Direct DOM manipulation is slow, and requires extra effort to test, and debug. Component views become tightly coupled as they rely on the DOM for events and data interchange. Keeping data in sync can become very difficult. Instead, rely on data provided to component to branch on; provide data that tells the view how to change.
Group Code By Feature
Group code by feature. A feature folder should contain all of the code necessary to render that feature. Dependencies in the form of data and functions affecting data, are not required for a component view to function. These dependencies can be kept elsewhere, but also grouped by feature.
All of the code needed to render a component view /components/MessageItem/MessageItem.js /components/MessageItem/MessageItem.scss /components/MessageItem/container.js /components/MessageItem/index.js
External dependencies in the form of data and functions affecting data /state/messages/actions.js /state/messages/reducers.js /state/messages/state.js