React

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css">
<div id="app"></div>

CSS

body, html {
    height: 100%;
}





.map-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
}

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
   height: 100% !important.
}

React

mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';

class Application extends React.Component {
    componentDidMount() {
        const map = new mapboxgl.Map({
            container: 'map', // container id
            style: 'mapbox://styles/mapbox/light-v9', // stylesheet location
            center: [13.392, 52.523], // starting position [lng, lat]
            zoom: 9 // starting zoom
        });
        map.addControl(new mapboxgl.NavigationControl());
    }

    render() {
        return (
<div>
<h2>Hello</h2>
<p>Hi</p>    
                    <div className="map-wrapper">
                        <div ref={this.mapContainer} id="map"/>
                    </div>
              </div>
        )
    }
}

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