React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Ejaz Bawasa

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.blocks {
  font-family: "Courier 10 Pitch", Courier, monospace;
  font-size: 95%;
  line-height: 140%;
  background-color: #F8F9FA;
  white-space: pre;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  padding: 10px;
  margin: 0 0 10px 0;
}

.productdetails {
  background-color: #79E0A8;
}

.comments {
  background-color: #D87D7A;
}

.pagecomponent {
  display: flex;
  width: 800px;
}

.pagecomponent > div {
  flex: 1;
  margin: 10px;
  width: 50%;
  overflow-wrap: break-word;

}

Babel + JSX

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

        this.state = {
            product_detail: {},
            comments: []
        };

        this.getProductData = this.getProductData.bind(this);
        this.getCommentsData = this.getCommentsData.bind(this);
    }

    makeAjaxCall(url, methodType){
        const promise = new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();

            xhr.open(methodType, url, true);
            xhr.send();
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4){
                    if (xhr.status === 200){
                        resolve(JSON.parse(xhr.responseText));
                    } else {
                        reject(xhr.status);
                    }
                }
            }
        });
   
        return promise;
    }

    getProductData () {
        return this.makeAjaxCall(`https://reqres.in/api/users/2`, `GET`);
    }

    getCommentsData () {
        return this.makeAjaxCall(`https://reqres.in/api/users`, `GET`);
    }

    componentDidMount () {
        Promise.all([this.getProductData(), this.getCommentsData()])
            .then(([product_detail, comments])  => {
                this.setState({
                    product_detail,
                    comments
                });
            });
    }

    render () {
        return (
            <div className="pagecomponent">
                <div className="productdetails blocks"><b>Product detail: </b>{JSON.stringify(this.state.product_detail, null, 4)}</div>
                <div className="comments blocks"><b>Comments: </b>{JSON.stringify(this.state.comments, null , 4)}</div>
            </div>
        );
    }
}

ReactDOM.render( <PageComponent />, document.getElementById('container'));