+380681072861(and telegram) 25onealexalex@gmail.com
used ready html code
the html-code is in the render block
click Edit source(pencil icon),
paste the code below into editor field,
click Save changes(check mark icon)
1.js - there is the code for Lesson 1
(componentDidMount, state(setState), state rendering)

2.Add events on arrows

<i className="arrow left" onClick={this.changeImageLeft}></i>
...
<i className="arrow right" onClick={this.changeImageRight}></i>

3.Bind events to this pointer

        this.changeImageLeft = this.changeImageLeft.bind(this);
        this.changeImageRight = this.changeImageRight.bind(this);

4.Make methods changeImageLeft, changeImageRight(setState - change state file) 

    changeImageLeft() {
       this.setState({
          file: 'additional/img/nature_1.jpg',  
       });
    }

    changeImageRight() {
       this.setState({
          file: 'additional/img/nature_2.jpg',  
       });
    }    
class ReactDialog extends React.Component {

    constructor(props) {
        super(props);

        this.changeImageLeft = this.changeImageLeft.bind(this);
        this.changeImageRight = this.changeImageRight.bind(this);

        this.state = {
            file: null, 
        }
    }

    componentDidMount() {
       this.setState({
          file: 'additional/img/nature_1.jpg',
       });
    }

    changeImageLeft() {
       this.setState({
          file: 'additional/img/nature_1.jpg',  
       });
    }

    changeImageRight() {
       this.setState({
          file: 'additional/img/nature_2.jpg',  
       });
    }   

    render() {
        return (
            <div className="row container">
                <div className="col block-right text-center">
                    <i className="arrow left" onClick={this.changeImageLeft}></i>
                </div>     
                <div className="col text-center wrap">  
                    <img src={this.state.file} alt="image" />
                </div> 
                <div className="col block-left">
                    <i className="arrow right" onClick={this.changeImageRight}></i>
                </div> 
            </div>
        );    	
    }

}

const elem = document.querySelector('.contents') 

if (elem) {
   ReactDOM.render(<ReactDialog />, elem)
}
download the ready code