Javid Asgarov

Это вообще по js коду, чем чисто к реакту.

switch(curr){
      case "eur":
        newCurrency = {...this.state.currencyData, rub: false, usd: false, eur: true };
        break
      case "usd":
        newCurrency = {...this.state.currencyData, rub: false, usd: true, eur: false };
        break
      default:
        newCurrency = {...this.state.currencyData, rub: true, usd: false, eur: false };
        break
      }

А если будет еще валюта, будете еще свойства добавлять? Лучше держать свойство currency и от него отталкиваться. Был бы typescript, еще б указали какие строки туда можно куда присваивать. Причем в state currency уже есть, зачем currencyData я не понял.

Тоже самое со всеми stop свойствами, их много, трудно понять, что к чему. В общем, посмотрите на это в первую очередь.

Я отвечу в тех рамках, с которыми я знаком, как я тестирую и вижу это. Тестировать смысла нет методы в реакт компоненте. Я думаю подходить к этому, тестировать то как класс будет использоваться. Если этот метод отдельно будет где-то пользоваться, то надо подумать о его тестировании, если нет, то его предназначение как компонента эта функция render.

Для этого есть библиотеки как react-testing-library (про нее и на хабре была статья), а также Enzyme. Суть, что вы рендерите ваш компонент в тесте и смотрите, чтобы он давал правильные результаты. А что он делает внутри, это уже дело компонента.

С помощью coverage jest сможете посмотреть, какие методы были задействованы при условиях вашего теста. Например, если метод вызывается после клика на каком-то элементе внутри компонента, то можно использовать соответствующий триггер в тесте и "кликнуть" туда и убедиться, что нужные изменения произошли.

Если же этот метод делает какую-то важную логику, то возможно стоит переопределить его вне сущности реакта, создать отдельный класс или функцию и тестировать отдельно ее.

Не очень пониманию, что надо. Но у react есть lifecycle methods, среди componentsWillReceiveProps(nextProps). В этом методе можно смотреть на props, которые пришли. Согласно какой-то логике что-то менять в state или ничего не делать, вследствие изменения состояния компонента он заново отрендерится, если что.

ES6 это не что-то другое и модное, это javascript. Желательно знать. Yarn вместо npm - ничего особого опять же, он делает все то же самое, названия команд немного отличаются, и то с новой версией npm вроде в нем и нет смысла уже. Раньше смысл был в скорости и еще вроде в том, что yarn автоматически добавляет установленный пакет в зависимости. Теперь это npm тоже делает. В любом случае, если знакомы с npm, то yarn это 5-10 минут чтобы разобраться.
Остается только webpack, но если нет желания совсем в нем разбираться, можно найти starter kit на гитхабе.
В итоге, ничего тут страшного нигде нет. А что-то новое постоянно будет, особенно, если долго не следить за тенденциями.

Судя по package.json это последняя версия webpack, и в их документации немного по-другому все это дело указывается. Может проблема в этом, попробуйте как указано в документации:

module: {
  rules: [
    {
      test: /\.js$/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}

В вашей ссылки JS кода нет, но я б предложил использовать ref (посмотрите документацию), а также поместить этот код в componentDidMount, один из lifecycle методов.

Смотря, что имеется ввиду под "фронтэнд". Умение разобраться в HTML/CSS/JS коде будет необходимо. А фронтэнд экосистему, скорее всего, нет (вещи типа webpack, react и т.п.).

Как вариант, посмотрите в сторону Nextjs. Это server-side rendered React. Вы можете не париться с webpack и прочим и сразу начать писать код. Можно быстро пробежаться по Learn NextJS , чтоб разобраться с фреймворком.

Webpack сейчас встречается довольно часто, так что какой-то конфиг собрать нужно, но с другой стороны сильно париться по этому поводу нет смысла. В основном, главное, чтобы проект работал. Есть готовые конфиги и бойлерплейты и нет ничего плохого в том, чтобы ими пользоваться.

Gulp vs Grunt — Gulp вроде очевидный выбор будет, хотя grunt также используется. А что касается актуальности, то известные front-end разработчики рекомендуют переходить на npm скрипты.

В общем-то, если работа не диктует стек технологий сейчас, то выбор за Вами. Что больше нравится, то и берите.