Praktical React part 2

https://github.com/callmecavs/jump.js  - Dugme da skaces sa dela na deo sajta, npm instal, ukljucis i biras opcije
https://html5up.net/                   - Dobri template sajtovi


---------------------------------------------------------------------------------------------------------------------------------------
**************************************************************************************************************************************
1. Scroll Indicator


clientHeight: The size of the element client area, which refers to the size of the element and the size of the space occupied by the frame (mostly the viewport size is taken out by practice)
scrollHeight: The scroll size, which refers to the size of the element containing the scrolling content (the total height of the element content)
offsetHeight: The offset containing all the visible space used by the element on the screen (including all padding scroll bars and border sizes, excluding margins)
offsetTop: the distance from the top of the parent element at the top of the current element,

const onScroll = () =>{


    const windowScroll = document.documentElement.scrollTop

    const height= document.documentElement.scrollHeight - document.documentElement.clientHeight (viewport size)

    const scrolled = (windowScroll / height) * 100


      setScrollTop(scrolled)
  }


  useEffect(()=>{

 window.addEventListener('scroll', onScroll)


 return () => window.removeEventListener('scroll', onScroll)


  },[])
    <div className='progress-wrapper'>
      <div className='progress-style' style={{width:`${scrollTop}%`}}></div>
      </div>

progress-wrapper obavezno da bude position:stickey, top:0; left:0; width:100%;
---------------------------------------------------------------------------------------------------------------------------------------
***************************************************************************************************************************************
2. Kretanje po dokumentu do bilo koje pozicije

  *useRef samo preko ref={elementPositon} postavis bilo gde na ekranu

  *const goToSection = () => {
    window.scrollTo({ top: elementPosition.current.offsetTop, behavior:'smooth' });
  };

 * das dugmetu ili linku gde hoces da ides i kreces se

---------------------------------------------------------------------------------------------------------------------------------------
***************************************************************************************************************************************
 2. Mapbox veciti problem

@solarstar101 what solutions haven't worked? I'm using @zacharyliu's fix with CRA and it works:

import mapboxgl from "mapbox-gl/dist/mapbox-gl";
mapboxgl.workerClass = require("worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker").default;
I added this in the very root of my app- one of the first files that loads.

This required adding the extra NPM package:

"worker-loader": "3.0.8"
---------------------------------------------------------------------------------------------------------------------------------------
***************************************************************************************************************************************