valex · October 21, 2018 16:42
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Lifecycle</title>
    <style>
      body, textarea {
        font-family: Courier;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- my app renders here -->
    </div>
    <script charset="utf-8" crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.min.js"></script>

    <script type="text/babel">

        class Counter extends React.Component {
            shouldComponentUpdate(nextProps, nextState) {
                console.log('Counter::shouldComponentUpdate()');
                console.log('current:'+this.props.count);
                console.log('next:'+nextProps.count);
                return nextProps.count !== this.props.count;
            };
            render() {
                console.log('Counter::render()');
                return (<h3>{this.props.count}</h3>);
            }
        }

        Counter.propTypes = {
            count: PropTypes.number.isRequired,
        };

        class TextAreaCounter extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    text: props.defaultValue
                };

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

            static defaultProps = {
                defaultValue: 'default text'
            };

            _textChange(event) {
                this.setState({
                    text: event.target.value,
                });
            };


            render() {
                console.log('TextAreaCounter::render()');

                var counter = null;

                if (this.state.text.length > 0) {
                    counter = React.createElement(Counter, {
                        count: this.state.text.length,
                    });
                }

                return (
                    <div>
                        <textarea onChange={this._textChange} value={this.state.text}></textarea>
                        {counter}
                    </div>
                );
            };

        }

        TextAreaCounter.propTypes = {
            defaultValue: PropTypes.string
        };

        var myTextAreaCounter = ReactDOM.render(
            React.createElement(TextAreaCounter, {
                defaultValue: "Bob",
            }),
            document.getElementById("app")
        );
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Lifecycle</title>
	<style>
	body, textarea {
	font-family: Courier;
	}
	</style>
	</head>
	<body>
	<div id="app">
	<!-- my app renders here -->
	</div>
	<script charset="utf-8" crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.min.js"></script>

	<script type="text/babel">

	class Counter extends React.Component {
	shouldComponentUpdate(nextProps, nextState) {
	console.log('Counter::shouldComponentUpdate()');
	console.log('current:'+this.props.count);
	console.log('next:'+nextProps.count);
	return nextProps.count !== this.props.count;
	};
	render() {
	console.log('Counter::render()');
	return (<h3>{this.props.count}</h3>);
	}
	}

	Counter.propTypes = {
	count: PropTypes.number.isRequired,
	};

	class TextAreaCounter extends React.Component {
	constructor(props) {
	super(props);
	this.state = {
	text: props.defaultValue
	};

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

	static defaultProps = {
	defaultValue: 'default text'
	};

	_textChange(event) {
	this.setState({
	text: event.target.value,
	});
	};


	render() {
	console.log('TextAreaCounter::render()');

	var counter = null;

	if (this.state.text.length > 0) {
	counter = React.createElement(Counter, {
	count: this.state.text.length,
	});
	}

	return (
	<div>
	<textarea onChange={this._textChange} value={this.state.text}></textarea>
	{counter}
	</div>
	);
	};

	}

	TextAreaCounter.propTypes = {
	defaultValue: PropTypes.string
	};

	var myTextAreaCounter = ReactDOM.render(
	React.createElement(TextAreaCounter, {
	defaultValue: "Bob",
	}),
	document.getElementById("app")
	);
	</script>
	</body>
	</html>