React Rundown

index.js

// JSX

<div/> // React.createElement('div')
<Component/> // React.createElement(Component)

<div>Message</div> // React.createElement('div', null, 'Message')
<Parent><Child/></Parent> // React.createElement(Parent, null, React.createElement(Child))

<div>{value}</div> // React.createElement('div', null, value)
<div
  tabIndex="-1"
  styles={{ paddingTop: 5 }}
  onClick={fn}
/> // React.createElement('div', { tabIndex: '-1', styles: {/* ... */}, onClick: fn })

<label htmlFor="id">Title</label>
<label className="css-class">Title</label>

<div dangerouslySetInnerHTML={{ __html: '<span></span>' }}/>

<React.Fragment></React.Fragment>



// Rendering Elements
function FunctionalComponent(props) {
  return <div>{props.value}</div>
}

ReactDOM.render(<FunctionalComponent/>, domElement)



// Props
class Greeting extends React.Component {
  static propTypes = {
    message: PropTypes.string.isRequired
  }

  /* ... */
}

<Greeting message="Hello World" />
<Greeting message={`Hello ${name}`} />



// State
class Timer extends React.Component {
  state = {
    seconds: 0
  }

  tick = () => {
    this.setState(prevState => {
      return { seconds: prevState.seconds + 1 }
    })
  }

  componentDidMount() {
    this.intervalId = setInterval(this.tick, 1000)
  }

  componentWillUnmount() {
    clearInterval(this.intervalId)
  }

  /* ... */
}

<Timer />



// Controlled forms
class ValidatingInput extends React.Component {
  state = {
    value: 0
  }

  handleChange = (event) => {
    // take the event out of the pool since we need to use it
    // outside the scope of this function
    event.persist()

    this.setState(() => {
      return { value: event.target.value }
    })
  }

  render() {
    return <input type="text" value={this.state.value} />
  }
}

// Refs + Uncontrolled forms
class ValidatingInputUncontrolled extends React.Component {
  constructor() {
    this.inputRef = React.createRef()
  }

  handleSubmit = (event) => {
    console.log(this.inputRef.value)
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input ref={this.inputRef} type="text" defaultValue="This is a default value" />
        <button type="submit">Submit</button>
      </form>
    )
  }
}



// Class properties
class Klass {
  fn = () => this.setState()

  setState() { /* ... */ }
}

class Klass {
  constructor() {
    // arrow functions are bound to the lexical "this"
    // here lexical means the one that is active within the scope of the constructor
    this.fn = () => this.setState()

    // we could alternatively use:
    // this.fn = this.setState.bind(this)
  }
}

// since new operator implicitly binds "this" to a new instance,
// arrow fns defined as class properties will always have the right this binding
const klass = new Klass()






// Containment
function Child() {
  return <div/>
}

function Parent(props) {
  return <div>{props.children}</div>
}

<Parent>
  <Child/>
</Parent>


// Specialisation (tight coupling!)
function Parent(props) {
  return <div><Child/></div>
}

<Parent/>