[Tutorial] Use of Deprecated Functions useRef()

[geefuoco]

I am working through the tutorial and I noticed that useRef is used in multiple places. The app is declaring it as deprecated, and should be replaced with useSignal.

[forresst]

While waiting for an update of the tutorial, here is the solution to use useSignal instead of useRef.

import { component$, useSignal, useClientEffect$, useStore } from '@builder.io/qwik';

export const App = component$(() => {
  const store = useStore({
    width: 0,
    height: 0,
  });
  const outputRef = useSignal<Element>();
  useClientEffect$(() => {
    if (outputRef.value) {
      const rect = outputRef.value.getBoundingClientRect();
      store.width = Math.round(rect.width);
      store.height = Math.round(rect.height);
    }
  });

  return (
    <div>
      <div style={{ border: '1px solid red', width: '110px' }} ref={outputRef}>
        Change text value here to stretch the box.
      </div>
      <div>
        The above red box is {store.height} pixels high and {store.width} pixels wide.
      </div>
    </div>
  );
});

[zanettin]

@geefuoco @forresst opened a first tutorial update draft. please let me know if anything is missing 🙏