Notes on React: Up and Running

Notes from React: Up and Running (I purchased the early release book, use WCYAZ coupon code to get 50% off):

  • React.DOM shows you a list of HTML elements that you can use as React components
    • Ex: React.DOM.h1(DOMAttributeObject, childComponent, e.g. a textString)
    • This is just another way of doing React.createElement("h1", DOMAttributeObj, childComponent)
  • Special DOM attributes
    • className - because 'class' is a reserved keyword in JS
    • htmlFor - because 'for' is a reserved keyword in JS
    • style - cannot pass string, use JS object
      • Properties must be camel cased (e.g. fontFamily instead of font-family)
  • React.render(component, DOM location)
  • Render is the only required method for a React component
    • Must return only a single DOM node
  • componentFactory = React.createFactory(Component); component = componentFactory()
  • Treat this.props as read-only; it should only be changed by having new properties passed in from parent component
  • Treat this.state as read-only; it should only be changed using this.setState()
  • this.propTypes allows you to do run-time validation to make sure you received the expected types for the properties passed in
    • ex: React.PropTypes.func.isRequired - see full list on React's docs
    • Shows a warning in console only during development mode
    • you can have additional properties in addition to propTypes (which is optional having at all)
  • DOMAttributeObject
    • <h1 className="{willStyles}" onChange="{this._changeHandler}">
  • React does event handling for you because doing it by hand has several issues:
    • Inconsistencies between browsers (hence the need for libraries like jQuery)
    • Event Delegation - to improve performance you listen to one parent element and then figure out which sub-element was clicked.
  • Lifecycle Methods
    • First-time loading:
      • componentWillMount(): before render()
      • componentDidMount(): after initial render() and node is on DOM
    • Updating:
      • componentWillUpdate(object nextProps, object nextState): before render() and changes are on the DOM
      • componentDidUpdate(object prevProps, object prevState): after render() and changes are on on the DOM
      • componentWillReceiveProps(object nextProps): if you need to do this.setState on receiving new props
      • shouldComponentUpdate(object nextProps, object nextState): for performance reasons (use immutable-js)
    • Removing:
      • componentWillUnmount(): before a component is unmounted from the DOM
      • componentDidUnmount(): after a component is unmounted from the DOM
  • Parent-child component lifecycles:
    • Parent will mount or update
    • Child will mount or update
    • Child mounted or updated
    • Parent mounted or updated
  • Mixins are a way of extending methods from one object to another in JS
    • example: mixins: [mixin1, mixin2]
  • JSX is just syntax sugar. Using '{' and '}' inside of the HTML-like syntax allows you to use Javascript. For example: <a className="{jsObjWithStyles}">text</a>
    • Must close every tag (e.g. <br />
  • Best way of commenting JSX: { /** **/ }
  • HTML to JSX (https://facebook.github.io/react/html-jsx.html)
  • React automatically escapes HTML tags
  • Spread operator for React reduces boilerplate:
    • var attributes = {href="google.com", styles={font: 14px} }
    • Instead of: render( return <a href={attributes.href} styles={attributes.styles}>)
    • Just do: render( return <a {...attributes}>)
    Posted

    views