react-summary.md

layout	permalink
page	/react-summary/

• Use NPM or Yarn for package management
• Use create-react-app to set up a new project
  • npm install --global create-react-app
• Use NPM commands to build and run the application
  • npm start for development
  • npm build to build for deployment
• React components are functions that generate page elements on the client
• Use JSX to embed HTML in JavaScript (in HTML in JavaScript in...)
  • Requires transpilation with Babel to convert to pure JavaScript
• Properties of HTML pseudo-element passed to React function in props
  • Write <Greet company="Rangle.io"/>
  • Calls Greet(props={company: "Rangle.io"})
  • Must return a single top-level HTML element
    • But that can contain many other elements generated by other components
• Use prop-types to specify what props must contain
• Use className instead of class to specify class property of HTML
• Two types of components:
  • Stateless (pure functional) components for display only
  • Stateful components (often classes) to contain state and handle events
• Stateful components maintain state in a member variable called state
  • Initialize with a single object in constructor
  • Always update with this.setState({key: value, ...})
    • Only need to pass in elements that are changing
  • setState triggers re-rendering of nested elements
  • React does work behind the scenes to minimize actual redrawing
• Lifecycle methods of class components are called at specific moments
  • constructor when component created (as usual)
  • componentDidMount when component added to DOM
  • componentWillMount called during server rendering
  • componentWillUnmount when component being removed
  • shouldComponentUpdate called after a component's props or state has changed.
  • componentWillUpdate and componentDidUpdate called before and after a component re-renders
  • componentWillReceiveProps called before a component has received props whose values have changed