.c.f.

TODO: Document your thoughts here

Comparisons

Tooling

Links to be filed or read

Prop validation

Via PropTypes

import PropTypes from 'prop-types'

function Sum(props) {
  return <h1>{props.a} + {props.b} = {props.a + props.b}</h1>;
}

Sum.propTypes  = {
  a: PropTypes.number.isRequired,
  b: PropTypes.number.isRequired,
}

ReactDOM.render(
  <Sum a={“a”} b={2} />,
  document.getElementById('root')
)

Via TypeScript

interface SumProps {
  a: number;
  b: number;
}

function Sum(props: SumProps) {
  return <h1>{props.a} + {props.b} = {props.a + props.b}</h1>
}

ReactDOM.render(
  <Sum a={“a”} b={2} />,
  document.getElementById('root')
);

State

TODO: Replace with a Hooks example

class ClickCounter extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {clicks: 0};
  }

  render() {
    return <div onClick={() =>
    { this.setState({clicks: this.state.clicks + 1}); }}>
        This div has been clicked {this.state.clicks} times.
      </div>;
    }
  }
}

setState

Previous state + State change = New state

Previous state

{
  a: 1,
  b: 2,
}

State change

this.setState({
  b: 3,
  c: 4,
});

New State

{
  a: 1,
  b: 3,
  c: 4,
}

Events

class someClass extends React.Component {

  constructor(props) {
    super(props)

    this.state = {
      x: 42,
      y: 666,
    }

    this.onFieldChange = this.onFieldChange.bind(this)
  }

  onFieldChange(event){
    this.setState(
      {[event.target.name]: event.target.value} // target.name from form will be `x` or `y`.
    )
  }


}