JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css">
<body>
  <div id='map'></div>
</body>

CSS

body {
          margin: 0;
          padding: 0;
        }
        
        #map {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
        }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1Ijoib2tpZWJ1YmJhIiwiYSI6ImNpdHZscGs3ajAwNXYyb284bW4ydWUzbGsifQ.1PoNrSP0F65WolWgqKhV4g';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v9',
  center: [-97.547760, 35.486067],
  zoom: 11
});

map.on('load', function() {

  var geojson = {
    "type": "geojson",
    "data": {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [-97.554882, 35.542201],
            [-97.617270, 35.482703]
          ]
        },
        "properties": {
          "title": 'aaaaaa' // this is a field we can reference in the addLayer with '{title}'
        }
      }, {
        "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [-97.617270, 35.482703],
            [-97.535206, 35.427500]
          ]
        },
        "properties": {
          "title": 'bbbbbb'
        }
      }, {
        "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [-97.617270, 35.482703],
            [-97.491217, 35.476099]
          ]
        },
        "properties": {
          "title": 'cccccc'
        }
      }]
    }
  };

  map.addSource("route", geojson);

  map.addLayer({
    "id": "route",
    "type": "line",
    "source": "route",
    "layout": {
      "line-join": "round",
      "line-cap": "round"
    },
    "paint": {
      "line-color": "lightgreen",
      "line-width": 8
    }
  });

  map.addLayer({
    "id": "symbols",
    "type": "symbol",
    "source": "route",
    "layout": {
      "symbol-placement": "line",
      "text-anchor": "center",
			"text-justify": "center",
      "symbol-spacing": 500000,
      "text-font": ["Open Sans Regular"],
      "text-field": '{title}', // part 2 of this is how to do it
      "text-size": 16
    }
  });
});