🚀 Интернационализация (i18n) в React: адаптируем приложение для разных языков с i18next

Привет, разработчики! 👋 Если ваш проект рассчитан на международную аудиторию, интернационализация (или i18n) — это незаменимый инструмент. С помощью i18n можно сделать так, чтобы интерфейс отображался на разных языках, улучшая пользовательский опыт и расширяя аудиторию. Сегодня разберем, как настроить i18n в React с помощью популярной библиотеки i18next.

🔹 Шаг 1: Установка и настройка i18next

Для начала установим библиотеку и её интеграцию с React:

npm install i18next react-i18next

Теперь создаем файл i18n.js для настройки. Здесь указываем языки и начальную конфигурацию:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
   resources: {
      en: { translation: { welcome: "Welcome to our application!" }},
      ru: { translation: { welcome: "Добро пожаловать в наше приложение!" }}
   },
   lng: "en", // Язык по умолчанию
   fallbackLng: "en", // резервный язык
   interpolation: { escapeValue: false },
});

export default i18n;

🔹 Шаг 2: Используем переводы в компонентах

Теперь, чтобы выводить переводимый текст, используем хук useTranslation:

import { useTranslation } from 'react-i18next';

function Welcome() {
   const { t } = useTranslation();
   return <h1>{t("welcome")}</h1>;
}

Здесь t("welcome") динамически выводит текст на нужном языке.

🔹 Шаг 3: Переключение языков в приложении

Чтобы пользователи могли менять язык, добавляем функцию переключения:

import i18n from "i18next";

function LanguageSwitcher() {
   const changeLanguage = (lang) => i18n.changeLanguage(lang);

   return (
      <div>
         <button onClick={() => changeLanguage("en")}>English</button>
         <button onClick={() => changeLanguage("ru")}>Русский</button>
      </div>
   );
}

🔹 Полезные рекомендации

1. Организуйте переводы в JSON-файлы — это делает управление текстами проще.
2. Используйте ключи вместо текста, чтобы предотвратить ошибки и дублирование.
3. Поддержка fallback — если перевод отсутствует, текст отображается на основном языке.

🎯 Заключение

i18next — отличный инструмент для работы с несколькими языками в React. Благодаря ему вы легко адаптируете приложение под разные рынки, что делает его доступнее и привлекательнее для глобальной аудитории! 🌐

ReactJs Daily | #begginers

📝Best Practices: Typescript - утилитные типы для мощной типизации!

Привет, друзья! 👋 Давайте обсудим одну из самых полезных фишек TypeScript — утилитные типы. Они помогают писать более гибкий и мощный код, облегчая работу с типами и уменьшая количество повторяющегося кода. Если вы хотите максимально использовать возможности TypeScript, утилитные типы — это ваш must-have инструмент! 💪

🔹 Что такое утилитные типы?
TypeScript поставляется с набором готовых типов (Utility Types), которые помогают модифицировать существующие типы для разных задач. Они делают работу с типами более удобной и позволяют динамически изменять структуры, не создавая их с нуля.

🔹 Примеры самых популярных утилитных типов

1. `Partial<T>` — делает все поля объекта необязательными.

   type User = { id: number; name: string; age: number };
   type PartialUser = Partial<User>; // { id?: number; name?: string; age?: number }
   

2. Pick<T, K> — выбирает определенные поля из типа.

   type User = { id: number; name: string; age: number };
   type UserPreview = Pick<User, 'id' | 'name'>; // { id: number; name: string }
   

3. Omit<T, K> — исключает определенные поля из типа.

   type User = { id: number; name: string; age: number };
   type UserWithoutAge = Omit<User, 'age'>; // { id: number; name: string }
   

4. ReturnType<T> — извлекает тип, возвращаемый функцией.

   function getUser() {
      return { id: 1, name: 'Alice', age: 30 };
   }
   type UserType = ReturnType<typeof getUser>; // { id: number; name: string; age: number }
   

🔹 Как это помогает?
Эти типы позволяют легко менять и комбинировать существующие структуры данных, делая код чище и более читаемым. Например, если нужно создать вариант типа для редактирования или отображения данных — Partial и Pick делают это за секунды, без дублирования кода.

🎯 Заключение
Утилитные типы — это огромный плюс TypeScript, который ускоряет разработку и минимизирует ошибки. Работайте гибко и используйте весь потенциал TypeScript для создания мощных, масштабируемых приложений! 🚀

ReactJs Daily | #shortinfo

🚀 Упрощаем управление состоянием в React-приложениях с Redux Toolkit!

Вечер добрый, разработчики! 👋 Обсудим Redux Toolkit — библиотеку, которая делает работу с Redux намного проще и быстрее. Если классический Redux казался вам слишком сложным или громоздким, Redux Toolkit решает эту проблему, добавляя удобные инструменты и упрощая настройку.

🔹 Что такое Redux Toolkit?

Redux Toolkit — это официальный инструмент для более удобного и упрощенного использования Redux. Он включает мощные утилиты и автоматизирует создание экшенов и редьюсеров, благодаря чему сокращает количество шаблонного кода.

🔹 Основные функции Redux Toolkit

1. configureStore
Простая настройка стора с уже встроенными DevTools и middleware для логирования. Теперь создание стора занимает всего пару строк:

   import { configureStore } from '@reduxjs/toolkit';
   import cartReducer from './cartSlice';

   const store = configureStore({
      reducer: {
         cart: cartReducer,
      },
   });
   

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

   import { createSlice } from '@reduxjs/toolkit';

   const cartSlice = createSlice({
      name: 'cart',
      initialState: [],
      reducers: {
         addItem: (state, action) => {
            state.push(action.payload);
         },
         removeItem: (state, action) => {
            return state.filter((item) => item.id !== action.payload.id);
         },
      },
   });

   export const { addItem, removeItem } = cartSlice.actions;
   export default cartSlice.reducer;
   

3. createAsyncThunk
Инструмент для обработки асинхронных действий, таких как запросы к API. Он автоматически добавляет состояния "loading", "success" и "error" для управления запросами:

   import { createAsyncThunk } from '@reduxjs/toolkit';

   export const fetchProducts = createAsyncThunk(
      'products/fetchProducts',
      async () => {
         const response = await fetch('/api/products');
         return response.json();
      }
   );
   

🔹 Почему стоит использовать Redux Toolkit?

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

А так же в нём есть очень крутая штука RTK Query — это мощный инструмент из Redux Toolkit для работы с данными из API в React-приложениях. Он автоматизирует процесс запроса, кеширования, обновления данных и синхронизации состояния. RTK Query особенно полезен для приложений, которые часто взаимодействуют с сервером, так как он берет на себя управление состоянием загрузки, успешными ответами и ошибками. С ним запросы к API можно настраивать буквально в пару строк!

Пример настройки запроса:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
   reducerPath: 'api',
   baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
   endpoints: (builder) => ({
      getProducts: builder.query({
         query: () => '/products',
      }),
   }),
});

export const { useGetProductsQuery } = api;

RTK Query избавляет от необходимости вручную прописывать логику работы с API, делая код чище и упрощая поддержку приложения.

🎯 Заключение

Redux Toolkit — это мощный инструмент, который помогает быстрее развернуть и поддерживать состояние в React-приложении. Попробуйте интегрировать его в ваш проект и насладитесь удобством и быстротой работы с Redux!


P.S. На текущей работе как раз используем rtk query, невероятно мощная и удобная штука.

ReactJs Daily | #pro

🚀 Как использовать Context API для шаринга состояния без Redux?

Привет! 👋 Недавно мы обсуждали управление состоянием с помощью Redux и Redux Toolkit, но сегодня давайте разберём альтернативный подход — Context API в React, который тоже помогает работать с глобальным состоянием. Context API — встроенный инструмент в React для шаринга состояния между компонентами, минуя передачу через пропсы.

🔹 Что такое Context API?
Context API позволяет передавать данные напрямую из одного компонента в другой, минуя промежуточные уровни. Это полезно, когда нужно, чтобы состояние, например, тема или авторизация, было доступно сразу во всём приложении. Контекст делает приложение проще и избавляет от «пробрасывания пропсов» (props drilling).

🔹 Как использовать Context API для управления глобальным состоянием?
Context API удобно использовать для шаринга небольших данных. Давайте создадим простой контекст и посмотрим, как его можно настроить:

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const useTheme = () => useContext(ThemeContext);

Теперь каждый компонент, использующий useTheme(), будет иметь доступ к данным theme и функции setTheme:

const ThemedButton = () => {
  const { theme, setTheme } = useTheme();
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Переключить тему
    </button>
  );
};

🔹 Когда использовать Context API?
Context API подходит для небольших проектов или для состояний, которые не требуют масштабного управления, как в Redux. Это простой способ сделать глобальное состояние доступным, не добавляя зависимости в виде Redux.

🎯 Заключение
Context API — это встроенное решение в React, которое упрощает шаринг данных. В крупных приложениях или при сложной логике состояния Redux или Redux Toolkit могут быть более удобными, но для простых задач Context API отлично подходит, не перегружая приложение лишними зависимостями.

ReactJs Daily | #begginers

📝 Продолжаем изучение контекста в React: useContextSelector 🚀

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

🔹 Зачем useContextSelector?
При использовании стандартного useContext любое изменение контекста приводит к ререндеру всех компонентов, его использующих. useContextSelector решает эту проблему, позволяя подписываться только на выбранные части данных. Это снижает нагрузку и улучшает производительность, особенно при работе с большими данными.

🔹 Как использовать useContextSelector?

1. Установка:

npm install use-context-selector

2. Пример:

import { createContext, useContextSelector } from 'use-context-selector';

const UserContext = createContext();

function UserProvider({ children }) {
   const [user, setUser] = useState({ name: 'Андрей', age: 30 });
   return (
      <UserContext.Provider value={{ user, setUser }}>
         {children}
      </UserContext.Provider>
   );
}

function UserName() {
   // Только подписка на имя пользователя
   const name = useContextSelector(UserContext, (context) => context.user.name);
   return <p>Имя: {name}</p>;
}

function UserAge() {
   // Только подписка на возраст пользователя
   const age = useContextSelector(UserContext, (context) => context.user.age);
   return <p>Возраст: {age}</p>;
}
   

Теперь компоненты UserName и UserAge будут ререндериться только при изменении соответствующих данных.

🎯 Заключение: useContextSelector — мощный инструмент для работы с контекстом в React, позволяющий оптимизировать производительность.

ReactJs Daily | #shortinfo

🚀 Часть 1: Введение в Recoil и работа с атомами

Recoil — это легковесная библиотека для управления глобальным состоянием в React. Разработанная Facebook, она направлена на решение задач, с которыми разработчики сталкиваются при работе с React Context API или Redux. Recoil позволяет легко организовать состояние, избегая лишних рендеров и упрощая доступ к данным.

Преимущества Recoil:
1. Гибкость — Recoil позволяет структурировать состояния в атомах и селекторах, что облегчает масштабирование.
2. Оптимизация рендеров — подписка на атомы позволяет перерисовывать только нужные компоненты.
3. Простота работы с асинхронными операциями — Recoil имеет встроенную поддержку для запросов к API.

🔹 Начальная настройка Recoil
Чтобы использовать Recoil в проекте, начнем с установки библиотеки:

npm install recoil

Теперь обернем все приложение в <RecoilRoot>, который предоставляет доступ к Recoil-состоянию:

// index.js или App.js
import React from 'react';
import ReactDOM from 'react-dom';
import { RecoilRoot } from 'recoil';
import App from './App';

ReactDOM.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>,
  document.getElementById('root')
);

С этим настроено, теперь можно создавать атомы и подключать их в компоненты.

🔹 Основные концепции: атомы

Атомы — это минимальные единицы состояния в Recoil. Каждый атом управляет небольшим участком данных, который может быть использован в разных компонентах. Когда атом изменяется, Recoil автоматически обновляет все компоненты, которые подписаны на него.

Создание атома

// atoms.js
import { atom } from 'recoil';

export const todoListState = atom({
  key: 'todoListState', // уникальный ключ
  default: [], // начальное значение
});

Здесь мы создали todoListState, который будет хранить массив задач.

Использование атома в компоненте

// TodoList.js
import React from 'react';
import { useRecoilState } from 'recoil';
import { todoListState } from './atoms';

function TodoList() {
  const [todos, setTodos] = useRecoilState(todoListState);

  const addTodo = () => {
    setTodos([...todos, { id: todos.length + 1, text: 'Новая задача' }]);
  };

  return (
    <div>
      <h3>Список задач:</h3>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
      <button onClick={addTodo}>Добавить задачу</button>
    </div>
  );
}

export default TodoList;

Здесь useRecoilState используется для подписки на todoListState. Теперь todos будет обновляться при изменениях todoListState, и компонент автоматически перерисуется.

🔹 Дополнительные хуки для атомов
- useRecoilValue: если нужно только прочитать значение атома, используйте useRecoilValue. Он возвращает текущее значение атома.
- useSetRecoilState: если нужно только установить значение атома (без чтения), используйте useSetRecoilState.

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

import React from 'react';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { todoListState } from './atoms';

function TodoItem({ todo }) {
  const todos = useRecoilValue(todoListState);
  const setTodos = useSetRecoilState(todoListState);

  const removeTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div>
      <p>{todo.text}</p>
      <button onClick={() => removeTodo(todo.id)}>Удалить</button>
    </div>
  );
}

🎯Заключение к первой части

В этой части мы познакомились с основами Recoil, а также создали и использовали атомы для управления состоянием в приложении. Атомы — ключевой компонент Recoil, так как они позволяют создать гибкую и масштабируемую структуру для состояния. В следующей части мы разберем селекторы, которые помогут вычислять производные данные и работать с асинхронными запросами.

Огоньков было больше, поэтому начнем с Recoil 😊

ReactJs Daily | #pro

🚀 Роутинг в React с React Router: Продвинутые техники

Утро доброе! Сегодня разберем, как создать гибкий и мощный роутинг в React-приложениях с помощью React Router. Я уже рассказывал ранее как установить эту библиотеку и начать пользоваться, поэтому в этом посте погрузимся в продвинутые техники, которые помогут организовать маршруты более эффективно.

🔹 Вложенные маршруты
Вложенные маршруты позволяют создавать многоуровневую структуру страниц, когда один маршрут содержит в себе другие. Это особенно полезно для создания страниц с подстраницами (например, панель администрирования или профили пользователей).

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import HomePage from './pages/HomePage';
import ProfilePage from './pages/ProfilePage';
import Settings from './pages/Settings';
import Orders from './pages/Orders';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<HomePage />} />
          <Route path="profile" element={<ProfilePage />}>
            <Route path="settings" element={<Settings />} />
            <Route path="orders" element={<Orders />} />
          </Route>
        </Route>
      </Routes>
    </Router>
  );
}

Здесь <Route path="/" element={<Layout />}> создает базовую оболочку, а вложенные маршруты для ProfilePage определяют подстраницы для Settings и Orders.

🔹 Динамические параметры
React Router позволяет передавать динамические параметры в URL, чтобы рендерить разные компоненты в зависимости от параметров.

import { useParams } from 'react-router-dom';

function UserProfile() {
  const { userId } = useParams();
  return <div>Профиль пользователя: {userId}</div>;
}

Параметры (например, userId) можно использовать для рендеринга уникальной информации. Настраивается такой маршрут легко:

<Route path="user/:userId" element={<UserProfile />} />

Теперь, если вы перейдете по /user/123, в компонент UserProfile попадет userId со значением 123.

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

Создадим компонент ProtectedRoute, который проверяет авторизацию:

import { Navigate } from 'react-router-dom';

function ProtectedRoute({ children, isAuthenticated }) {
  return isAuthenticated ? children : <Navigate to="/login" />;
}

Теперь мы можем обернуть защищенные маршруты:

<Route
  path="profile"
  element={
    <ProtectedRoute isAuthenticated={isAuthenticated}>
      <ProfilePage />
    </ProtectedRoute>
  }
/>

ProtectedRoute проверяет, авторизован ли пользователь, и если нет — перенаправляет его на страницу входа.

🎯 Заключение
React Router открывает множество возможностей для создания сложной навигации: вложенные маршруты помогают создавать подстраницы, динамические параметры упрощают создание уникальных страниц, а защищенные маршруты — защиту данных.

ReactJs Daily | #begginers

📝 Советы по работе с датами в React

Работа с датами — это задача, с которой сталкивается почти каждый разработчик. Вот несколько полезных советов, чтобы сделать этот процесс проще и эффективнее:

1. Используйте проверенные библиотеки
Библиотеки, такие как date-fns, Day.js или Luxon помогут с форматированием, расчетами и локализацией. Они позволяют легко выполнять сложные операции с датами.

import { format } from "date-fns";

const today = new Date();
console.log(format(today, "yyyy-MM-dd")); // 2024-11-15

2. Храните даты в формате ISO 8601
Стандартный формат YYYY-MM-DDTHH:mm:ss.sssZ подходит для хранения и передачи данных через API. Он упрощает работу с часами, минутами и часовыми поясами.

3. Работайте с локализацией
Если приложение поддерживает несколько языков, используйте локализацию для отображения дат. Например, с Intl.DateTimeFormat или библиотеками вроде date-fns можно форматировать даты под нужный регион.

const formatter = new Intl.DateTimeFormat("ru-RU", { dateStyle: "long" });
console.log(formatter.format(new Date())); // 15 ноября 2024 г.

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

import { addDays } from "date-fns";

const nextWeek = addDays(new Date(), 7);
console.log(nextWeek); // Дата через 7 дней

5. Учитывайте часовые пояса
Для работы с пользователями из разных регионов используйте инструменты, поддерживающие работу с часовыми поясами, например, Luxon.

6. Проверяйте входящие данные
Если даты приходят из API, всегда валидируйте их формат и преобразуйте к универсальному виду.

const isValidDate = (date) => !isNaN(new Date(date).getTime());
console.log(isValidDate("2024-11-15")); // true
console.log(isValidDate("Неправильная дата")); // false

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

ReactJs Daily | #shortinfo

🚀 Часть 2: Селекторы в Recoil — вычисляемое состояние и работа с зависимостями

Привет, друзья! 👋 В первой части мы обсудили атомы в Recoil — основу для управления состоянием. Сегодня поговорим о селекторах — мощном инструменте для вычисления производных данных и работы с зависимостями.

🔹 Что такое селекторы?
Селекторы в Recoil — это функции, которые вычисляют состояние на основе атомов или других селекторов. Они позволяют извлекать, фильтровать или комбинировать данные, не изменяя сами атомы.

Представьте, что у вас есть список задач, и вы хотите получить только завершенные. Селектор сделает это за вас!

🔹 Как создать селектор
Селекторы создаются с помощью selector из Recoil. Вы передаете объект с ключом и функцией get, которая описывает, как извлечь или вычислить данные.

Пример:

import { atom, selector } from "recoil";

// Атом: список задач
const tasksState = atom({
  key: "tasksState",
  default: [
    { id: 1, text: "Учить Recoil", completed: true },
    { id: 2, text: "Сделать проект", completed: false },
  ],
});

// Селектор: завершенные задачи
const completedTasksSelector = selector({
  key: "completedTasksSelector",
  get: ({ get }) => {
    const tasks = get(tasksState);
    return tasks.filter((task) => task.completed);
  },
});

🔹 Использование селекторов
Вы можете использовать селектор в компонентах так же, как атомы, через useRecoilValue.

import { useRecoilValue } from "recoil";

function CompletedTasks() {
  const completedTasks = useRecoilValue(completedTasksSelector);

  return (
    <ul>
      {completedTasks.map((task) => (
        <li key={task.id}>{task.text}</li>
      ))}
    </ul>
  );
}

Результат: в списке будут только завершенные задачи.

🔹 Работа с зависимостями
Селекторы автоматически отслеживают изменения в атомах и других селекторах, от которых они зависят. Если исходные данные изменятся, селектор пересчитает свое состояние.

Например, вы можете комбинировать несколько атомов:

const userState = atom({
  key: "userState",
  default: { name: "Алексей", age: 30 },
});

const userInfoSelector = selector({
  key: "userInfoSelector",
  get: ({ get }) => {
    const user = get(userState);
    return `${user.name}, ${user.age} лет`;
  },
});

Теперь любое изменение в userState автоматически обновит значение userInfoSelector.

🔹 Асинхронные селекторы
Селекторы поддерживают асинхронные операции, такие как запросы к API. Просто возвращайте Promise из функции get.

const userDataSelector = selector({
  key: "userDataSelector",
  get: async () => {
    const response = await fetch("https://api.example.com/user");
    const data = await response.json();
    return data;
  },
});

🎯 Заключение

Селекторы в Recoil делают управление состоянием более гибким и декларативным. Они помогают не просто хранить данные, но и извлекать нужное состояние из множества атомов, автоматизируя вычисления.


Будет 3-я часть😌

ReactJs Daily | #pro

🚀 Server Components в React 19: Новый подход к рендерингу

Привет, разработчики! Сегодня поговорим про React Server Components (RSC) — одну из ключевых новых возможностей React 19, которая помогает оптимизировать производительность и упрощает работу с данными.

`
🔹 Что такое Server Components?
Server Components — это способ рендерить React-компоненты на сервере, а не на клиенте. Вместо передачи полного HTML или JSON сервер возвращает "React-структуры" (внутреннее представление компонентов), которые затем рендерятся на клиенте.

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


🔹 Как это работает?
В React-компоненте, который вы хотите рендерить на сервере, достаточно указать async перед функцией.
Пример:

// Серверный компонент
export default async function ServerComponent() {
  const data = await fetchData(); // Логика загрузки данных на сервере
  return <div>Данные: {data}</div>;
}

Этот компонент обрабатывается сервером, а его результат передается клиенту.

🔹 Преимущества Server Components
1. Меньший объем JS на клиенте.
Только UI-компоненты остаются на клиенте, а тяжелая логика работает на сервере.

2. Мгновенная доступность данных.
Загрузка данных происходит на сервере, и клиент получает уже готовый результат без лишних запросов.

3. Повышение безопасности.
Логика работы с секретными данными остается на сервере, исключая их утечку на клиент.


🔹 Использование Server Components вместе с Client Components
React позволяет сочетать Server и Client Components для максимальной гибкости. Например:

// App.jsx
import ClientComponent from './ClientComponent';
import ServerComponent from './ServerComponent';

export default function App() {
  return (
    <div>
      <ServerComponent />
      <ClientComponent />
    </div>
  );
}

Server Components будут рендериться на сервере, а Client Components останутся на клиенте.


🔹 Ограничения Server Components
- Нельзя использовать хуки React, которые зависят от браузерного окружения (например, useState или useEffect).
- Не предназначены для взаимодействия с DOM напрямую.


🎯 Заключение
React Server Components — это мощный инструмент для создания высокопроизводительных приложений. Они отлично подходят для сложных интерфейсов, которые активно работают с данными, и дают возможность оптимизировать производительность за счет переноса тяжелой логики на сервер.

Попробуйте использовать Server Components в своем следующем проекте и оцените их преимущества!

ReactJs Daily | #begginers

📝 Оптимизация обработчиков событий в React: минимизация ререндера и делегирование событий

Почему это важно?
Обработчики событий могут стать причиной замедления приложения, особенно если вы добавляете их на множество элементов. Лишние рендеры или неэффективная обработка событий могут повлиять на производительность.

Советы

1. Избегайте анонимных функций в JSX:
Анонимные функции создаются заново при каждом рендере, что может вызывать ненужные рендеры дочерних компонентов.

❌ Плохо:

<button onClick={() => console.log("Клик!")}>Клик</button>

✅ Хоршо:

const handleClick = () => console.log("Клик!");

<button onClick={handleClick}>Клик</button>

2. Используйте `useCallback` для мемоизации функций:
Когда обработчик передается как пропс в дочерний компонент, мемоизируйте его с помощью хука useCallback, чтобы сохранить одну и ту же ссылку между рендерами.

const handleClick = useCallback(() => {
   console.log("Клик!");
}, []);

3. Делегирование событий:
Вместо добавления обработчика на каждый элемент, используйте делегирование событий. Это особенно полезно для больших списков или динамически добавляемых элементов.

✅ Пример:

const handleClick = (event) => {
   if (event.target.tagName === "BUTTON") {
      console.log(`Кнопка с текстом "${event.target.textContent}" нажата`);
   }
};

return (
   <div onClick={handleClick}>
      <button>Кнопка 1</button>
      <button>Кнопка 2</button>
   </div>
);

В этом примере обработчик добавлен только на родительский элемент, а не на каждую кнопку.

Результат:
Делегирование событий и правильное использование useCallback помогут вам оптимизировать работу приложения, уменьшить количество обработчиков и предотвратить лишние рендеры.

ReactJs Daily | #shortinfo

🚀 Часть 3: Продвинутые техники в Recoil — асинхронное состояние, сложные приложения и отладка

Привет, друзья! 👋 В третьей части нашего знакомства с Recoil мы поговорим о более продвинутых возможностях этой библиотеки: управлении асинхронным состоянием, использовании Recoil в сложных приложениях и инструментах отладки.

🔹 Асинхронное состояние в Recoil
Асинхронное состояние создается с помощью селекторов — вычисляемых значений, которые могут быть как синхронными, так и асинхронными. Для асинхронных задач селектор может возвращать промис, который Recoil обработает автоматически.

Предположим, у нас есть API, которое возвращает список пользователей. Создадим атом и асинхронный селектор для управления состоянием:

import { atom, selector, useRecoilValue } from 'recoil';

// Атом для хранения списка пользователей
const userListAtom = atom({
  key: 'userListAtom',
  default: [], // По умолчанию пустой массив
});

// Селектор для загрузки данных
const userListSelector = selector({
  key: 'userListSelector',
  get: async () => {
    try {
      const response = await fetch('https://api.example.com/users');
      if (!response.ok) throw new Error('Ошибка загрузки данных');
      return await response.json(); // Возвращаем список пользователей
    } catch (error) {
      throw error; // Выбрасываем ошибку, чтобы Recoil мог обработать её
    }
  },
});

В компоненте можно использовать селектор для получения данных:

function UserList() {
  const users = useRecoilValue(userListSelector); // Данные автоматически кешируются
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

🔹 Обработка состояния загрузки и ошибок
Recoil предоставляет метод getLoadable для работы с состоянием селектора. Это удобно для отображения состояния загрузки, ошибок или данных.

import { useRecoilValueLoadable } from 'recoil';

function UserList() {
  const userListLoadable = useRecoilValueLoadable(userListSelector);

  if (userListLoadable.state === 'loading') {
    return <div>Загрузка...</div>;
  }

  if (userListLoadable.state === 'hasError') {
    return <div>Ошибка: {userListLoadable.contents.message}</div>;
  }

  return (
    <ul>
      {userListLoadable.contents.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

🔹 Recoil в сложных приложениях
Recoil отлично справляется с масштабированием за счет атомов и модульного подхода. В больших приложениях:
1. Разделяйте атомы и селекторы по функциональным модулям.
2. Используйте фичи, такие как DefaultValue, чтобы управлять сбросом состояния.

Пример сброса состояния через атомы:

import { atom, useResetRecoilState } from "recoil";

const formState = atom({
   key: "formState",
   default: { name: "", email: "" },
});

const Form = () => {
   const resetForm = useResetRecoilState(formState);

   return (
      <button onClick={resetForm}>Сбросить форму</button>
   );
};

3. Используйте RecoilRoot в сочетании с несколькими контекстами. Это полезно для разделения логики и создания независимых областей состояния.


🔹 Отладка Recoil
Recoil предоставляет инструменты для облегчения отладки:
1. Recoil DevTools: Плагин для браузера, который позволяет отслеживать изменения состояния атомов и селекторов.
2. Snapshots: Используйте useRecoilSnapshot для логирования состояния приложения в любой момент.

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

import { useRecoilSnapshot } from "recoil";

const Debugger = () => {
   const snapshot = useRecoilSnapshot();

   console.log("Текущее состояние:", Array.from(snapshot.getNodes_UNSTABLE({ isModified: true })));

   return null;
};

Добавьте этот компонент в приложение для мониторинга изменений.


🎯 Заключение

Recoil предлагает мощные инструменты для работы с асинхронным состоянием и построения сложных приложений. А с помощью DevTools и снапшотов вы всегда будете знать, что происходит внутри вашего приложения.

ReactJs Daily | #pro

🚀 Почему `key` в React так важен и как правильно его использовать?

Привет, друзья! 👋
Если вы работаете с React, то наверняка сталкивались с предупреждением *"Warning: Each child in a list should have a unique 'key' prop"*. Сегодня разберёмся, зачем нужен атрибут key и как он помогает React быть таким быстрым и эффективным.


🔹 Что такое `key`?
Атрибут key — это способ, с помощью которого React отслеживает элементы в списках. Когда список меняется (например, добавляется или удаляется элемент), key помогает React правильно сопоставить старые и новые элементы, избегая лишнего рендера.


🔹 Почему это важно?
Без key React теряет контекст о том, какой элемент списка к чему относится. Это может вызвать:
- Сброс состояния. Например, вы заполнили форму, а React "решил", что это уже другой элемент, и стёр данные.
- Неверное обновление интерфейса. React может случайно поменять местами элементы.

Пример:

const items = ['React', 'Redux', 'Recoil'];

function ItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li> // Использование index как key
      ))}
    </ul>
  );
}

Если добавить элемент в начало списка, React подумает, что всё сдвинулось, и неправильно обновит DOM.


🔹Как правильно использовать `key`?
1. Используйте уникальные идентификаторы. Например, id из ваших данных.

const items = [
  { id: 1, name: 'React' },
  { id: 2, name: 'Redux' },
];

function ItemList() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

2. Не используйте индексы массива. Это может привести к ошибкам при обновлении списка.
3. Не генерируйте случайные ключи. Это создаёт новые элементы при каждом рендере, что замедляет приложение.


🔹 Почему `key` — это больше, чем просто предупреждение?
Правильное использование key делает ваши приложения:
- Быстрее. React понимает, какие элементы изменились, и минимизирует изменения в DOM.
- Стабильнее. Состояние компонентов не будет теряться.


🎯 Заключение
key — это маленький атрибут, который делает огромную работу. Используйте уникальные и стабильные значения, и ваш код станет не только правильным, но и максимально эффективным!

ReactJs Daily | #begginers

📝 Совет: Используйте Error Boundaries для защиты React-приложений

Привет, друзья! 👋

Ошибки неизбежны, особенно в больших приложениях, но важно уметь с ними справляться. Чтобы одно упавшее дерево не разрушило весь лес, используйте Error Boundaries — инструмент React для изоляции ошибок в отдельных частях интерфейса.

🔹 Зачем нужны Error Boundaries?
Иногда ошибка в одном компоненте может сломать всё приложение. Error Boundaries позволяют обработать проблему локально и показать, например, дружелюбное сообщение вместо пустого экрана.

🔹Как настроить Error Boundary?
Создайте класс-компонент с обработкой ошибок:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error('Ошибка:', error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Упс, что-то пошло не так 😕</h1>;
    }
    return this.props.children;
  }
}

Теперь оберните в него часть приложения:

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

🔹 Важные нюансы
1. Error Boundaries ловят ошибки только в дочерних компонентах, включая их рендеринг и методы жизненного цикла.
2. Они не работают с ошибками в асинхронном коде и обработчиках событий.

🎯 Заключение

Используйте Error Boundaries для изоляции критических частей приложения, таких как формы, списки или виджеты. Это поможет пользователям продолжить работу, даже если что-то пошло не так.

Ваши пользователи скажут вам спасибо! 😊

В React функциональные компоненты не могут быть использованы как Error Boundaries. Это связано с тем, что Error Boundaries используют методы жизненного цикла getDerivedStateFromError и componentDidCatch, которые доступны только в классовых компонентах. Конечно, существуют библиотеки, такие как react-error-boundary, которые упрощают работу с Error Boundaries и позволяют использовать их с функциональными компонентами.

ReactJs Daily | #shortinfo

🚀 Часть 1: Знакомство с Zustand — простой и легковесный state-менеджер для React

Привет, друзья! 👋 Сегодня начинаем серию постов о Zustand, одном из самых простых и мощных инструментов для управления состоянием в React-приложениях. Это легковесная альтернатива Redux, которая идеально подходит как для небольших, так и для масштабируемых проектов.

🔹 Почему Zustand?
Zustand переводится с немецкого как "состояние". Эта библиотека минималистична, но невероятно функциональна.
Преимущества:
- Простота: минимальное API, легкое освоение.
- Легковесность: всего ~1 кБ в gzip.
- Гибкость: поддержка работы с классами, функциями и даже без React.
- Высокая производительность: оптимизирован для минимизации рендеров компонентов.

Если вы хотите управлять глобальным состоянием без сложных настроек, Zustand может стать вашим лучшим выбором!

🔹 Основы работы с Zustand
Главная идея — Zustand работает на базе store, который можно создать с помощью функции create.

Установка

npm install zustand

Пример минимального store

import create from 'zustand';

// Создаем store
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useStore;

Здесь:
- set — функция для изменения состояния.
- coun` — пример состояния.
- increment и decrement — действия (actions) для изменения count.


Подключение store в компоненте
Теперь мы можем использовать состояние в любом компоненте:

import React from 'react';
import useStore from './store';

function Counter() {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

export default Counter;

Что происходит?
1. Мы импортируем наш store.
2. Используем хук useStore для доступа к состоянию и методам.
3. Компонент автоматически перерендеривается только тогда, когда изменяются зависимости (в данном случае count).

🔹 Особенности Zustand
1. Селекторы для точечных обновлений
Вы можете оптимизировать рендеры, выбирая только нужные части состояния:

const count = useStore((state) => state.count);

Только count будет триггерить перерендер компонента.

2. Миддлвары для расширения функциональности
Zustand поддерживает миддлвары, такие как персистентность, логирование или devtools.

Пример с DevTools

import create from 'zustand';
import { devtools } from 'zustand/middleware';

const useStore = create(
  devtools((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
  }))
);

🎯 Заключение

В первой части мы познакомились с основами Zustand. Эта библиотека проста, но невероятно функциональна.

ReactJs Daily | #pro

🚀 Организация CSS в React: Как выбрать лучший подход?

Привет, друзья! 👋 Как организовать стили, чтобы код оставался чистым и масштабируемым? Давайте разберёмся с основными подходами и их преимуществами.

🔹 CSS-модули (CSS Modules)
CSS-модули позволяют писать стили локально для каждого компонента. Имена классов генерируются автоматически, что исключает конфликты.

Пример:

import styles from './Button.module.css';

function Button() {
  return <button className={styles.primary}>Кликни меня</button>;
}

/* Button.module.css */
.primary {
  background-color: blue;
  color: white;
}

✅ Плюсы:
- Локальная область видимости.
- Простой синтаксис.

❌ Минусы:
- Неудобно работать с динамическими классами.


🔹 CSS-in-JS (Emotion, Styled-Components)
Стили описываются прямо в JavaScript, часто на уровне компонента. Это позволяет легко использовать динамические значения.

Пример:

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  &:hover {
    background-color: darkblue;
  }
`;

function App() {
  return <Button>Кликни меня</Button>;
}

✅ Плюсы:
- Динамическая стилизация.
- Отлично подходит для темизации.

❌ Минусы:
- Может быть дороже в производительности.


🔹 Tailwind CSS
Утилитарный CSS-фреймворк, который позволяет быстро создавать стильные интерфейсы, используя классы.

Пример:

function Button() {
  return (
    <button className="bg-blue-500 text-white px-4 py-2 hover:bg-blue-700">
      Кликни меня
    </button>
  );
}

✅ Плюсы:
- Быстрое создание стилей без написания собственного CSS.
- Высокая гибкость.

❌ Минусы:
- Сложность чтения, если классов слишком много.


🔹 Простой CSS

Вы можете использовать традиционный глобальный CSS, подключая стили через <link> или import.

Пример:

import './styles.css';

function Button() {
  return <button className="primary">Кликни меня</button>;
}

/* styles.css */
.primary {
  background-color: blue;
  color: white;
}

✅ Плюсы:
- Подходит для небольших проектов.

❌ Минусы:
- Риск конфликтов классов.


🎯 Какой подход выбрать?

- CSS-модули: для проектов среднего масштаба.
- CSS-in-JS: если требуется динамическая стилизация или темизация.
- Tailwind CSS: для быстрого прототипирования или крупных проектов с повторяющимся дизайном.
- Простой CSS: только для самых маленьких проектов.

Выбор зависит от размера проекта, команды и предпочтений. Главное — придерживаться единого подхода в рамках одного приложения. 😊

ReactJs Daily | #begginers

🚀 Часть 2: Продвинутые техники в Zustand — миддлвары и оптимизация

Привет, друзья! 👋 Продолжаем разбираться с Zustand. В этой части рассмотрим,когда использовать shallow и подключать миддлвары.


🔹 Что такое `shallow` и как он помогает?

По умолчанию Zustand сравнивает значения, возвращаемые селектором, с помощью строгого сравнения (===). Если вы подписываетесь на сложный объект, это может приводить к ненужным ререндерам, так как объект создаётся заново при каждом изменении состояния.

shallow решает эту проблему: он выполняет поверхностное сравнение полей объектов или массивов.

Пример:

import { shallow } from 'zustand/shallow';

const { fieldA, fieldB } = useStore(
  (state) => ({ fieldA: state.fieldA, fieldB: state.fieldB }),
  shallow
);

Здесь:
- Компонент обновится только тогда, когда `fieldA` или `fieldB` реально изменятся.
- Если другие поля состояния изменятся, ререндера не будет.

Когда использовать shallow?
1. Если вы подписываетесь на объект с несколькими свойствами.
2. Для уменьшения ререндеров при работе с массивами или объектами.

Пример оптимизации с массивами:

const items = useStore((state) => state.items, shallow);

Если изменится структура или порядок элементов в массиве, компонент обновится. Но если массив остаётся неизменным, даже при обновлении других частей состояния, ререндер не произойдёт.

Использование shallow в паре с селекторами — мощный инструмент для повышения производительности!


🔹 Расширение через миддлвары

Zustand поддерживает миддлвары, которые позволяют добавлять дополнительную функциональность.

Популярные миддлвары:
1. devtools: подключение инструментов разработчика.
2. persist: сохранение состояния в localStorage.
3. immer: удобное управление неизменяемым состоянием.

Пример с devtools:

import create from 'zustand';
import { devtools } from 'zustand/middleware';

const useStore = create(
  devtools((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
  }))
);

Использование persist:

import create from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(
  persist(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
    }),
    {
      name: 'counter-storage',
    }
  )
);

Теперь данные сохраняются между сессиями.


🔹 Работа с асинхронными действиями

Zustand поддерживает асинхронные операции через set.

Пример загрузки данных:

const useStore = create((set) => ({
  users: [],
  fetchUsers: async () => {
    const response = await fetch('https://api.example.com/users');
    const data = await response.json();
    set({ users: data });
  },
}));

В компоненте:

function UserList() {
  const { users, fetchUsers } = useStore();
  useEffect(() => {
    fetchUsers();
  }, [fetchUsers]);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

🔹 Организация состояния в сложных приложениях

Когда приложение становится больше, важно правильно организовать Zustand.

Рекомендации:
1. Разделяйте store на модули
Используйте несколько независимых хранилищ для различных частей приложения (например, auth, UI, данные).

Пример:

const useAuthStore = create((set) => ({
  isAuthenticated: false,
  login: () => set({ isAuthenticated: true }),
}));

const useUIStore = create((set) => ({
  theme: 'light',
  toggleTheme: () =>
    set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })),
}));

2. Используйте context для передачи store
Для улучшения читабельности в больших приложениях.


🎯 Заключение

Zustand — это не только простой state-менеджер, но и мощный инструмент для сложных приложений. Используя селекторы, миддлвары и асинхронные действия, вы можете оптимизировать производительность и упростить работу с состоянием.

ReactJs Daily | #pro

🚀 Как использовать useRef в React?

Привет, друзья! 👋 Сегодня поговорим о хуке `useRef`, который открывает массу возможностей для работы с DOM, сохранения данных между рендерами и улучшения производительности.

🔹 Что такое `useRef`?

useRef — это React-хук, который возвращает объект с единственным свойством current. Этот объект сохраняется между рендерами, но изменение его значения не вызывает перерендер компонента.


🔹 Основные сценарии использования

1. Доступ к DOM-элементу
Часто используется для управления элементами напрямую (например, установка фокуса).

import React, { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current?.focus(); // Устанавливаем фокус на input
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Введите текст" />
      <button onClick={handleFocus}>Фокус на поле ввода</button>
    </div>
  );
}

2. Сохранение значений между рендерами
useRef отлично подходит для хранения данных, которые не должны теряться между рендерами, но не требуют обновления UI.

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

function Counter() {
  const renderCount = useRef(0); // Сохраняем количество рендеров
  const [count, setCount] = useState(0);

  renderCount.current += 1;

  return (
    <div>
      <p>Счетчик: {count}</p>
      <p>Количество рендеров: {renderCount.current}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

3. Улучшение производительности через сохранение данных
Вы можете использовать useRef для сохранения данных, которые не должны пересоздаваться при каждом рендере, например, таймеры или идентификаторы.

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

function Timer() {
  const timerId = useRef(null);

  useEffect(() => {
    timerId.current = setInterval(() => {
      console.log('Таймер работает!');
    }, 1000);

    return () => {
      if (timerId.current) clearInterval(timerId.current); // Очищаем таймер
    };
  }, []);

  return <div>Таймер запущен. Проверьте консоль!</div>;
}

🔹 Важные моменты

1. `useRef` не вызывает ререндер компонента.
Изменение ref.current не заставляет React обновлять компонент, это просто ссылка.

2. Подходит для долгосрочных данных.
Храните данные, которые не зависят от рендеров, например, DOM-узлы, идентификаторы или счётчики.

3. Не используйте `useRef` как state.
Если вы хотите обновлять UI при изменении значения, лучше использовать useState.


🎯 Заключение

useRef — мощный инструмент, который помогает эффективно работать с DOM и сохранять значения между рендерами. Используйте его, когда вам нужно управлять DOM-узлами, хранить "незаметные" данные или улучшить производительность.

ReactJs Daily | #begginers

🚀 Введение в GraphQL: Эффективный способ работы с API

Привет, друзья! 👋 Обсудим GraphQL, современный инструмент для работы с API, который меняет подход к запросам данных. Это мощная альтернатива REST, предоставляющая разработчикам больше гибкости и удобства.

🔹 Что такое GraphQL?

GraphQL — это язык запросов и среда выполнения для получения данных. Разработан Facebook в 2015 году, чтобы упростить работу с API.

Вместо фиксированных эндпоинтов (как в REST) вы пишете запросы, которые возвращают только необходимые данные.

🔹 Основные преимущества GraphQL

1. Запрашивайте только нужные данные
GraphQL позволяет точно указать, какие данные вам нужны, избегая перегрузки избыточной информацией.

Пример:

query {
  user(id: "1") {
    id
    name
    email
  }
}

Ответ:

{
  "data": {
    "user": {
      "id": "1",
      "name": "Alice",
      "email": "alice@example.com"
    }
  }
}

2. Один запрос — множество ресурсов
GraphQL позволяет получать данные из разных источников за один запрос.

3. Гибкость в разработке
Изменение структуры данных не требует переписывания запросов, если нужные поля остаются доступными.

4. Сильная типизация
Схема API описывает данные, их типы и связи. Это упрощает работу с большими командами.

🔹 Как это работает?

1. Schema: описывает типы данных и их связи.

type User {
  id: ID!
  name: String!
  email: String!
}

type Query {
  user(id: ID!): User
}

2. Resolvers: функции, которые выполняют запросы.

const resolvers = {
  Query: {
    user: (_, { id }) => getUserById(id),
  },
};

3. Запросы: клиенты пишут их для получения данных.

🔹 GraphQL и React

GraphQL отлично работает с React благодаря библиотекам, таким как Apollo Client.

Установка Apollo Client:

npm install @apollo/client graphql

Пример запроса:

import { useQuery, gql } from '@apollo/client';

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

function User({ id }) {
  const { loading, error, data } = useQuery(GET_USER, { variables: { id } });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>{data.user.name}</h1>
      <p>{data.user.email}</p>
    </div>
  );
}

🎯 Заключение

GraphQL — это инструмент, который упрощает работу с API, повышает производительность разработки и даёт больше контроля над данными. Он особенно полезен для сложных приложений с множеством взаимосвязанных ресурсов.

Используете ли вы GraphQL в своих проектах? Делитесь опытом в комментариях! 😊

ReactJs Daily | #pro

🚀 Higher-Order Components (HOC) в React: Паттерн для повторного использования логики

Привет, друзья! 👋 Сегодня поговорим о Higher-Order Components (HOC) — одном из популярных паттернов в React, который помогает повторно использовать логику между компонентами.

🔹 Что такое HOC?

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

HOC ≠ обычный компонент. Это скорее обёртка, которая расширяет функционал ваших компонентов.

Синтаксис:

const withExtraProps = (WrappedComponent) => {
  return (props) => {
    // Добавляем новые пропсы или логику
    const extraProps = { additional: 'value' };
    return <WrappedComponent {...props} {...extraProps} />;
  };
};

🔹 Когда использовать HOC?

HOC применяется, когда нужно:
1. Повторное использование логики между несколькими компонентами.
2. Оборачивать компонент в дополнительную функциональность, например, авторизация, логирование или обработка данных.
3. Добавить новые пропсы или состояния.

Пример: HOC для проверки авторизации.

🔹 Пример HOC

Задача: Реализовать HOC для отображения содержимого только для авторизованных пользователей.

import React from 'react';

// HOC для проверки авторизации
const withAuth = (WrappedComponent) => {
  return (props) => {
    const isAuthenticated = props.isAuthenticated; // Получаем пропс

    if (!isAuthenticated) {
      return <div>Доступ запрещён. Пожалуйста, войдите в систему.</div>;
    }

    return <WrappedComponent {...props} />;
  };
};

// Пример компонента
const UserProfile = (props) => {
  return <div>Привет, {props.name}! Это твой профиль.</div>;
};

// Оборачиваем компонент
const ProtectedUserProfile = withAuth(UserProfile);

// Использование
export default function App() {
  return (
    <div>
      <ProtectedUserProfile isAuthenticated={false} name="Алексей" />
    </div>
  );
}

Результат: Если пользователь не авторизован, вместо компонента UserProfile отобразится сообщение "Доступ запрещён".

🔹 Важные аспекты при работе с HOC

1. Передача пропсов
HOC должен передавать все пропсы внутрь оборачиваемого компонента, чтобы он оставался гибким:

<WrappedComponent {...props} />

2. Декларативное имя
Придумайте читаемое имя для вашего HOC, например, withAuth, withLogger.

3. Не переусложняйте
HOC может сделать код сложнее для понимания. Если логику можно вынести в кастомные хуки — выбирайте их.

4. Не мутируйте оборачиваемый компонент
HOC не должен изменять оригинальный компонент, а только оборачивать его.

🔹 Когда НЕ использовать HOC

Сегодня многие задачи, которые решались через HOC, проще выполнять с помощью:
- Custom Hooks для повторного использования логики.
- Context API для глобального состояния.

HOC остаётся актуальным, но его популярность снижается в пользу более простых решений.

🎯 Заключение

Higher-Order Components — мощный инструмент, если вы хотите добавить функционал к компонентам, сохраняя их чистоту и переиспользуемость. Но помните, что HOC — не единственный способ повторного использования логики, и в некоторых случаях кастомные хуки могут быть лучшим выбором 😊

ReactJs Daily | #begginers

🚀 Основы тестирования ReactJS: как и зачем тестировать компоненты?

Привет, друзья! 👋 В этом посте мы поговорим о том, почему тесты важны, как они помогают, и какие инструменты вам понадобятся для написания эффективных тестов.

🔹 Зачем тестировать React-приложения?

Тестирование — важный процесс разработки, который помогает вам:
1. Убедиться, что ваш код работает правильно и не ломает функционал при изменениях.
2. Предотвратить баги и минимизировать их появление на более поздних этапах разработки.
3. Обеспечить стабильность приложения, что особенно важно при добавлении нового функционала.

Но помимо этого тесты помогают вам думать о логике компонентов и улучшать их архитектуру!

🔹 Основные типы тестов в React

1. Юнит-тесты (Unit tests): Проверяют функциональность отдельных функций и компонентов.
2. Интеграционные тесты (Integration tests): Проверяют, как несколько частей системы взаимодействуют друг с другом.
3. Тесты интерфейса (UI tests): Проверяют, как компоненты взаимодействуют с пользователем (например, как кнопки работают, что отображается на экране).

🔹 Какие инструменты использовать?

1. Jest — это тестовый фреймворк, который работает из коробки с React. Он удобен, имеет поддержку моков, и легко интегрируется с другими библиотеками.
2. React Testing Library — библиотека для тестирования компонентов React, ориентированная на поведение пользователей, а не на реализацию. Это помогает делать тесты более близкими к реальному использованию компонента.
3. Jest-DOM — дополнение для Jest, которое добавляет полезные матчеры для проверки наличия элементов, их текста и других свойств в DOM.

🔹 Как начать?

1. Установка необходимых зависимостей
Сначала установим Jest и React Testing Library. Откройте терминал и выполните команду:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

2. Пример простого теста

Предположим, у нас есть компонент Counter, который увеличивает счётчик на 1 при каждом нажатии кнопки.

// Counter.js
import React, { useState } from 'react';

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

Теперь напишем тест для этого компонента:

// Counter.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('увеличение счётчика при нажатии кнопки', () => {
  render(<Counter />); // Рендерим компонент

  expect(screen.getByText(/Count:/).textContent).toBe('Count: 0');

  const button = screen.getByText('Increment');
  fireEvent.click(button);

  expect(screen.getByText(/Count:/).textContent).toBe('Count: 1');
});

Что происходит:
1. Мы рендерим компонент с помощью render.
2. Используем screen.getByText для поиска текста на экране.
3. Симулируем нажатие кнопки с помощью fireEvent.
4. Проверяем, что счётчик увеличился.

🔹 Основные методы React Testing Library

- render() — рендерит компонент в виртуальный DOM для тестирования.
- screen — объект, который предоставляет доступ к элементам на экране (например, через screen.getByText или screen.getByRole).
- fireEvent — используется для симуляции событий, таких как клик или ввод текста.
- waitFor — помогает дождаться выполнения асинхронных операций, например, загрузки данных.

🔹 Практические советы

1. Тестируйте поведение, а не реализацию. Не проверяйте, что именно делает компонент внутри (например, функции или методы), а смотрите, как он влияет на интерфейс.
2. Избегайте сложных моков. Если возможно, тестируйте компоненты с реальными зависимостями, а не подменяйте их через моки, чтобы тесты были ближе к реальности.
3. Не забывайте про асинхронные тесты. Если ваш компонент работает с асинхронными запросами, используйте waitFor или findBy для правильной работы с промисами и API.

🎯 Заключение

Jest и React Testing Library — это отличный способ убедиться, что ваше приложение работает корректно и стабильно.

ReactJs Daily | #testing