> For the complete documentation index, see [llms.txt](https://rangle-io.gitbook.io/react-training/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rangle-io.gitbook.io/react-training/master/lessons/react-summary.md).

# 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