Что такое React и его базовые концепции ⚛️

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

🔍 Компоненты

Компоненты — это независимые, переиспользуемые части интерфейса. Они могут быть функциональными или классовыми (но предпочтение отдается функциональным). Каждый компонент возвращает фрагмент JSX-разметки, которая затем рендерится на странице.

const Welcome = ({ name }) => <h1>Привет, {name}!</h1>;

📦 Props

Props (сокр. от "properties") — это данные, которые передаются от родительского компонента к дочернему. Они позволяют компонентам взаимодействовать друг с другом и настраивать поведение.

const UserCard = ({ name, age }) => (
  <div>
    <h2>{name}</h2>
    <p>Возраст: {age}</p>
  </div>
);

🧠 State

State — это данные, которые управляются внутри компонента и могут изменяться с течением времени. Состояние позволяет компоненту реагировать на действия пользователя, обновляя интерфейс.

const Counter = () => {
  const [count, setCount] = React.useState(0);
  
  return (
    <div>
      <p>Счет: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
};

📝 JSX

JSX — это синтаксическое расширение JavaScript, похожее на HTML. Оно используется для описания структуры пользовательского интерфейса и является ключевой частью React.

const Element = <h1>Привет, мир!</h1>;

🔄 Виртуальный DOM

Виртуальный DOM в React — это способ ускорить обновление веб-страницы.
Вместо того чтобы сразу менять реальную страницу, React сначала делает изменения в своей "копии" страницы (виртуальном DOM).
Потом он быстро сравнивает эту копию с предыдущей и изменяет только те части реальной страницы, которые действительно изменились.

Тэги : #react #javascript

🌟 Основы React: Ключи, Рендеринг, События и Хуки 🌟

Сегодня мы рассмотрим четыре важных концепции: ключи, рендеринг, события и хуки. 🚀


🔑 Ключи (Keys)

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

Пример:

const items = ['Яблоко', 'Банан', 'Апельсин'];

function FruitList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

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



🔄 Рендеринг (Rendering)

Рендеринг в React состоит из трех основных этапов:

1. Триггеринг рендеринга (Triggering a Render): Рендеринг компонента начинается, когда изменяется состояние (с помощью useState) или свойства компонента. Это может быть вызвано пользовательским действием, изменением данных или любым другим событием.

2. Рендеринг компонента (Rendering the Component): React создает виртуальное представление компонента и сравнивает его с предыдущим виртуальным DOM, чтобы определить, какие изменения необходимо внести. Этот процесс называется "реконсиляцией".

3. Коммитинг в DOM (Committing to the DOM): После того как React вычисляет необходимые изменения, он обновляет реальный DOM, применяя только те изменения, которые необходимы. Это позволяет минимизировать количество операций с реальным DOM, что повышает производительность.

💡 Советы: Для оптимизации рендеринга используйте React.memo и useCallback, чтобы предотвратить ненужные повторные рендеры.



🎉 События (Events)

Обработка событий в React похожа на обычный JavaScript, но с некоторыми особенностями. События обрабатываются с использованием обработчиков, переданных в компоненты. ✨

Пример:

function Button() {
  const handleClick = () => {
    alert('Кнопка нажата! 🎉');
  };

  return <button onClick={handleClick}>Нажми меня!</button>;
}

⚙️ Замечание: В React вы используете camelCase для именования обработчиков событий (например, onClick вместо onclick).


🪝 Хуки (Hooks)

Хуки — это функции, которые позволяют вам использовать состояние и другие возможности React без написания классов. Вот два самых основных хука: useState и useEffect. 🔧

1. `useState`: Позволяет добавлять состояние в функциональные компоненты. 💬

Пример:

   import { useState } from 'react';

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

     return (
       <div>
         <p>Счетчик: {count} 📈</p>
         <button onClick={() => setCount(count + 1)}>Увеличить ➕</button>
       </div>
     );
   }
   

2. `useEffect`: Позволяет выполнять побочные эффекты в функциональных компонентах, такие как запросы к серверу и подписки. 🌐

Пример:

   import { useEffect, useState } from 'react';

   function FetchDataComponent() {
     const [data, setData] = useState(null);

     useEffect(() => {
       fetch('https://api.example.com/data')
         .then(response => response.json())
         .then(data => setData(data));
     }, []); // Пустой массив означает, что эффект выполнится только один раз после первого рендера

     return <div>{data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Загрузка... ⏳'}</div>;
   }
   

🚀 Заключение :

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

Тэги : #javascript #react

Что такое стейт-менеджеры и зачем они нужны? 🤔

Стейт-менеджеры были созданы для удобного управления состоянием в приложениях. В React и других фреймворках состояние (state) хранит данные, которые могут меняться во времени, например, ввод пользователя, данные API или состояния компонентов. В крупных приложениях управление состоянием становится сложным из-за множества компонентов, которые могут обновлять одно и то же состояние. Стейт-менеджеры помогают централизовать управление состоянием, сделать его предсказуемым и упрощают отладку.

Популярные стейт-менеджеры 🛠

1. Redux - Один из самых популярных стейт-менеджеров для React. Позволяет использовать единый "глобальный" стор для всех данных приложения и следить за изменениями с помощью экшенов и редьюсеров.
2. MobX - Реактивный стейт-менеджер, который автоматически отслеживает зависимости между состоянием и компонентами.
3. Context API - Встроенный инструмент React, который позволяет передавать состояние между компонентами без необходимости прокидывания через пропсы.

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

Redux Toolkit (RTK) — это официальная библиотека для упрощения работы с Redux. RTK предоставляет стандартные методы и инструменты для написания Redux кода, делая его более кратким и понятным.

Основные возможности Redux Toolkit:

1. `createSlice` - Позволяет создавать редьюсеры и экшены одним вызовом.
2. `configureStore` - Упрощает создание хранилища (store) с предустановками.
3. `createAsyncThunk` - Для работы с асинхронными действиями (например, запросами к API).
4. `createSelector` - Мемоизация данных для производительности.

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

//store/slices/counter.js
import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
  },
});



export const { increment, decrement } = counterSlice.actions;

//store/index.js
const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

export default store;

🚀 Заключение :

Стейт-менеджеры являются неотъемлимой частью крупных проектов , без них работа с данными становиться очень некомфортный . В следующем посте мы поговорим поподробнее про Redux Toolkit 🏡

Тэги : #javascript #react

Redux Toolkit: Теоритеческая база с примерами 🎯

Redux — это библиотека для управления состоянием в React-приложениях. Для понимания работы Redux важно рассмотреть схему: View → Actions → Dispatcher → Store → Reducer → State → View. Давайте разберем каждый компонент в этой схеме и как они работают в Redux Toolkit.

1. View (Представление) 🖼
Компоненты React являются "View", то есть представлениями, которые показывают состояние приложения пользователю. Когда пользователь взаимодействует с приложением (например, кликает на кнопку), он вызывает действие.

2. Actions (Действия) 🎬
Действия — это объекты, которые описывают изменения состояния. Действие содержит тип (type) и, при необходимости, данные (payload). В Redux Toolkit действия автоматически создаются с помощью createSlice или createAction.

3. Dispatcher (Диспетчер) 🚚
Диспетчер отправляет действия в Redux store. В React компонентах используется useDispatch для отправки действий. Это "транспорт", который перемещает действия к следующему этапу.

const dispatch = useDispatch();
dispatch({ type: 'user/fetchData' });

4. Store (Хранилище) 📦
Store хранит все состояние приложения. Он создается с помощью configureStore в Redux Toolkit и является центральным хранилищем, где состояние доступно для всех компонентов.

import { configureStore } from '@reduxjs/toolkit';
const store = configureStore({ reducer: rootReducer });

5. Reducer (Редьюсер) 📝
Редьюсер — это функция, которая принимает текущее состояние и действие, чтобы вернуть новое состояние. В Redux Toolkit редьюсеры создаются с createSlice, который объединяет действия и редьюсеры в одно целое.

const userSlice = createSlice({
  name: 'user',
  initialState: { data: null },
  reducers: {
    setData(state, action) {
      state.data = action.payload;
    },
  },
});

6. State (Состояние) 🧠
Состояние — это фактические данные, хранящиеся в store. Когда редьюсер обновляет состояние, компонент автоматически получает новые данные и перерисовывается.

Как это работает под капотом? ⚙️

1. Действие отправляется с помощью dispatch из компонента (View).
2. Диспетчер отправляет действие в store.
3. Store передает действие в соответствующий редьюсер.
4. Редьюсер обновляет состояние, и store сохраняет новое состояние.
5. Компонент (View) обновляется новым состоянием и отражает изменения.

Использование Redux Toolkit: Пример с асинхронным экшеном 📊

import { createAsyncThunk, createSlice, configureStore } from '@reduxjs/toolkit';

// Асинхронное действие для получения данных
export const fetchUserData = createAsyncThunk('user/fetchData', async () => {
  const response = await fetch('/api/user');
  return response.json();
});

// Slice для пользователя
const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, loading: false, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserData.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchUserData.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      })
      .addCase(fetchUserData.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  },
});

const store = configureStore({
  reducer: {
    user: userSlice.reducer,
  },
});

export default store;

Почему Redux Toolkit? 🤔

Redux Toolkit решает многие проблемы, с которыми сталкиваются разработчики при использовании Redux:

- Меньше шаблонного кода: Автоматически генерирует экшены и редьюсеры.
- Проще асинхронные запросы: Поддержка асинхронных действий через createAsyncThunk.
- Лучшая производительность: Встроенные оптимизации и middleware для удобной разработки.

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

Тэги : #javascript #react

React Hook Form 🎣

Что такое React Hook Form? 🤔

React Hook Form (RHF) — это библиотека для управления формами в React-приложениях. Она предоставляет набор хуков, позволяющих легко и эффективно работать с формами и валидацией.

Почему использовать React Hook Form? 🚀

1. Высокая производительность: Благодаря минимальному количеству повторных рендеров.
2. Простота использования: Удобный API, интеграция с TypeScript.
3. Легкая валидация: Встроенные средства для проверки данных формы.
4. Компактный код: Минимизирует написание шаблонного кода.
5. Интеграция с любыми UI-библиотеками: Работает с Material-UI, Ant Design и другими.

Основные функции в React Hook Form 🛠

1. `useForm`: Основной хук, который возвращает методы для управления формой, такие как register, handleSubmit, и formState.

2. `register`: Привязывает поле формы к внутреннему состоянию. Позволяет легко регистрировать input-поля и добавлять правила валидации.

3. `handleSubmit`: Метод для обработки отправки формы. Используется для оборачивания функции отправки формы, чтобы получать данные и ошибки.

4. `formState`: Хранит информацию о текущем состоянии формы: ошибки, значения, состояние отправки и др.

Пример использования React Hook Form 📋

import React from 'react';
import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: "First name is required" })} />
      {errors.firstName && <p>{errors.firstName.message}</p>}

      <input type="submit" />
    </form>
  );
}

Детальная валидация данных 💡

1. HTML-валидаторы: Такие как required, minLength, maxLength.

   <input {...register("email", { required: true })} />
   

2. Кастомные валидаторы: Функции, которые позволяют гибко проверять данные.

   <input {...register("username", { validate: value => value.includes("admin") || "Should not contain 'admin'" })} />
   

3. Схемы валидации: Использование сторонних библиотек (например, Yup) для сложной валидации.

   import { useForm } from 'react-hook-form';
   import { yupResolver } from '@hookform/resolvers/yup';
   import * as yup from 'yup';

   const schema = yup.object().shape({
     email: yup.string().required().email(),
   });

   const { register, handleSubmit } = useForm({ resolver: yupResolver(schema) });
   

Использование с асинхронными запросами 🕸

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

const onSubmit = async (data) => {
  try {
    await fetch('/api/submit', { method: 'POST', body: JSON.stringify(data) });
    console.log("Data submitted successfully!");
  } catch (error) {
    console.error("Error submitting data", error);
  }
};

Интеграция с Redux и другими библиотеками 📦

React Hook Form хорошо работает с Redux и другими библиотеками для управления состоянием. Можно использовать `useSelector и useDispatch` для взаимодействия с состоянием приложения.

Заключение 🏁

React Hook Form — мощный инструмент для управления формами в React. Он позволяет быстро создавать формы, управлять их состоянием и валидацией, а также интегрировать с другими библиотеками и инструментами. Это делает его идеальным выбором для разработчиков, стремящихся улучшить производительность и пользовательский опыт в своих приложениях. 🚀

Тэги : #javascript #react

Что такое Vite и как с ним работать? 🚀

Vite — это современный инструмент для сборки модулей, разработанный с фокусом на быструю разработку современных фронтенд-приложений. Его создал Эван Ю, автор Vue.js, чтобы решить проблему медленных перезагрузок в традиционных сборщиках, таких как Webpack и Parcel. Основное преимущество Vite — мгновенный запуск и плавная разработка с минимальной задержкой.

Почему Vite быстрее? ⚡️

Большинство традиционных сборщиков модулей (Webpack, Parcel) предварительно обрабатывают весь проект, создавая бандл до того, как вы сможете увидеть изменения. Это занимает значительное время, особенно в больших проектах. Vite решает эту проблему с помощью:

1. Мгновенной разработки с использованием нативных ES-модулей: Вместо того чтобы собирать проект перед запуском, Vite загружает только необходимые модули непосредственно в браузер. Он использует нативную поддержку ES-модулей в браузерах для динамической загрузки файлов.

2. HMR (Hot Module Replacement): Vite обеспечивает мгновенную перезагрузку модулей при изменении кода. Это сокращает время отклика и делает разработку более интерактивной.

3. Отложенная компиляция: Vite компилирует и пересобирает только те модули, которые были изменены, а не весь проект.

Как работает Vite под капотом? 🔧

- Dev-сервер: Vite разворачивает очень быстрый сервер разработки с использованием ES-модулей.
- Оптимизация на этапе билда: При сборке Vite использует Rollup для создания оптимизированного финального бандла. Это гарантирует, что итоговый код будет легковесным и быстрым для загрузки пользователем.
- Модульность: Vite поддерживает множество плагинов для расширения функциональности, таких как React, Vue, TypeScript и другие.

Возможности и конфигурации 🛠

Vite поддерживает разнообразные фреймворки и технологии. Вот пример простой конфигурации для проекта на React:

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true, // Открывает проект в браузере при запуске
  },
});

Основные параметры:
- plugins — список плагинов, таких как React или Vue, которые можно подключить к проекту.
- server — настройки сервера разработки, такие как порт, открытие браузера и другие опции.
- build — параметры для финальной сборки проекта.

Преимущества Vite 🌟

1. Быстрая перезагрузка: Любые изменения в коде моментально применяются и видны в браузере благодаря HMR.
2. Мгновенный старт: Проекты на Vite запускаются мгновенно, без долгих процессов компиляции.
3. Поддержка TypeScript и современных JavaScript-фич: С нуля поддерживаются новые возможности ES6+, а также TypeScript без необходимости в сложных конфигурациях.
4. Отличная интеграция с фреймворками: Vite поддерживает работу с такими популярными фреймворками, как React, Vue, Svelte, и многими другими.

Как начать проект на Vite? 🚀

1. Установите Vite:

   npm create vite@latest
2. Выберите необходимый шаблон (React, Vue, Svelte и т.д.).

3. Запустите сервер разработки:
   

   npm run dev
4. Для финальной сборки используйте:
   

   npm run build

Когда использовать Vite? 🤔

Vite идеально подходит для разработки современных веб-приложений, где важна скорость и интерактивность. Если вы работаете с крупными проектами или применяете новейшие возможности JavaScript, такие как ES-модули, Vite поможет ускорить процесс разработки и сборки.

Также, если ваш проект активно использует современные фреймворки (React, Vue, Svelte), Vite станет отличным выбором благодаря встроенной поддержке плагинов.

Заключение 💡

Vite — это мощный и быстрый сборщик, который помогает сосредоточиться на разработке, а не на долгих процессах компиляции и оптимизации. Благодаря своей модульности и гибкости, он идеально подходит для проектов любого масштаба. Независимо от того, работаете ли вы над простым лендингом или сложным SPA-приложением, Vite упростит и ускорит вашу работу.

Тэги : #react #javascript

🔥 React Hook: useRef 🔥

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

Что такое useRef?
useRef – это один из хуков React, который возвращает изменяемый объект, хранящий свойство .current. Этот объект сохраняется на протяжении всего жизненного цикла компонента.

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

1. Доступ к DOM-элементам:
Иногда нужно напрямую управлять элементами DOM. Например, для фокуса на input:

const inputRef = useRef(null);

useEffect(() => {
  inputRef.current.focus();
}, []);

return <input ref={inputRef} />;

2. Сохранение значений между рендерами:
Например, если нужно хранить предыдущее значение состояния или какое-то другое изменяющееся значение, но не хочется триггерить ререндер:

const prevValue = useRef(value);

useEffect(() => {
  prevValue.current = value;
});

В чем отличие от useState?
useRef не вызывает повторный рендер при изменении своего значения, а useState – вызывает. Это значит, что если тебе нужно что-то сохранить без перерисовки компонента, используй useRef.

Когда не стоит использовать?
Не стоит использовать useRef для управления состоянием, если тебе нужно реагировать на изменения значения – для этого есть useState. useRef полезен только для случаев, когда данные нужно просто "запомнить" между рендерами или для взаимодействия с DOM.

Заключение
useRef – это мощный инструмент, когда дело касается прямого взаимодействия с DOM или сохранения значений без лишних рендеров. Запоминай и используй с умом! 😉

#React #useRef #JavaScript #Frontend #Hooks #WebDevelopment