zadanie02.jsx

import React from 'react';
import ReactDOM from 'react-dom';

document.addEventListener('DOMContentLoaded', function(){

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

            this.state = {
                currText : this.props.reversed ? this.props.text : this.props.text.substr(0, 1),
                counter  : this.props.reversed ? this.props.text.length - 1 : 2,
            };
        }

        componentDidMount(){
            this.intervalId = setInterval(() => {
                console.log('pyk!', this.state.counter);
                this.setState({
                    counter : this.state.counter + (this.props.reversed ? -1 : 1),
                    currText : this.props.text.substr(0, this.state.counter),
                });

                const targetCount = this.props.reversed ? 0 : (this.props.text.length + 1);

                if ( this.state.counter == targetCount ){
                    this.clear();
                }
            }, 1000);
        }

        clear(){
            clearInterval( this.intervalId );
        }

        componentWillUnmount(){
            this.clear();
        }

        render(){
            return <h1>{this.state.currText}</h1>;
        }
    }

    class App extends React.Component {
        render(){
            return <div>
                <TextTyper text="No siema!"/>
                <TextTyper text="No siema!" reversed={true}/>
            </div>;
        }
    }

    ReactDOM.render(
        <App />,
        document.getElementById('app')
    );
});