Михаил Р.

Если я правильно понял вопрос, то Вам нужно чистить state между переходами?

const prevPathname = useRef(pathname);

useEffect(() => {
    if (pathname !== prevPathname.current) {
        dispatch(resetRooms());
    }

    prevPathname.current = pathname;
}, [pathname, dispatch]);

Если я правильно понимаю работу Next.js: компоненты без состояния рендерятся на сервере и могут индексироваться поисковыми роботами

Верно, индексация стандартная.

А с состоянием - на стороне клиента, и роботы их не видят.

Не совсем. Поисковики индексируют динамику, но ограниченно, и она проиграет классической статике или ssr. То, что Вы видите динамику в топе - это не заслуга динамики, а недоработка конкурентов со статикой.

Однако в компоненте самой страницы ArticlePage у меня в любом случае будет использование useState. Значит ли это, что вся страница будет отрисовываться на клиенте?

Не совсем. Часть страницы будет отрисована на сервере, а часть на клиенте.

И что поисковые роботы обойдут контент страницы стороной?

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

P.S. Вопрос, возможно, глупый, но я правда не понимаю...

К нексту у многих имеются вопросы, поэтому Вы не первый и уж тем более, не последний :)

Если я буду помещать большое изображение в маленькие карточки, картинка будет искажаться, а мне этого не нужно.

CSS object-fit.

либо же это должно происходить на сервере?

На сервере, сразу получать изображение необходимого размера.

Реакт использует контекст, чтобы управлять хуками и их состоянием. Когда компонент реакта рендерится, реакт устанавливает ReactCurrentDispatcher (текущий диспетчер хуков) в соответствующий объект диспетчера для этого рендера. Это позволяет хукам (например, useState) обращаться к текущему состоянию и методам жизненного цикла компонента без необходимости явно передавать какие либо ссылки на компоненты или их состояние.

https://github.com/facebook/react/issues/14022#iss...
Переменная ReactCurrentDispatcher.current по умолчанию имеет значение null, потому что вне контекста рендера компонента использование хуков не имеет смысла. Если Вы попытаетесь использовать хук вне компонента (в обычной функции JavaScript), ReactCurrentDispatcher.current будет null, что приведет к ошибке, указывающей на неверный вызов хука.

Реализация хуков находится в исходном коде реакта. Там же можно посмотреть, как реакт реализует useState и прочие хуки.

How hooks work | How React Works
Заметка о том, как работают хуки в React
Первое погружение в исходники хуков

Но это все текст с кучей отдельных элементов. Неужели каждый элемент вручную с помощью % нужно высчитывать и рисовать?

- Svg, с расположением каждой части в нужном месте, например: d: path("M 1072.8 952.661 V 336.358").
- Каждый элемент svg имеет свой id (например: id="path12523-5"), к которому можно обратиться из css/js.
- Для каждого разрешения дисплея - отдельный svg, но со старыми id.
- JS передает логику по id элементов в svg, не задумываясь, как они там расположены.

Нормально если первый стейт менеджер для react который я буду учить — будет mobx, а не Redux?

Нормально ли будет если в резюме есть mobx вместо redux?

Давайте проведем анализ хэхэ на 02.2024:
- Redux (772 вакансии).
- Mobx (235 вакансий).
- Zustand (21 вакансия).

Резюмируя, Ваш навык Mobx примерно в 3 раза менее ценен на рынке, чем навык Redux. Разумеется, сравнение поверхностное, но какой то вывод можно сделать.

npm start

Есть потребность сделать часть функционала сайта на react, реализуется такое вообще или нет?)

Реализуется, Add React to an Existing Project и еще пример. В моем случае частая связка WordPress + часть функционала на React.

по какой причине может появиться ошибка target Element not found?

По той же, что и без реакта - этого элемента не существует на момент взаимодействия с ним.

Пока нашел только react quill и tiny mce.

Плохо искали, их там десятки. Гуглить - reactjs wysiwyg editor.

Как можно реализовать такой функционал?

Использовать готовые библиотеки

Какие есть библиотеки, что бы этот редактор был прямо на сайте?

https://github.com/zenoamaro/react-quill
https://github.com/ianstormtaylor/slate
https://github.com/jpuri/react-draft-wysiwyg

Вы создали не правильную структуру компонентов React Router. < Router> должен быть размещен в самом верху относительно вложенности всех компонентов, обычно это в районе < App>. Так же, для навигации Вы используете href, когда должны использовать компонент React Router - Link.

Это что такое?

<Route exact path='/contacts' Component={Contacts} />
// Component={Contacts} ???

Попробуйте так (если App является корневым компонентом):

import React from 'react';
import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom';
import './App.scss';

import Header from './components/Header';
import Service from './pages/Service';
import Contacts from './pages/Contacts';
import Login from './pages/Login';
import Home from './pages/Home';

function App() {
  return (
    <Router>
      <div className="App">
        <Header />

        <nav>
          <Link to="/">Главная</Link>
          <Link to="/service">Услуги</Link>
          <Link to="/contacts">Контакты</Link>
          <Link to="/login">Вход</Link>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/service" element={<Service />} />
          <Route path="/contacts" element={<Contacts />} />
          <Route path="/login" element={<Login />} />

          <Route path="*" element={<NotFoundRoute/>} />
        </Routes>
      </div>
    </Router>
  );
}

// not fount route handler
function NotFoundRoute() {
  return <div>Page not found</div>;
}

export default App;

Header.js:

import {Link} from "react-router-dom";

function Header(props) {
  return (
    <>
      <header>
        // ...

        <Link to="/service">Услуги</Link>
        <Link to="/contacts">Контакты</Link>

        // ...
      </header>
    </>
  )
}

export default Header;

Или можно обойтись без него?

Чем больше приложение, тем более оправданно использование централизированного хранения состояния.

как именно и где хранит состояния react

Локальное, обычно хранится в верхнем компоненте:
const [count, setCount] = useState(0);
Глобальное, например Redux, храним в централизованном месте, называемым store.
Все остальные примеры Вы можете посмотреть в конкретной документации, ну либо задать более конкретные вопросы.

Почему dispatch нельзя использовать в потоке кода при отрисовке компонента?

- Проблемы с производительностью: Если бы dispatch вызывался прямо в теле компонента (то есть во время его рендеринга), каждый раз, когда компонент рендерится (например, из-за изменения других данных на странице), он бы снова и снова добавлял товар в корзину (в контексте интернет-магазина). Это приведет к бесконечному циклу и сильно замедлит работу приложения.
- Непредсказуемость поведения: Поскольку рендеринг компонентов может происходить по разным причинам и в разное время, использование dispatch в процессе может привести к непредсказуемым и нежелательным изменениям в состоянии приложения. В контексте интернет-магазина, товары могли бы добавляться в корзину без Вашего ведома.
- Сложности в управлении состоянием: Использование dispatch во время рендеринга усложняет понимание того, когда и почему происходят изменения в состоянии приложения, что затрудняет отладку и поддержку кода.

Именно поэтому лучше использовать dispatch внутри обработчиков событий (например, при клике на кнопку) или внутри useEffect, где Вы имеете полный контроль над тем, когда и по какой причине должны происходить изменения состояния.

А если так?

return (
  <>
    {collections.map((obj) => (
      <Collection name={obj.name} images={obj.photos} />
    ))}
  </>
);