JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js"></script>
<div class="row-fluid">
  <div class="span12">
    <div id="map" class="map"></div>
  </div>
  <div class="span4 offset4 pull-right">
    <div id="info" class="alert alert-success">
      &nbsp;
    </div>
  </div>
</div>

JavaScript

var format = new ol.format.GeoJSON();
var url = 'https://gist.githubusercontent.com/cmiles74/ef62e43595deabb68f5a/raw/ef85f8e7ed34ccbf5768ade25e4d3485ded16938/gistfile1.json';

var vectorSource = new ol.source.Vector({
  strategy: ol.loadingstrategy.bbox,
  loader: function(extent, resolution, projection) {
    $.ajax(url).then(function(response) {
        var features = format.readFeatures(response,
          {featureProjection: 'EPSG:3857'});
        vectorSource.addFeatures(features);
    });
  }
});

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    new ol.layer.Vector({
      source: vectorSource
    })
  ],
  renderer: 'canvas',
  target: 'map',
  view: new ol.View({
    center: [-9343811.351360613, 5424617.381580625],
    zoom: 14
  })
});