First Component

Function Component

const MyComponent = (props) => {
    return (
        <elementOrComponent ../>
    );
}

Class Component

class MyComponent extends React.Component {
    render () {
        return (
            <elementOrComponent ../>
        );
    }
}

Virtual DOM and JSX

jsComplete:  https://jscomplete.com/repl/

mountNode.innerHTML = 'Hello!';

const Button = function () {
    return (
        // <button>Go</button>
        React.createElement("button", null, "Go")
    );
}

ReactDOM.render(<Button />, mountNode);

const Button = function (props) {
    return (
	<button>{props.label}</button>
    );
}

ReactDOM.render(<Button label="Do" />, mountNode);

const Button = (props) => {
    return (
        <button>{props.label}</button>
    );
}

ReactDOM.render(<Button label="Do" />, mountNode);

Class Component

class Button extends React.Component {
  render () {
    return (
    	<button>5</button>
    );
  }
}

ReactDOM.render(<Button />, mountNode);

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 10 };
  }
  render () {
    return (
    	<button>{this.state.counter}</button>
    );
  }
}

ReactDOM.render(<Button />, mountNode);

class Button extends React.Component {
  // constructor(props) {
  // super(props);
  // this.state = { counter: 10 };
  // }
  state = { counter: 10 };
  render () {
    return (
    	<button>{this.state.counter}</button>
    );
  }
}

ReactDOM.render(<Button />, mountNode);

======== 

class Button extends React.Component {
  state = { counter: 10 };

  handleClick = () => {
    // exmple1
    // this.setState({
    // 	counter: this.state.counter + 1
    // });
    // exmple2
    // this.setState(function (prevState) {
    // 	return {
    //   	counter: prevState.counter + 1
    //   };
    // });
    this.setState((prevState) => (
    	{ counter: prevState.counter + 1 }
    ));    
  }

  render() {
    return (
      <button onClick={this.handleClick}>
      	{this.state.counter}
      </button>
    );
  }
}

ReactDOM.render(<Button />, mountNode);

class Button extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClickFunction}>
      	+1
      </button>
    );
  }
}

const Result = function (props) {
  return (
    <div>{props.counter}</div>
  );
};

class App extends React.Component {
  state = { counter: 0 };

  incrementCounter = () => {
    this.setState((prevState) => ({ counter: prevState.counter + 1 }));
  }

  render() {
    return (
      <div>
	<Button onClickFunction={this.incrementCounter} />
        <Result counter={this.state.counter} />
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

class Button extends React.Component {
  handler = () => {
    this.props.onClickFunction(this.props.incrementValue);
  }

  render() {
    return (
      // <button onClick={()=>this.props.onClickFunction(this.props.incrementValue)}>
      <button onClick={this.handler}>
      	+{this.props.incrementValue}
      </button>
    );
  }
}

const Result = function (props) {
  return (
    <div>{props.counter}</div>
  );
};

class App extends React.Component {
  state = { counter: 0 };

  incrementCounter = (i) => {
    this.setState((prevState) => ({ counter: prevState.counter + i }));
  }

  render() {
    return (
      <div>
	<Button incrementValue={1} onClickFunction={this.incrementCounter} />
        <Button incrementValue={5} onClickFunction={this.incrementCounter} />
        <Button incrementValue={10} onClickFunction={this.incrementCounter} />
        <Result counter={this.state.counter} />
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

Summary

• jsComplete Playground
• Components :  - props   - state
• JSX and the Virtual DOM
• Function and class components
• ReactDOM.render(..., mountNode)
• React Events

Working with Data