проблема вот в этой строчке loaders: ['react-hot', 'babel-loader'], поствьте из npm новую версию пакете react-hot-loader@3.0.0-beta.6 и замените эту строку на loaders: ['react-hot-loader/webpack', 'babel-loader'].
У вас класс который запускает анимация называется card1_anim, а при скроле добавляете другой класс bl2_anim. Хотя пишите что при наведении, вначале внимательно в коде разберитесь
А как вы потом множество .css подключать будете? Все равно нужно на выходе слить все в 1 файл, но по вашему вопросу гуглите css-loader и postcss postcss-precss с реактом это очень классно. У вас кстати почти все настроенно.
Попробуй не менять значения атрибута 'd', а сразу задай ему нужные параметры, и задай класс в стилях opacity: 0; visibility: hidden; transition: all .2s linear; и по клику добавляй/удаляй этот класс
без уникального id не получиться, просто это может быть data-атрибут, иначе как понять какое именно модальное окно показать пользователю? Мы делаем так - все кнопкам которые открывают модалки даем data-id="1", data-id="2" и так далее, и точно так же размечаем сами модалки общий wrapper и конкретно окно с data-id, после клика проверяем data-id и показываем модальное окно с соответствующим data-id. Вместо data-id и цифр может быть что угодно, например data-popup="one"
Проще на jquery, а можно и без либ и фреймворков, это не сложно, допустим создаешь класс active для попапа который будет виден, id активного попапа, и по нажатию "далее/назад" проверяешь этот id и переключаешь попап.
Есть функция JSON.parse(); Допустим приходят данные, вы создаете переменную var x = JSON.parse(data); дальше с переменной x работаете как с обычным объектом js - x.name, x.age и так далее.
На любом сайте фриланс биржи, смотрите что там есть, и пытаетесь выполнять. Не обязательно брать заказ, просто смотрите задание, что хочет заказчик, и пытайтесь выполнить.