/* jshint esnext: true */

const {render } = ReactDOM;

const {Component} = React;

const src = "https://picsum.photos/500/300/?random";

​

class AtomicImage  extends Component {

   constructor(props) {

        super(props);

        this.state = {dimensions: {}};

        this.onImgLoad = this.onImgLoad.bind(this);

    }

    onImgLoad({target:img}) {

        this.setState({dimensions:{height:img.offsetHeight,

                                   width:img.offsetWidth}});

    }

    render(){

        const {src} = this.props;

        const {width, height} = this.state.dimensions;

        return (<div>

                dimensions width{width}, height{height}

                <br/>

                <img onLoad={this.onImgLoad} src={src}/>

                </div>

               );

    }

}

​

const App = props =><div> App <AtomicImage src={src}/>  </div>;

​

render(<App/>,document.getElementById('root'))