React - egghead intro

egghead.js

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import './App.css'

//const App = () => <h1>Hello stateless</h1>

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      txt: 'this is the state text',
      cat: 0,
      currentEvent: "---",
      a: "",
      val: 0,
      increasing: false,
      items: [],
      input: '/*add your jsx here*/',
      output: '',
      err: ''
    }
    this.update2 = this.update2.bind(this)
    this.update3 = this.update3.bind(this)
    this.update4 = this.update4.bind(this)
  }

  update( e ) {
    this.setState({txt: e.target.value})
  }

  update2(e){
    this.setState({currentEvent: e.type})
  }
  update3 () {
    this.setState({
      a: this.a.value,
      b: this.refs.b.value,
    //  c: ReactDOM.findDOMNode(this.c).value
      c: this.c.refs.input.value
    })
  }
  update4() {
    this.setState({val: this.state.val+1})
  }
  update5() {
    ReactDOM.render(<App val={this.props.val+1}/>, document.getElementById("a"));
  }

  update6(e) {
    let code = e.target.value;
    try {
      this.setState({
        output:window.Babel
          .transform(code, {presets: ['es2015','react']})
          .code,
        err:''
      })
    } catch (error) {
      this.setState({err: error.message})
    }
  }

  filter(e) {
    this.setState({filter: e.target.value});
  }

  render() {
    console.log("render");
    console.log(this.state.increasing);
    let items = this.state.items;
    if(this.state.filter) {
      items = items.filter(item=>
        item.name.toLowerCase()
          .includes(this.state.filter.toLowerCase())
      )
    }

    return (
      <div>
        <h1>{this.props.txt}</h1>
        <br />
        <input type="text" onChange={this.update.bind(this)} />
        <br />
        <Widget update={this.update.bind(this)} />
        <h1>{this.state.txt} - {this.state.cat}</h1>
        <br />
        <Button>I <Heart />React</Button>
        <br />
        <Title text="The text"/>
        <br />
        <textarea
          onKeyPress = {this.update2}
          onCopy = {this.update2}
          onCut = {this.update2}
          onPaste = {this.update2}
          onFocus = {this.update2}
          onBlur = {this.update2}
          onDoubleClick = {this.update2}
          onTouchStart = {this.update2}
          onTouchMove = {this.update2}
          cols="30"
          rows="10" />
        <h1>{this.state.currentEvent}</h1>

        <br />
        <input
          ref={ node=> this.a=node}
          type="text"
          onChange = {this.update3}
          /> {this.state.a}
          <hr />
        <input
          ref="b"
          type="text"
          onChange = {this.update3}
          /> {this.state.b}
        <Input
          ref={ component=> this.c=component}
          update = {this.update3}
          /> {this.state.c}
          <br />
          <button onClick={this.update4}>
            {this.state.val * this.state.m}</button>
          <br />
          <button onClick={this.update5.bind(this)}>
            {this.props.val}</button>      

          <br />
          <div>
            Filter: <input type="text" onChange={this.filter.bind(this)} />
            {items.map(item=>
              <Person key={item.name} person={item} />)}
          </div>
          <br />
          Higher order components
          <br />
          <Button2>button</Button2>
          <hr/>
          <LabelHOC>label</LabelHOC>
          <br/>
          JSX Compiler
          <br />
          <header>{this.state.err}</header>
          <div className='containter'>
            <textarea 
            onChange={this.update6.bind(this)}
            defaultValue={this.state.input}
            ></textarea>
            <pre>
              {this.state.output}
            </pre>
          </div>
      </div>
    )
    //return React.createElement("h1", null, "Hello Eggheads");
  }

  componentWillMount() {
    console.log("component will mount")
    this.setState({m: 2});

    fetch('http://swapi.co/api/people/?format=json')
      .then(response => response.json())
      .then(({results: items}) => this.setState({items}))
  }
  componentDidMount() {
    console.log("component did mount")
    console.log(ReactDOM.findDOMNode(this));
    //this.inc = setInterval(this.update4,500)
  }
  componentWillUnmount () {
    console.log('componentWillUnmount');
    clearInterval(this.inc)
  }
  componentWillReceiveProps(nextProps) {
    this.setState({increasing:nextProps.val>this.props.val})
  }

  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.val % 5 === 0;
  }
  componentDidUpdate(prevProps, prevState) {
    console.log(`prevProps ${prevProps.val}`)
  }
}

class Heart extends React.Component {
  render() {
    return <span>&hearts;</span>
  }
}

App.propTypes = {
  txt: PropTypes.string,
  cat: PropTypes.number.isRequired
}

App.defaultProps = {
  txt: "this is the default txt",
  val: 0
}

const Widget = (props) => 
    <input type="text" onChange={props.update} />

const Button = (props) =>
    <button>{props.children}</button>

const Title = (props) =>
    <h1>Title: {props.text}</h1>

Title.propTypes = {
  text(props, propName, component) {
    if(!(propName in props)) {
      return new Error(`missing ${propName}`)
    }
    if(props[propName].length<6) {
      return new Error(`${propName} was too short`);
    }
  }
}

class Input extends React.Component {
  render() {
   // return <input type="text" onChange={this.props.update} />
    return <div><input ref="input" type="text" onChange={this.props.update} /></div>
  }
}

class Wrapper extends React.Component {
  mount() {
    ReactDOM.render(<App />, document.getElementById("a"))
  }
  unmount() {
    ReactDOM.unmountComponentAtNode(document.getElementById("a"))
  }
  render() {
    return (
      <div>
        <button onClick={this.mount.bind(this)} >Mount</button>
        <button onClick={this.unmount.bind(this)}>Unmount</button>
        <div id="a"></div>
      </div>
    )
  }
}

const Person = (props) => <h4>{props.person.name}</h4>

//higher order component
const HOC = (InnerComponent) => class extends React.Component {
  constructor() {
    super();
    this.state = {count:0}
  }
  update() {
    this.setState({count: this.state.count+1})
  }
  componentWillMount() {
    console.log('willMount HOC')
  }
  render() {
    return (
      <InnerComponent 
        {...this.props}
        {...this.state}
        update={this.update.bind(this)}
      />
    )
  }
}

const Button2 = HOC((props) => 
<button onClick={props.update}>{props.children} - {props.count}</button>)

class Label extends React.Component {
  componentWillMount() {
    console.log('Label will mount')
  }

  render() {
    return <label onMouseMove={this.props.update}>
      {this.props.children} - {this.props.count}
      </label>
  }
}

const LabelHOC = HOC(Label)


//export default App
export default Wrapper