davidbalbert/rcscout_react_example.html

## rcscout_react_example.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>RC Scout + React example</title>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.0/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.0/umd/react-dom.production.min.js"></script>
  <script type="text/babel">
    // From https://gist.github.com/davidbalbert/44f7f3329c2bcbc5b5bee2d4b93a8253

    class RCScout extends React.Component {
      rerenderScout() {
        if (window._rcs && window._rcs.inst) {
          window._rcs.inst.render();
        }
      }

      componentDidMount() {
        this.rerenderScout();
      }

      componentDidUpdate() {
        this.rerenderScout();
      }

      render() {
        return <div className="rc-scout" />;
      }
    }
  </script>
</head>
<body>
  <div id="root"></div>

  <script type="text/babel">
    const { Component } = React;

    class Counter extends Component {
      constructor(props) {
        super(props);

        this.state = {
          count: 0,
        };
      }

      componentDidMount() {
        this.interval = setInterval(() => {
          const { count } = this.state;

          this.setState({count: count + 1});
        }, 1000);
      }

      componentWillUnmount() {
        clearInterval(this.interval);
      }

      render() {
        const { count } = this.state;

        return (
          <div>
            <h1>{ count }</h1>
            { count % 2 === 0 ?
              <RCScout /> :
              null
            }
          </div>
        );
      }
    }

    ReactDOM.render(<Counter />, document.getElementById("root"));
  </script>

  <script async defer src="https://www.recurse-scout.com/loader.js?t=ae5d64814d3c0a5c7607959df6e4b4f9"></script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>RC Scout + React example</title>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.0/umd/react.production.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.0/umd/react-dom.production.min.js"></script>
	<script type="text/babel">
	// From https://gist.github.com/davidbalbert/44f7f3329c2bcbc5b5bee2d4b93a8253

	class RCScout extends React.Component {
	rerenderScout() {
	if (window._rcs && window._rcs.inst) {
	window._rcs.inst.render();
	}
	}

	componentDidMount() {
	this.rerenderScout();
	}

	componentDidUpdate() {
	this.rerenderScout();
	}

	render() {
	return <div className="rc-scout" />;
	}
	}
	</script>
	</head>
	<body>
	<div id="root"></div>

	<script type="text/babel">
	const { Component } = React;

	class Counter extends Component {
	constructor(props) {
	super(props);

	this.state = {
	count: 0,
	};
	}

	componentDidMount() {
	this.interval = setInterval(() => {
	const { count } = this.state;

	this.setState({count: count + 1});
	}, 1000);
	}

	componentWillUnmount() {
	clearInterval(this.interval);
	}

	render() {
	const { count } = this.state;

	return (
	<div>
	<h1>{ count }</h1>
	{ count % 2 === 0 ?
	<RCScout /> :
	null
	}
	</div>
	);
	}
	}

	ReactDOM.render(<Counter />, document.getElementById("root"));
	</script>

	<script async defer src="https://www.recurse-scout.com/loader.js?t=ae5d64814d3c0a5c7607959df6e4b4f9"></script>
	</body>
	</html>