Михаил Р.

Есть потребность сделать часть функционала сайта на 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} />
    ))}
  </>
);

React Developer Tools

- https://github.com/CookPete/react-player (библиотека поддерживает возможность создания плейлистов из массива).
- https://videojs.com/guides/react/ (можно создать видеоплеер с возможностью добавления серий или плейлистов).
- https://github.com/vidstack/vidstack ("серии" нужно реализовать руками, хотя частично, функционал имеется).

https://www.robinwieruch.de/react-router-nested-routes
https://www.positronx.io/react-js-nested-routes-us...

import {BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom';

function App() {
  const {getUser, user, setUser} = useUser();

  return (
    <Router>
      <Routes>
        <Route path="/" element={<LoginForm user={user} getUser={getUser}/>}/>
        <Route path="login" element={<LoginForm user={user} getUser={getUser}/>}/>
        <Route path="dashboard/*" element={<PrivateRoute user={user}><DashboardRoutes user={user}/></PrivateRoute>}/>
      </Routes>
    </Router>
  );
}

export default App;

const DashboardRoutes = ({user}) => (
  <Routes>
    <Route path="/" element={<Dashboard user={user}/>}/>
    <Route path="acts" element={<ActsPage user={user}/>}/>
  </Routes>
);

const PrivateRoute = ({user, children}) => {
  if(localStorage.getItem('token')) {
    return children;
  }
  return <Navigate to="/login"/>;
}

В DashboardRoutes() можно добавлять вложенные роуты.

Как и предполагалось, не удалось найти "серебряную пулю", соответственно, для обоих были выбраны разные инструменты, исходят из факта популярности, количества готовых компонентов и наборов в фигме:
https://getbootstrap.com/
https://mantine.dev/

Начинаем от сюда: https://habr.com/ru/articles/527310/
Затем впитываем один из следующих вариантов, на вкус:
https://nextjs.org/docs/pages/building-your-applic...
https://vitejs.dev/guide/ssr.html

Переменная __DEV__ в исходных кодах React используется для определения режима сборки: разработка или продакшн. Это позволяет добавлять или исключать определенный код в зависимости от режима, что может быть полезно для добавления дополнительных предупреждений, проверок и другого кода, который полезен только во время разработки.

На практике __DEV__ не определяется непосредственно в исходных файлах React. Вместо этого, она обычно заменяется на этапе сборки с помощью инструментов, таких как Webpack или Babel.

Вот как это обычно работает:

1. В исходном коде React, вы можете увидеть конструкции вроде:

if (__DEV__) {
  console.warn('Some warning message');
}

2. Когда React собирается для режима разработки, __DEV__ заменяется на true, а для режима продакшн - на false.

3. Инструменты сборки, такие как UglifyJS или Terser, затем оптимизируют этот код, удаляя условные блоки, которые никогда не выполняются. Например, если __DEV__ заменяется на false, то весь блок if (__DEV__) { ... } будет удален при минификации.

Для того чтобы замена __DEV__ работала, вы обычно настраиваете ваш инструмент сборки (например, Webpack) с помощью плагинов, таких как DefinePlugin для Webpack, который заменяет определенные токены в исходном коде на заданные значения.

В случае с React и многими другими библиотеками, процесс сборки заботится о замене таких переменных, чтобы упростить разработку и оптимизировать выпускаемый код для продакшена.

На правах копипаста, самому в лом писать...

import React, {useState, useEffect} from 'react';

function SuperComponent() {
    // хранилище для пунктов
    const [checkedLanguages, setCheckedLanguages] = useState([]);
    const [displayData, setDisplayData] = useState([]);

    const languagesData = [
        { id: "1", name: "Javascript" },
        { id: "2", name: "Python" },
        { id: "3", name: "Java" },
        { id: "4", name: "Kotlin" },
        { id: "5", name: "Dart" },
        { id: "6", name: "C#" }
    ];

    // фильтруем пункты
    useEffect(() => {
        if (checkedLanguages.length > 0) {
            const newData = languagesData.filter(language => checkedLanguages.includes(language.name));
            setDisplayData(newData);
        } else {
            setDisplayData(languagesData);
        }
    }, [checkedLanguages]);

    function handleCheckboxChange(event) {
        const languageName = event.target.value;
        if (event.target.checked) {
            setCheckedLanguages([...checkedLanguages, languageName]);
        } else {
            const newCheckedLanguages = checkedLanguages.filter(language => language !== languageName);
            setCheckedLanguages(newCheckedLanguages);
        }
    }

    return (
        <div>
            {checkedLanguages.map(language => (
                <div key={language} className="selected-language">
                    <p>{language}</p>
                </div>
            ))}

            {languagesData.map(language => (
                <div key={language.id} className="checkbox-wrapper">
                    <input
                        type="checkbox"
                        value={language.name}
                        onChange={handleCheckboxChange}
                    />
                    <label>{language.name}</label>
                </div>
            ))}

            // отображаем отфильтрованные пункты
            <div className="languages-list">
                {displayData.map(language => (
                    <div key={language.id}>
                        {language.name}
                    </div>
                ))}
            </div>
        </div>
    );
}

export default SuperComponent;

Each child in a list should have a unique "key" prop

https://react.dev/learn/rendering-lists#keeping-li...

// ..

{items.map((i) => (
  <React.Fragment key={i.id}>
    <Item {...i}/>
  </React.Fragment>
))}

// ..

или

// ..

{items.map((i) => (
  <Item key={i.id} {...i}/>
))}

// ..