historydev

Реакт запускает сервер для разработки, если соберёте билд командой npm run build, там будет статика, можно и в php юзать и к ноде подрубить. Внимательно прочитайте документацию.

Привязывайте модалку к id юзера, допустим data-id='34' и при записи комментария в бд, указывайте id нужного юзера, следом тяните этот комментарий по id

vds

::-webkit-scrollbar { width: 6px; height: 3px; background: #222; display: none;}
::-webkit-scrollbar-button { height: 6px; display: none;}
::-webkit-scrollbar-track {  background-color: #333;display: none;}
::-webkit-scrollbar-track-piece { background-color: #555;display: none;}
::-webkit-scrollbar-thumb { height: 50px; background-color: rgb(128, 255, 0); display: none;}
::-webkit-scrollbar-corner { background-color: #999;display: none;}
::-webkit-resizer { background-color: #666;display: none;}

При каждом подключении сокета создаёте таймер и скидываете только сокету, а не всем, тобиш не io.emit, а socket.emit (на сервере).

Скрытие элементов наоборот замедляет процесс т.к. они обрабатываются, но не отображаются, лучше в таком случае вырезать их или вставлять по мере необходимости.

function myFunc() {
   return 'I in cache!'
}

let cache = localStorage;

cache.timer = (function() => {
    return setTimeout(myFunc, 3000)
});

console.log(cache.timer);

function getLabel() {
   return `<span class='customPercents'>${this.getPercentage(dataset, element, index)}%</span>`;
}

async function getFileFromUrl(url='') {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    let response = xhr.onload = (e) => {
        let reader = new FileReader();
        reader.readAsDataURL(xhr.response);
        return reader.onload = (e) => {
            return e.target.result
        };
    };

    await xhr.send();

   return await response

}

const widgetsTransform = widgets.map(item => {
   let items = [];
   items.push({
       type: `Section${item.type}`,
       children: []
   });
   items.find(el => el.type.replace('Section', '') === item.type).children.push(item);
   return items
});

console.log(widgetsTransform);

$(document).ready(function(){

function showxxx()
    {
        $.ajax({
            url: "rand_banner_header.php",
            cache: false,
            success: function(html){
                $("#contentqxxxxxxx").html(html);
            }
        };

        setTimeout(showxxx, 30000);
    });

Не:
import headerScss from './headerStyle.scss';
А:
import './headerStyle.scss';

Вы подключаете какой-то build.js вместо test.js/bundle.js

Обновлять приложение при ресайзе можно вот такой не хитрой конструкцией:

window.onresize = () => {
    ReactDOM.render(<App />, document.getElementById('root'));
};

function setStyles(selector) {
   selector = document.querySelectorAll(selector);
   selector.forEach(el => {
      el.style.background = '#000'
   })
}

Update:
или "супер" методика классов:

function setStyles(selector) {
   selector = document.querySelectorAll(selector);
   selector.forEach(el => {
      el.setAttribute('class', 'myClass');
   })
}

Svg/css Animate дальше гуглите и это прелодер, так-что js плюсуем.

1. Пишите полные имена переменных - account
2. VK-vk, такого говнокода быть не должно - vkToken
3. В остальном по моему мнению неплохо, но в самом низу отступов не хватает между строчками.

twilio

Javascript:

function createPopup(text, element) {
$(element).magnificPopup({
    items: [
      {
        src: `<span>${text}</span>`,
        type: 'inline'
      }
    ],
    gallery: {
      enabled: true
    }
});
}

createPopup('Text', '.open-popup')
createPopup('Text2', '.open-popup2')
createPopup('Text3', '.open-popup3')

Html

<button class="open-popup">Первая кнопка</button>

<button class="open-popup2">Вторая кнопка</button>

<button class="open-popup3">Третья кнопка</button>

$('.mobile-tab').hide();

$('#burg').on('click', function() {
$('.mobile-tab').show();
})