📝 Best Practices: Полезная библиотека для React: React Query

Если вы работаете с данными, которые нужно получать, кешировать и обновлять, React Query — отличный инструмент! Она облегчает управление состоянием данных, делает запросы асинхронными и позволяет легко кешировать и обновлять данные.

Почему это полезно:
- Легкость: React Query позволяет меньше писать "ручного" кода для работы с API.
- Кеширование: Данные автоматически сохраняются и перезапрашиваются по мере необходимости.
- Фоновое обновление: React Query обновляет данные в фоне и моментально выводит на экран.
- Обработка ошибок: Управление ошибками проще, с встроенными опциями retry.

Пример:

import { useQuery } from 'react-query';

function MyComponent() {
  const { data, error, isLoading } = useQuery('todos', fetchTodos);

  if (isLoading) return <p>Загрузка...</p>;
  if (error) return <p>Ошибка!</p>;

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

React Query делает взаимодействие с API гораздо удобнее и обеспечивает лучшую производительность для ваших React-приложений!

ReactJs Daily | #shortinfo

🚀 FSD (Feature-Sliced Design) Архитектура в React: Подробное руководство по созданию структурированного проекта

Когда проект растет, правильная архитектура становится ключом к легкости поддержки и масштабирования. Feature-Sliced Design (FSD) — это подход, помогающий структурировать фронтенд-приложения так, чтобы каждая функциональность была изолирована и независима. Давайте разберем, как работает FSD и как его применять в React-проектах.

🔹 Основная идея FSD
FSD разделяет проект на уровни и модули, позволяя логично организовать компоненты, бизнес-логику и UI, основываясь на их назначении и зависимости. Благодаря этому подходу мы создаем модульные, переиспользуемые и гибкие компоненты, которые удобно тестировать, поддерживать и расширять.

🔹 Уровни FSD-архитектуры

Каждый уровень в FSD отвечает за конкретный аспект приложения:

1. App — уровень, который включает в себя инициализацию приложения. Здесь находятся:
- Основной компонент приложения (App.jsx);
- Настройки роутинга, хранилища и глобальных провайдеров (например, Redux или Context);
- Глобальные стили и настройки, например, themes.

2. Processes — глобальные процессы, которые используются в разных частях приложения:
- Например, аутентификация, обработка ошибок, конфигурация языков и локалей;
- В этом уровне организуются такие аспекты, как управление сессиями пользователя и глобальными процессами.

3. Pages — уровень, отвечающий за страницы приложения:
- Здесь организованы конкретные маршруты (pages), каждый из которых представляет собой независимый модуль (например, HomePage, ProductPage);
- В рамках страницы могут использоваться Widgets, Features и Entities;
- Этот уровень также может управлять страницами как модулями, которые обращаются к фичам и виджетам.

4. Widgets — крупные интерфейсные компоненты:
- Здесь находятся такие компоненты, как шапка (Header), подвал (Footer), боковое меню (Sidebar);
- Widgets могут содержать внутренние компоненты и подключать бизнес-логику, необходимую для их отображения, при этом избегая тяжелой логики.

5. Features — основные функциональные элементы, которые представляют отдельные действия:
- Например, фильтрация товаров (ProductFilter), добавление товара в корзину (AddToCart), формы регистрации и авторизации;
- Эти модули содержат как UI-компоненты, так и бизнес-логику, относящуюся к конкретной фиче, что делает их легко переиспользуемыми.

6. Entities — модули, которые отвечают за бизнес-логику и модель данных:
- Каждый Entity представляет сущность, например, Product, User, Order;
- Содержат взаимодействие с данными, такие как API-запросы и модели данных, что упрощает обработку данных в приложении.

7. Shared — переиспользуемые ресурсы, которые могут быть применены в разных частях проекта:
- Shared включает общие компоненты (Button, Input), стили, хелперы, хуки и утилиты;
- Эти модули предназначены для поддержки более высокого уровня компонентов, таких как Features и Widgets.

🔹 Преимущества подхода FSD

- Изоляция ответственности: FSD позволяет инкапсулировать логику и компоненты на уровне фич и виджетов, что снижает зависимость и улучшает тестируемость.
- Легкость поддержки и масштабируемость: Благодаря четкому распределению модулей, FSD подходит для проектов любой сложности, особенно если предполагается значительный рост функционала.
- Повышенная переиспользуемость: Модули, созданные на уровне Features или Shared, можно использовать повторно, что ускоряет разработку новых страниц и компонентов.
- Единая структура: С FSD легче сохранять единую структуру при добавлении новых страниц и фич, что делает проект понятным как для новых, так и для опытных разработчиков.

🎯 Заключение

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

P.S Структура в комментарии

ReactJs Daily | #pro

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

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

🔹 Что такое Redux и зачем он нужен?

Redux — это библиотека для управления глобальным состоянием приложения. В отличие от локального состояния, которое создается для каждого компонента отдельно (с помощью useState или useReducer), Redux позволяет хранить состояние на более высоком уровне и делиться им между всеми компонентами. Это особенно полезно в больших приложениях, где одни и те же данные должны быть доступны в разных частях интерфейса.

🔹 Основные части Redux

1. Store
Центральное хранилище всех данных приложения. Именно сюда попадают изменения состояния и откуда компоненты могут получать нужные данные.

2. Actions
Объекты, которые описывают, что именно нужно изменить в состоянии. Обычно action включает type — строку, описывающую тип изменения, и дополнительные данные (payload), если это необходимо.

const addToCart = (item) => {
   return {
      type: "ADD_TO_CART",
      payload: item,
   };
};
   

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

const cartReducer = (state = [], action) => {
   switch (action.type) {
      case "ADD_TO_CART":
         return [...state, action.payload];
      case "REMOVE_FROM_CART":
         return state.filter((item) => item.id !== action.payload.id);
      default:
         return state;
   }
};
   

4. Dispatch
Функция, которая отправляет actions в Redux, вызывая соответствующий reducer и обновляя состояние.

🔹 Как использовать Redux в React

Для интеграции Redux с React можно воспользоваться библиотекой react-redux, которая предоставляет два основных метода: Provider и connect (или useSelector и useDispatch в случае хуков).

1. Подключение Provider
Чтобы React-компоненты могли получать данные из Redux, нужно обернуть все приложение в <Provider store={store}>, передав в него созданный store:

import { Provider } from "react-redux";
import { createStore } from "redux";
import rootReducer from "./reducers";

const store = createStore(rootReducer);

const App = () => (
   <Provider store={store}>
      <YourComponent />
   </Provider>
);
   

2. Использование useSelector и useDispatch
useSelector позволяет компонентам получать данные из Redux, а useDispatch — отправлять actions.

import React from "react";
import { useSelector, useDispatch } from "react-redux";

const Cart = () => {
   const cartItems = useSelector((state) => state.cart);
   const dispatch = useDispatch();

   const addItemToCart = (item) => {
      dispatch({ type: "ADD_TO_CART", payload: item });
   };

   return (
      <div>
         <h2>Корзина:</h2>
         {cartItems.map((item) => (
            <p key={item.id}>{item.name}</p>
         ))}
         <button onClick={() => addItemToCart({ id: 1, name: "Товар" })}>
            Добавить товар
         </button>
      </div>
   );
};
   

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

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

🎯 Заключение

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

ReactJs Daily | #begginers

📝Настройка анимаций в React: оживляем интерфейс!

Анимации делают интерфейсы React-приложений не только красивыми, но и интуитивно понятными. В React есть несколько популярных библиотек, которые помогают легко добавлять анимации, такие как Framer Motion и React Spring. Давайте рассмотрим основные примеры настройки.

🔹 Framer Motion — простой и мощный инструмент
Framer Motion позволяет легко добавлять эффекты перехода, hover-анимации, анимации при монтировании и даже сложные переходы между состояниями. Например, чтобы сделать анимацию масштаба при наведении, оборачиваем элемент в motion.div и используем свойство whileHover:

import { motion } from "framer-motion";

function Example() {
   return (
      <motion.div
         animate={{ opacity: 1 }}
         initial={{ opacity: 0 }}
         transition={{ duration: 0.5 }}
         whileHover={{ scale: 1.1 }}
      >
         Наведи на меня!
      </motion.div>
   );
}

🔹 React Spring — физические анимации
React Spring отлично подходит для создания анимаций, которые чувствуют себя «естественно» благодаря физике (натяжение, упругость). Подходит для сложных анимаций, таких как прокрутка и переходы между страницами:

import { useSpring, animated } from "react-spring";

function Example() {
   const props = useSpring({ opacity: 1, from: { opacity: 0 } });
   return <animated.div style={props}>Анимация с React Spring</animated.div>;
}

🔹 Рекомендации по использованию анимаций
- Избегайте перегрузки — много анимаций могут замедлить приложение.
- Соблюдайте последовательность — анимации должны быть гармоничными, помогать пользователю, а не отвлекать.
- Настраивайте переходы — делайте их чуть медленнее, чтобы обеспечить мягкость.

Анимации в React могут оживить интерфейс, главное — использовать их разумно. Попробуйте добавить простые эффекты, и интерфейс станет более динамичным и привлекательным для пользователей! ✨

ReactJs Daily | #shortinfo

🚀 Интернационализация (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