# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://rangle-io.gitbook.io/react-training/master/lessons/react-summary.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.