ForSureN1

// navigation active links
    let menu = document.querySelector('.header__nav');
    let links = menu.querySelectorAll('.nav__list-link');
    window.addEventListener('scroll', function() {
        let pos = window.pageYOffset;
        for (let i = links.length - 1; i >= 0; i--) {
            let link = links[i];
            let target = document.querySelector(link.hash);

            if ((pos + window.innerHeight / 2) > target.offsetTop) {
                if (menu.querySelector('.menu__link-active')) {
                    menu.querySelector('.menu__link-active').classList.remove('menu__link-active');
                }
                link.classList.add('menu__link-active');
                break;
            } else if (pos < target.offsetTop) {
                if (menu.querySelector('.menu__link-active')) {
                    menu.querySelector('.menu__link-active').classList.remove('menu__link-active');
                }
            }
        }
    });
   document.addEventListener('click', function(e) {
        let link = e.target;

        if (link.classList.contains('nav__list-link')) {
            e.preventDefault();
            scrollToTarget(link.hash);
        }
    });

    if (location.hash !== '') {
        scrollToTarget(location.hash);
    }

    function scrollToTarget(id) {
        let target = document.querySelector(id);

        if (target !== null) {
            let pos = target.offsetTop - document.querySelector('header').offsetHeight;

            window.scrollTo({
                top: pos,
                behavior: 'smooth'
            });
        }
    }

Знаю ребят, которые с нулевыми знаниями в JS , работают на Reacte, такая практика конечно плоха, но все же иногда встречается, поэтому лучше задать ваш вопрос немного иначе, нужен ли вам вообще этот фреймворк, на нативном JSe можно делать много крутых вещей, очень часто встречаю данную фразу: "Станьте для начала JavaScript разработчиком, а потом уже выбирайте фреймворк(если он вам конечно нужен будет)"