⚡︎React | 3-Phase | CSR⚡︎

⚙️ Menu

	React
📘 React Hooks	📗 React Router	👁️‍🗨️Other
⭐️ useState	⭐️ BrowserRouter	🏁 INIT
⭐️ useEffect	⭐️ Routes	⌨️ Event handlers
⭐️ useCallback	⭐️ Route	📝 Примеры кода
⭐️ useMemo	⭐️ Outlet
⭐️ useContext	⭐️ Link / NavLink
⭐️ useReducer	⭐️ Navigate / useNavigate / Redirect	Git
⭐️ React memo	⭐️ useParams	🔵 Вспоминаем SQL/Sequelize

👁️‍🗨️ Доп 🔽 [в процессе...]

Redux/toolkit
Redux/Saga
Axios
Prisma ORM
Redis
Vitejs

INIT

npx create-react-app client | Create React App: Docs
npx create-react-app client --template typescript | on TypeScript: Docs
npm i react-router-dom | React Router: Docs
npm i @reduxjs/toolkit react-redux @redux-devtools/extension | redux-toolkit: Docs

Расширения в браузер

React Developer Tools | link
Redux DevTools | link

🧑‍🎨 Style

MUI | link
Tailwindcss | link
React-Bootstrap | link
Reactstrap | link

📜 Документация

React.dev | link
React Router | link
w3schools link
redux-toolkit link

React

React - это популярная JavaScript-библиотека, разработанная и поддерживаемая Facebook, для создания пользовательских интерфейсов (UI) веб-приложений. Она позволяет разработчикам создавать крупные веб-приложения с быстро изменяющимися данными без перезагрузки страницы. Основные особенности React включают декларативный подход к созданию UI, компонентный подход к разработке, и эффективное управление состоянием приложения.

Основные принципы React:

Компоненты: React использует компоненты для построения пользовательских интерфейсов. Компоненты - это переиспользуемые и независимые блоки кода, которые могут иметь свое собственное состояние и принимать входные данные (props) от родительских компонентов. Компоненты могут быть как функциональными, так и классовыми.
Однонаправленный поток данных: React следует принципу однонаправленного потока данных (или "однонаправленной связи"), что означает, что данные передаются от родительских компонентов к дочерним компонентам через свойства (props). Это делает поток данных более предсказуемым и упрощает управление состоянием приложения.
Виртуальный DOM: React использует виртуальный DOM для оптимизации работы с реальным DOM. Виртуальный DOM - это легковесная копия реального DOM, которая обновляется при изменении состояния компонентов. React сравнивает новый виртуальный DOM с предыдущим, определяет различия (называемые "diff") и эффективно обновляет только те части реального DOM, которые изменились. Это снижает нагрузку на браузер и улучшает производительность приложения.
Хуки: Хуки введены в React 16.8 и позволяют использовать состояние и жизненный цикл компонентов в функциональных компонентах. Это упрощает разработку и делает код проще для понимания и тестирования.

React используется в сочетании с другими библиотеками и инструментами для создания полноценных веб-приложений. Некоторые из них включают Redux (для управления глобальным состоянием), React Router (для маршрутизации), Axios (Библиотека для выполнения HTTP-запросов) итд.

📘React Hooks

⭐️ useState

официальная документация

useState — это хук (hook) в React, который позволяет добавлять локальное состояние в функциональные компоненты. useState принимает начальное значение состояния и возвращает массив из двух элементов: текущее состояние и функцию для обновления этого состояния.

initialState = [] | начальное состояние
const [state, setState] = useState(initialState); | state — текущее значение состояния
setState((prev) => [...prev, 'hello']); | setState — функция для обновления состояния. При вызове этой функции с новым значением состояние будет обновлено, а компонент перерендерится.

Пример кода

⭐️ useEffect

официальная документация

useEffect — это хук (hook) в React, который позволяет выполнять побочные эффекты, такие как запросы к серверу, подписки на события или обновление DOM в функциональных компонентах. useEffect принимает функцию, которая выполняет побочные эффекты, и массив зависимостей, указывающий, при каких изменениях эффект должен повторно выполняться

useEffect(() => {  // Выполнение побочного эффекта
  
  return () => {     // Очистка побочного эффекта (необязательно)
  };
 
}, [dependencies]);  // Массив зависимостей (необязательно)

❗️обязательный параметр

Функция: функция, в которой выполняется побочный эффект

❗️Опциональный

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

Return - Функция эффекта может возвращать функцию очистки. Эта функция вызывается перед размонтированием компонента или когда какая-либо из зависимостей изменяется. Функция очистки используется для отмены действий, выполненных в функции эффекта, например, отписки от событий, очистки таймеров и т. д.

Пример кода

⭐️ useCallback

официальная документация

useCallback — это хук в React, который позволяет мемоизировать (кэшировать) функции-обработчики событий или другие функции внутри функционального компонента. Это полезно для оптимизации производительности, особенно при работе с компонентами, которые часто ререндерятся или имеют оптимизированных дочерних компонентов (например, обернутых в React.memo).

❗️обязательный параметр

Функция: Функция, которую нужно мемоизировать

❗️Опциональный

Массив зависимостей: Массив зависимостей, содержащий все переменные, от которых зависит функция

❗️️Return - useCallback возвращает мемоизированную версию переданной функции, которая изменяется только тогда, когда значения зависимостей изменяются. Это предотвращает создание новых ссылок на функции при каждом ререндере и, таким образом, предотвращает ненужные ререндеры дочерних компонентов.

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

const ExampleComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);
  
  // Здесь мы можем использовать incrementCount, например, как обработчик событий для кнопки
};

В этом примере, функция incrementCount мемоизируется с помощью useCallback. Зависимостей у функции нет, поэтому массив зависимостей пуст. Это означает, что incrementCount будет создана только один раз при первом рендере, а при последующих ререндерах будет использоваться мемоизированная версия функции.

Пример кода

⭐️ useMemo

официальная документация

useMemo - это хук в React, который используется для мемоизации вычисляемых значений, зависящих от некоторых зависимостей. Это позволяет избежать повторных вычислений при каждом рендере компонента, если зависимости не изменились. Коротко говоря useMemo запоминает выполнение функции.

❗️обязательный параметр

Функция: которая вычисляет значение, которое нужно мемоизировать. Эта функция вызывается только тогда, когда значения зависимостей изменяются.

❗️Опциональный

Массив зависимостей: Массив зависимостей, содержащий все переменные, от которых зависит функция

❗️️Return - useCallback возвращает мемоизированную версию переданной функции, которая изменяется только тогда, когда значения зависимостей изменяются.

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

const computeExpensiveValue = (a, b) => {
  // Здесь может быть дорогостоящая операция
  return a + b;
};

const ExampleComponent = () => {
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);

  const expensiveValue = useMemo(() => {
    return computeExpensiveValue(num1, num2);
  }, [num1, num2]);

  // Здесь мы можем использовать expensiveValue, например, для отображения его значения или передачи другим компонентам
};

Пример кода | Menu

⭐️ useContext

официальная документация

useContext - это хук в React, который позволяет функциональным компонентам подписываться на контекст и получать его значения. Контекст используется для передачи данных через дерево компонентов без необходимости передавать пропсы на промежуточных уровнях. Это особенно полезно для передачи глобальных данных, чтобы избежать пропс дриллинга.

Для использования useContext, вам сначала нужно создать контекст с помощью функции React.createContext(): создаем файл в папке Context/Usercontext.jsx

import React from 'react';

const UserContext = React.createContext();

Затем вы можете использовать компонент UserContext.Provider для оборачивания частей дерева компонентов, которым должны быть доступны данные контекста:

import React from 'react';
import UserContext from './UserContext';

const App = () => {
  const [user, setUser] = React.useState();

  return (
    <UserContext.Provider value={user}>
      {Здесь ваше дерево компонентов, которым доступен контекст}
    </UserContext.Provider>
  );
};

export default App;

Теперь вы можете использовать хук useContext в функциональных компонентах для доступа к данным контекста:

import React, { useContext } from 'react';
import UserContext from './UserContext';

const UserComponent = () => {
  const user = useContext(UserContext);

  return <div>My name is {user}</div>;
};

export default UserComponent;

В этом примере мы импортируем контекст UserContext и используем хук useContext для получения текущей темы. Теперь компонент UserComponent может реагировать на изменение темы, не нуждаясь в пропсах для передачи данных о теме.

❗️обязательный параметр

Контекст - Это контекст, который был создан с помощью функции React.createContext(). Вы должны передать этот контекст в качестве аргумента при вызове useContext.

❗️️Return: useContext возвращает текущее значение контекста для ближайшего Provider данного контекста в дереве компонентов. Если нет соответствующего Provider, то возвращается значение по умолчанию, которое было указано при создании контекста с помощью React.createContext().

⭐️ useReducer

официальная документация

useReducer - это хук в React, который позволяет управлять состоянием компонента с использованием понятия редуктора. Редуктор - это функция, которая принимает текущее состояние и действие, а затем возвращает новое состояние. useReducer особенно полезен для управления сложными состояниями или когда следующее состояние зависит от предыдущего.

useReducer принимает два аргумента и один опциональный:

Редуктор: Это функция, которая принимает текущее состояние и действие, а затем возвращает новое состояние.
Начальное состояние: Это начальное значение состояния.
Инициализатор (опциональный): Это функция, которая принимает начальное состояние в качестве аргумента и возвращает начальное состояние, которое будет использоваться. Это может быть полезно, если вам нужно выполнить некоторые вычисления для определения начального состояния.

useReducer возвращает массив с двумя элементами:

Текущее состояние: Это текущее значение состояния, управляемое редуктором.
Функция dispatch: Эта функция используется для отправки действий, которые обрабатываются редуктором для обновления состояния.

Пример использования useReducer:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      <div>Count: {state.count}</div>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
};

export default Counter;

В этом примере у нас есть начальное состояние { count: 0 } и редуктор, который обрабатывает два действия: increment и decrement. Мы используем useReducer с этим редуктором и начальным состоянием. Хук возвращает текущее состояние и функцию dispatch.

Кнопки вызывают функцию dispatch с соответствующими действиями. Редуктор обрабатывает эти действия и возвращает новое состояние. Обратите внимание, что состояние обновляется непосредственно в редукторе, и мы не вызываем setState или другой

⭐️ React memo

официальная документация

memo — Это высокоуровневый компонент, который оборачивает функциональный компонент и предотвращает его ререндер, если пропсы (свойства) не изменились. React.memo сравнивает предыдущие и текущие пропсы с помощью поверхностного сравнения или кастомной функции сравнения. Если пропсы не изменились, React.memo предотвращает ререндер компонента и использует предыдущий результат рендеринга. React.memo полезен для оптимизации производительности функциональных компонентов, которые часто ререндерятся из-за изменения пропсов.

❗️обязательный параметр

Компонент: Функциональный компонент, который вы хотите оптимизировать с помощью React.memo. React.memo оборачивает этот компонент и возвращает новый компонент с мемоизированным поведением.

❗️(Опциональный) Функция сравнения: Функция, которая будет использоваться для сравнения предыдущих и текущих пропсов. Если функция сравнения не предоставлена, React.memo будет использовать поверхностное сравнение (shallow comparison). Функция сравнения принимает два аргумента – предыдущие пропсы и текущие пропсы – и должна вернуть true, если пропсы равны, и false, если они разные. Если функция возвращает true, React.memo не будет вызывать ререндер компонента.

Пример кода:

import React, { useContext } from 'react';
import { Link } from 'react-router-dom';
import { UserContext } from '../../Context/User.context';

function PostListItem({ title, postId, userId, handleRemove }) {
  const { user } = useContext(UserContext);
  return (
    <div>
      <h4>{title}</h4>
      <Link to={`/post/${postId}`}>to details</Link>
      {user?.id === userId && <button type="button" onClick={() => handleRemove(postId)}>x</button>}
    </div>
  );
}
export default React.memo(PostListItem);

📗React Router

официальная документация

React-Router - это библиотека маршрутизации, обеспечивает переход между различными компонентами React, когда пользователь взаимодействует с интерфейсом. react-router поддерживает маршрутизацию как на стороне клиента (client-side), так и на стороне сервера (server-side). React-Router предоставляет ряд компонентов и хуков, которые могут быть использованы для создания маршрутизации.

Некоторые из основных компонентов react-router включают:

⭐️ BrowserRouter

Компонент-обёртка, который использует HTML5 History API для синхронизации UI с URL-адресом в браузере. Он обеспечивает базовую навигацию и должен быть помещен в корень вашего приложения, окружая все маршрутизируемые компоненты.

⭐️ Routes

компонент, который объединяет несколько компонентов Route и определяет, какой компонент должен быть отображен на странице в зависимости от текущего URL.

Компонент Routes используется вместе с компонентом Router, который определяет, какой URL должен соответствовать какому компоненту.

❗️обязательный параметр

children: Обязательное свойство, определяющее дочерние маршруты, которые будут вложены в Routes. Обычно здесь размещаются компоненты Route для определения различных маршрутов

❗️Опциональный

location: Опциональное свойство, позволяющее передать собственный объект location для определения текущего маршрута. Это может быть полезно в редких случаях, когда вам нужно вручную контролировать местоположение вместо использования автоматического определения маршрута библиотекой react-router-dom.

Пример кода

⭐️ Route

компонент, который определяет, какой компонент отображать на странице, в зависимости от текущего URL. Он используется вместе с компонентом Router, который определяет, какой URL должен соответствовать какому компоненту.

❗️обязательный параметр

element - Обязательное свойство, определяющее компонент, который будет отображаться при совпадении маршрута

❗️Опциональный

path - Опциональное свойство, определяющее путь URL, который будет сопоставлен с этим маршрутом. Путь может содержать параметры (например, :id). Если path не указан, маршрут будет считаться "пойманным всем" и будет рендериться, когда другие маршруты не совпадают.

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

caseSensitive - булево свойство, определяющее, будет ли маршрут учитывать регистр при сопоставлении путей. По умолчанию равно false, что означает, что маршрут будет сопоставляться без учета регистра.

index - булево свойство, определяющее, будет ли данный маршрут считаться индексным маршрутом для своего родителя. Если true, маршрут будет отображаться, когда родительский маршрут точно совпадает с текущим маршрутом. По умолчанию равно false.

strict - булево свойство, определяющее, будет ли маршрут точно сопоставляться с путем с учетом слеша / на конце. Если true, маршрут будет считаться совпадающим только в том случае, если слеш на конце пути будет соответствовать текущему маршруту. По умолчанию равно false.

Пример кода

⭐️ Outlet

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

️Не имеет свойств.