symblight

Если вы в верстке новичок, крайне не рекомендую делать все с 0, обычно это всегда чревато, даже порой когда люди не новички. Сейчас очень много всего особенно на волне популярности реакта, много продуктов заточены конкретно под реакт, в отличии от того же бутстрапа.

Статейка на medium с описнией нескольких фреймворков и небольшим сравниением - https://hackernoon.com/the-coolest-react-ui-framew...

Думаю что проблема в
app.use('/*', express.static(__dirname+ '/'));

В каком виде у вас адреса в браузере, через /#/ или просто / ?

Есть анимация в реакте ( React transition group ), которая сделана на основе ng-animate, которая в свою очередь использовалась в ангуляре. Если с ней знакомы, то быстро въедете, если нет - придется, наверное, пару раз перечитать доку.

Суть: вы добавляете css классы по типу NAME-enter, NAME-enter-active и подобное (все опять же есть по ссылке выше), а в реакт компоненте указываете внутри ReactCSSTransitionGroup transitionName="NAME"

Вообще, необходимо проверять как на клиенте, так и на сервере. Как пример, можешь посмотреть валидацию на сервере здесь и валидацию на клиенте здесь, там вполне неплохо описано.

webpack-dev-server - средство для удобной разработки ваших одностраничных приложений от webpack (то есть, из "коробки")

webpack-dev-middleware - собственно, middleware, который добавляет возможности вашему другому серверу (в случае тэга вопросов - написанному на node.js и фреймворке express). Что добавляет? Ну хотя бы, возможность hot-reload'a..

Что и где использовать разницы нет. Как вам удобнее так и делайте. Либо просто webpack-dev-server, либо какой-то ваш "усложенный" сервер написанный на node.js + middleware webpack-dev-server. Под middlewar'ом можно понимать некий "усилитель", как уже было написано, например: усиливай мой "сервер" на "hot-reload"

Js работает асинхронно. В тот момент когда вы делаете return text;, запрос еще не ушел. Т.е. событие onreadystatechange еще не сработало. Здесь можно использовать Promise.

// Оборачиваем код в функцию, которая вернет Promise.
let xmlHttpRequest = function() {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    var text='empty';
    xhr.onreadystatechange = function() {
      if (this.readyState === 4) {
        if (this.status >= 200 && this.status < 400) {
          var r=JSON.parse(this.responseText);
          text=r.text[0];
          resolve(text); // Вызываем resolve и передаем text в качестве параметра
        } else {
          reject(new Error('Error')); // Обработка ошибки
      }
     }
    };
    xhr.send();
  });
};

xmlHttpRequest()
  .then(function(text){
  console.log(text);
}).catch(function(err){
  console.error(err);
});

Из асинхронной функции невозможно вернуть значение, потому что на момент выхода из неё оно ещё не определено.
Вы можете:

1. Вернуть промис, который будет возвращать значение
   
2. Принимать в асинхронную функцию другую функцию и вызывать её при получении результата, передавая его в качестве аргумента.
   
3. Сделать запрос синхронным и писать результат в глобальную переменную.
   
4. Использовать синтаксис async/await, если у вас свежая версия Node.
   

Первый вариант более современный и гибкий, второй более простой для понимания. По обоим вариантам есть масса информации, документации и уроков (подобный вопрос задаётся здесь ежедневно не по разу, поэтому не расписываю подробнее).
Третий вариант - кривой костыль и приведён только для полноты картины, не стоит так делать.
Чётвертый - это промисы для хипстеров, лучше использовать его тогда, когда вы хорошо умеете работать с промисами, чтобы случайно ничего себе не отстрелить.