abberati

по-хорошему внутренние класснеймы компонентов должны быть зашиты внутри компонента, вот так:

const WrappedButton = ({
  onClick,
  rootClassName = '',
  children,
}) =>
  <div className={rootClassName}>
    <p className="some inner classname">
      <button
        onClick={onClick}
        className="another one classname"
         type="button"
      >
        {children}
      </button>
    </p>
  </div>

но никто не запретит вам передавать в пропсах хоть объект с класснеймами, хоть массив, хоть пятьдесят пропсов на каждый внутренний класснейм. если возникла такая необходимость, то, скорее всего, компонент написан плохо

Между реактом и ответами от сервера должна стоять система управления состоянием (state management system), redux/mobx или что-то ещё.

хороший тон - в тернарных операторах последним операндом вместо "" ставить null

Вам нужны две системы работы с данными.

1. На сервере это будет любой json api.
Алгоритм следующий: сервер получает запрос в api, получает и обрабатывает данные из БД, потом отдаёт в ответ на запрос. В зависимости от языка будут различия в имплементации, но везде найдутся библиотеки.

2. На клиенте нужно хранилище данных (store) (можно и без него обойтись, просто прокидывая результаты запросов в компоненты, но в больших приложениях слишком усложняется управление данными. Есть redux, есть mobx, есть ещё куча разных решений.
Алгоритм такой: компонент при рендере понимает, что ему нужны данные и идёт в store, там данные, если их нет, подгружаются по ajax. При обновлении данных в store компонент получает уведомление и совершает ререндер.

компиляция js, jsx и прочего - не область ответственности Maven'а

делайте сборку фронта webpack'ом, как все делают.
сборку бэка - Maven'ом.

статический сервер отдаёт собранный фронт, фронт по api общается с бэком

Вы перебираете методом Array.prototype.forEach(), который ничего не возвращает. Да и то, что возвращается из callback'а forEach'а, тоже исчезает в пустоте.

render() {
  const track = this.props.track;
  const update = this.props.update;

  if (track.length !== 0 && update) {
    this.props.shouldUpdate(false);
    return track.map((value, key) => value.length !== 0 ? <VehicleMarker target={key}/> : null;);
  } else {
    return null;
  }
}

Метод forEach() выполняет функцию callback один раз для каждого элемента массива; в отличие от методов every() и some(), он всегда возвращает значение undefined.

©

Поздравляю, вы нашли баг toster'а

По поводу вопроса: дождитесь установки приложения, потом

cd hello_world
npm start

codeDojo
И канал.

Это же реакт. Храните в Tabs.state указатель на открытый таб, в зависимости от него рендерите тот или иной <article/>. Никаких ссылок, никаких role, никаких tabindex.

var Tabs = React.createClass({
        constructor() {
          this.state = {tabIndex: 0}
        }
        render :  function () {
            return (
               <div id="tb">
                   <ul role="tablist">
                       <li  role="presentation" onClick={() => this.setState({tabIndex: 0})}></li>
                       <li  role="presentation" onClick={() => this.setState({tabIndex: 1})}></li>
                       <li  role="presentation" onClick={() => this.setState({tabIndex: 2})}></li>
                   </ul>
                   
                   <section className='tabs-content'>
                       {() => this.state.tabIndex === 0 ? <article>1</article> : null}
                       {() => this.state.tabIndex === 0 ? <article>2</article> : null}
                       {() => this.state.tabIndex === 0 ? <article>3</article> : null}
                   </section>
               </div>
            );
        }
    });
    ReactDOM.render(
        <Tabs  />,
        document.getElementById('tabs_content')
    );

Всё верно, у вас в корне неверный подход. Специально для этого используется react-router.

Обфусцируйте код, ключи и пароли будут записаны в малопонятные переменные в недрах минифицированного кода. Если не потратить на поиск изрядное количество времени, то и не найдёшь.