• must always have 1 and only 1 root node
• must use className in place of class
• can bind javascript with {}
• In JSX, event listener names are written in camelCase, such as onClick or onMouseOver.
• use Ternary opp for inline conditional logic
• multi-line jsx can be wrapped in ( )
• && works best in conditionals that will sometimes do an action, but other times do nothing at all.

const tasty = (
  <ul>
    <li>Applesauce</li>
    { !baby && <li>Pizza</li> }
    { age > 15 && <li>Brussels Sprouts</li> }
    { age > 20 && <li>Oysters</li> }
    { age > 25 && <li>Grappa</li> }
  </ul>
);

const people = ['Rowe', 'Prevost', 'Gare'];

const peopleLis = people.map((person,i) =>
  <li key={'person_' + i}>{person}</li>
);

// ReactDOM.render goes here:
ReactDOM.render(<ul>{peopleLis}</ul>, document.getElementById('app'))

Items in a list should be given a unique key.

• styles defined in objects use cammel case. margin-top -> marginTop
• units can be passed as integers and will default to px
• can inject object literals: <h1 style={{ color: 'red' }}>Hello world</h1>
• can import shared styles from file

• create a component with class MyComponent extends React.Component
• render components with <MyComponent />
• must implement render(). returns jsx
• constructor, takes props. Must call super

constructor(props){
    super(props);
}

• created as a function in the component
• can be passed to child components via props
• called in child component through accessing props (can then be bound to the html-event attributes)
• should be bounded to this in constructor with this.myHandler = this.myHandler.bind(this);

state: store information that the component itself can change. props: store information that can be changed, but can only be changed by a different component.

• Props are passed into the component and CANNOT Be modified!

• "Stateful" describes any component that has a state property
• "stateless" describes any component that does not.

• use this.setState({ myObj:'val' }); -- only overwrites values passed in -- causes a render() to fire. (thus, cannot be called from render())

• props are passed in as jsx attributes on components <MyComponent myProp="123" />

• Components can contain other components inside jsx
• Every component's props object has a property named children. Accessed via this.props.children
• If a component has more than one child between its JSX tags, then this.props.children will return those children in an array. However, if a component has only one child, then this.props.children will return the single child, not wrapped in an array.

<BigButton>
  <LilButton />
</BigButton>

You can define "default values" for props to take on when they are not explicitly set, by setting defaultProps on your component.

 MyComponent.defaultProps = {
   {text:"This is a default value!"}
 };

Typescript

class MyComponent extends Component<IProps, IStates> {
    public static defaultProps: IProps = { /* ... */ }; 
    // ...
}

A component "mounts" when it renders for the first time. This is when mounting lifecycle methods get called.

1. componentWillMount(): When a component renders for the first time, ComponentWillMount gets called right before render

2. render(): render belongs to two categories: mounting lifecycle methods, and updating lifecycle methods.

3. componentDidMount(): When a component renders for the first time, componentDidMount gets called right after the HTML from render has finished loading. ComponentDidMount is a good place to connect a React app to external applications, such as web APIs or JavaScript frameworks.

The first time that a component instance renders, it does not update. A component updates every time that it renders, starting with the second render.

Whenever a component instance updates, it automatically calls all five of these methods, in order:

1. componentWillReceiveProps(nextProps): typically used for comparing incoming props to current props or state, and deciding what to render based on that comparison.

2. shouldComponentUpdate(nextProps, nextState) : boolean: used to prevent render() from being called (return false) based on next values

3. componentWillUpdate(nextProps, nextState): The main purpose of componentWillUpdate is to interact with things outside of the React architecture. You cannot call this.setState from the body of componentWillUpdate!

4. render()

5. componentDidUpdate(prevProps, prevState): usually used for interacting with things outside of the React environment, like the browser or APIs.

componentWillUnmount(): A component's unmounting period occurs when the component is removed from the DOM.

1. parent component defines a methods that calls setState(). Methods is binded to this.
2. parent passes method to prop
3. The child receives the passed-down function, and uses it as an event handler.

Each Component should have only 1 job. One stateless component display information, and a different stateless component offer the ability to change that information.

//parent
class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = { name: 'Frarthur' };

    this.changeName = this.changeName.bind(this);
  }

  changeName(newName) {
    this.setState({
      name: newName
    });
  }

  render() {
    return (
      <div>
        <Child onChange={this.changeName} />
        <Sibling name={this.state.name} />
      </div>
    );
  }
});

//child
export class Child extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    const name = e.target.value;
    this.props.onChange(name);
  }

  render() {
    return (
      <div>
        <select
          id="great-names"
          onChange={this.handleChange}>
          <option value="Frarthur">Frarthur</option>
          <option value="Gromulus">Gromulus</option>
        </select>
      </div>
    );
  }
}

//Display
export class Sibling extends React.Component {
  render() {
    const name = this.props.name;
    return (
      <div>
        <h1>Hey, my name is {name}!</h1>
        <h2>Don't you think {name} is the prettiest name ever?</h2>
        <h2>Sure am glad that my parents picked {name}!</h2>
      </div>
    );
  }
}

If a component has to have state, make calculations based on props, or manage any other complex logic, then that component shouldn't also have to render HTML-like JSX.

Instead of rendering HTML-like JSX, the component should render another component. It should be that component's job to render HTML-like JSX.

Article