ArgeoMer

Сразу пишите в jsx

Да.

Как подключаете less/sass?

Как css/sass modules.

Структура:
- Страница < компонент
- Страница < компонент < компонент

До "Страницы" желательно некий Middleware с управлением состояния и запросами на сервер.

Реакт придерживается концепции "чистых" функций. Т.е. таких функций, которые всегда дают одинаковый, предсказуемый результат при одинаковых входных параметрах. В режиме разработки, с включенным strict-mode реакт помогает выявить непредвиденные эффекты и состояния, возникающие в результате нарушения концепции, вызывая дважды все функции, которые он считает "чистыми". Как это работает?
Предположим, вы написали функцию, которая по сигналу "свет" - включает свет. Но если свет уже включен - функция его выключает. Вы довольны и счастливы - послали сигнал "свет" - свет включился, послали еще один сигнал "свет" - выключился. Но в режиме strict-mode - вы обнаружите, что свет не включается, потому что реакт шлет второй сигнал "свет", который выключает после первого сигнала! И опять, возникает вопрос - да зачем это нужно? А затем, что вы не можете предсказать результат действия сигнала "свет", не зная текущего состояния! Возникнет острая необходимость - включить свет, а вы не знаете - включен он сейчас или нет... Пошлете сигнал "свет", когда он включен - получите выключение.
Примерно такие варианты поведения выявляет strict-mode.

Проблема не в useRef, проблема в том как работает console.log. Если в console.log передается объект, то он выводится по ссылке, в итоге получается, что когда обновляется ref, то браузер автоматом обновляет его в консоли.
Чтобы проверить, что useRef работает как надо - достаточно вывести current значение из ref, т.е. console.log(t.current, 0)
Если же нужно вывести именно объект на момент его логирования, то можно привести объект к строке и снова собрать в объект:
console.log(JSON.parse(JSON.stringify(t, 0)))

На MDN можно почитать про это

Есть 2 основных подхода для решения проблемы изоляции имен в модулях:
- подход webpack до 4 версии включительно - завернуть каждый исходный модуль в свою функцию и переложить эту задачу на средства языка js;
- подход rollup и последователей типа vite - произвести переименование сущностей так, чтоб разные сущности из разных модулей названные одинаково назывались по разному, а одни и те же сущности названные по разному в разных модулей назывались одинаково.

У каждого из подходов есть свои плюсы и минусы.
В подходе webpack с одной стороны получается очень надежная изоляция, так как работают средства самого языка, но с другой на выходе получается больше кода, так как добавляются обертки + некий рантайм для взаимодействия виртуальных модулей. Так же такой код хуже оптимизируется на постобработке, так как тулзы вроде terser банально не могут восстановить связи между разными модулями. Хотя тот же рантайм позволяет гибко разбивать код на чанки и эмулировать динамические импорты.
В подходе rollup возможны ошибки на промежуточной обработке (сам rollup предусматривает большинство из них, а вот плагины могут накосячить, особенно на больших проектах), зато нет дополнительного кода и тулзы вроде terser могут обрабатывать весь бандл целиком со всеми межмодульными связями, а значит делать более эффективные оптимизации.

В webpack 5 был использован гибридный подход. Модули все так же изолируются средствами языка и соединяются посредством рантайма. Но часть модулей могут быть соединены в один по принципу rollup, что улучшает общий размер бандла и оптимизацию на постобработке.

P.S. сделайте небольшой проект из примерно 10 модулей, соберите его webpack/rollup в dev режиме и посмотрите что получается на выходе, очень многое станет понятно, если просто почитать код получившегося бандла.

Обычно на ПК(Windows 10)
шрифты хранятся по этому пути:
C:\Windows\Fonts\какой-то там шрифт

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

А если у пользователя не будет шрифта на компе,
то браузер скачает данный шрифт у вас с сайта,
если конечно вы правильно указали путь по которому можно скачать шрифт.