./React Notes

posted by cli on

React Notes

Some ReactJS notes:

  1. Never write to this.props, treat it as immutable
  2. type Component :: props -> state -> HTML
  3. React components can only render a single root node.
  4. JSX:
    • namespaced components
    • expression wrap with {}
    • comments must be within {}
    • expression can eval to JSX components
    • supports spread attributes, {...props}, cool!
    • custom attributes should start with data-
    • All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style.
    • The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string.
  5. Callbacks are auto-bound to the component instance, uses event delegation meaning handlers are not bind to the dom node.
  6. Try to keep as many of your components as possible stateless. By doing this you’ll isolate the state to its most logical place and minimize redundancy, making it easier to reason about your application.
  7. A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via props. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.
  8. Do NOT store computed data in state
  9. Parent component can read its children at this.props.children, use React.Children.utilities yo manipulate them
  10. Stateful children should be handled with careful.
  11. Component can have keys to maintain its identity. Use keyd fragments to maintain order of a set of groups of children.ReactFragment React.addons.createFragment(object children)
  12. Break down UI elements into reusable components.
  13. React.PropTypes can be used to validate props, for performance reasons these validations only happend in development mode.
  14. Use getDefaultProps to define default values for props
  15. Controlled component vs. uncontrolled component
  16. Since the event system is implemented by React, sometimes we want to mainipulate DOM node directly, use React.findDOMNode(component) and ref
  17. Never retain this.refs references
  18. If you have not programmed several apps with React, your first inclination is usually going to be to try to use refs to “make things happen” in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to “own” that state is at a higher level in the hierarchy. Placing the state there often eliminates any desire to use refs to “make things happen” – instead, the data flow will usually accomplish your goal.