<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Obsługa stanu</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>

<body>
  <div id="container"></div>

  <script type="text/babel">
    class LightningCounter extends React.Component {
      render() {
        return (
          <h1>Witaj!</h1>
        );
      }
    }

    class LightningCounterDisplay extends React.Component {
      render() {
        var divStyle = {
          width: 250,
          textAlign: "center",
          backgroundColor: "black",
          padding: 40,
          fontFamily: "sans-serif",
          color: "#999",
          borderRadius: 10
        };

        return (
          <div style={divStyle}>
            <LightningCounter/>
          </div>
        );
      }
    }

    ReactDOM.render(
      <LightningCounterDisplay/>,
      document.querySelector("#container")
    );
  </script>
</body>

</html>
---

  constructor(props) {
    super(props);

    this.state = {
      strikes: 0
    };
  }
---

      <h1>{this.state.strikes}</h1>
      
---

  componentDidMount() {
    setInterval(this.timerTick, 1000);
  } 
---

  timerTick() {
    this.setState({
      strikes: this.state.strikes + 100
    });
  }
---

    this.timerTick = this.timerTick.bind(this);
---

class LightningCounter extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      strikes: 0
    };

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

  timerTick() {
    this.setState({
      strikes: this.state.strikes + 100
    });
  }

  componentDidMount() {
    setInterval(this.timerTick, 1000);
  }

  render() {
    var counterStyle = {
      color: "#66FFFF",
      fontSize: 50
    };

    var count = this.state.strikes.toLocaleString();

    return (
      <h1 style={counterStyle}>{count}</h1>
    );
  }
}

class LightningCounterDisplay extends React.Component {
  render() {
    var commonStyle = {
      margin: 0,
      padding: 0
    };

    var divStyle = {
      width: 250,
      textAlign: "center",
      backgroundColor: "#020202",
      padding: 40,
      fontFamily: "sans-serif",
      color: "#999999",
      borderRadius: 10
    };

    var textStyles = {
      emphasis: {
        fontSize: 38,
        ...commonStyle
      },
      smallEmphasis: {
        ...commonStyle
      },
      small: {
        fontSize: 17,
        opacity: 0.5,
        ...commonStyle
      }
    };

    return (
      <div style={divStyle}>
        <LightningCounter />
        <h2 style={textStyles.smallEmphasis}>Liczba uderzeń piorunów</h2>
        <h2 style={textStyles.emphasis}>na całym świecie</h2>
        <p style={textStyles.small}>(od czasu otwarcia strony)</p>
      </div>
    );
  }
}

ReactDOM.render(
  <LightningCounterDisplay />,
  document.querySelector("#container")
);
