Никита Гущин

С react используется webpack в подавляющем большинстве случаев. Есть тонна готовых конфигов, которые можно просто скопипастить и все будет работать. Но в целом - в проекте вам может понадобится сделать что-то по другому и тогда возникают сложности. Поэтому для общего развития нужно хотя-бы поверхностно разбираться что там к чему (в идеале - попробовать такие фишки как tree shaking и code splitting).

Мой совет - для этого просто начните с нуля собирать проект. Подсматривайте готовые конфиги и постепенно собирайте свой, читая при этом документацию. При устройстве на работу будет однозначно плюсом, да и в собственной разработке не все же create-react-app'ом пользоваться.

PS а про gulp - не знаю, давно уже не приходилось его в живую использовать: все что нужно - может webpack

<script type="text/javascript">
  google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});

  function drawVisualization() { ... }
</script>

Этот кусок кода вообще особняком стоит. Нужно же его интегрировать ... Начнем!

Первым делом поместим функцию drawVisualization в наш js файл:

function drawVisualization(element, commonData, regionData) {
  console.log('elemet', element);
  var data = google.visualization.arrayToDataTable(commonData);
  var mapVisualization = new google.visualization.GeoChart(element);
  mapVisualization.draw(data, regionData);
}

И немного модифицируем главный файл:

<script type="text/javascript">
  google.load('visualization', '1.1', {packages: ['geochart']});
</script>

Затем определим компонент, который будет рисовать карту:

class MapVisualization {

  componentDidMount() {
    this.drawMap();
  }
  
  componentDidUpdate() {
    this.drawMap();
  }
  
  drawMap() {
    drawVisualization(this.refs.mapDiv.getDOMNode(), this.props.commonData, this.props.data);
  }

  render() { 
    return (
      <div ref="mapDiv" />
    );
  }
};

Готово. Все данные поместим в props компонента Tabs и затем изменим его render:

render() {
      var list = this.props.data.map(function(d, i) { return <button type = "button" className = { 'tab' + (i === this.state.current ? ' active' : '') } key = { 'tab-' + i } onClick = { this.handleClick.bind(this, i) }>{d.title}</button>
      }.bind(this));

      const { commonData, data } = this.props;
      const { current } = this.state;
      return (         
        < div className = 'container' >
          <div className='col-12'>
              {list}
              <div className = 'map'>
                <MapVisualization data={data[current].content} commonData={commonData} />
              </div>
          </div>
        </div>
      );
    }

Вместо ссылки я использую конечно-же кнопку.
Конечный результат

Это конечно далеко от идеала, но я так понимаю Вы не давно начали реакт - поэтому пойдет

Упомяну мировое сообщество реакта (к сожалению, переезжает со slack'а) ссылка на инвайт

На чем душе угодно)

Хотите - используйте nodejs (хорошо пойдет с reactjs).
Хотите - php (как restAPI).
Если большое корпоративное приложение - используйте Java.
Ну и рельсы (ruby on rails), конечно же.
Выбор зависит от Ваших задач.

SPA = Single page app. Другими словами - всё происходит на одной странице. Если вы открываете соседнюю вкладку, то да - нужно грузить все заново. Но по сути само приложение уже в кэше браузера и загрузить нужно только контент, который также может быть закеширован к этому моменту.

Посмотрите в сторону изоморфных приложений, когда реакт рендерится как на сервере, так и на клиненте. Причем на клиент уже приходит HTML с данными.

Это делается на JS. Я предполагаю что под фразой "режет рекламу" вы имели ввиду - удаляет или скрывает ее со страницы. Если да - то с помощью JS мы можем проверить удалены(или спрятаны) ли блоки с рекламой, или - нет.

Вот примерно так:

if(    $( '#blockID' ).length == 0 
    || $( '#blockID' ).css( "display" ) == 'none' 
    || parseFloat($( '#blockID' ).css( "opacity" )) != 1.0)
{
    // Реклама удалена
}