Полное руководство по React
2 года назад·3 мин. на чтение
Это руководство поможет плавно войти в Реакт разработку и понять как использовать react.
Мы начнем с самых базовых концепций. Рассмотрим различные варианты добавления ReactJS на сайт и создания React проекта. Создадим первые компоненты и шаг за шагом будем подробно рассматривать все части компонента - JSX, события, стили, хуки и т.д. Данный react туториал на русском разделен на удобные части, каждая из которых включает подробное объяснение и простые примеры. Этот гайд подойдет и для начинающих react разработчиков.
Также весь API собран в удобный справочник, в котором можно найти подробное объяснение конкретных функций React.
Установка
В этом разделе полного руководства по Реакт собраны все варианты установки React. Можно создать проект на React с нуля или постепенно внедрять его в существующее приложение. Также узнаем как настроить базовый набор инструментов на компьютере для разработки и отладки React приложения.- Как начать работать с React
- Как добавить React на сайт
- Настройка редактора IDE для работы с React
- Инструменты разработчика React
- Быстрый старт с React
- Мышление в стиле React
Интерфейс пользователя
В этой части руководства по React мы напишем первый React компонент. React компоненты - это переиспользуемые элементы пользовательского интерфейса. В приложении React каждая часть пользовательского интерфейса является компонентом.- Пишем первый React компонент
- Импорт и экспорт компонентов
- Разметка с JSX
- JavaScript в фигурных скобках в JSX
- Как передать пропсы компоненту
- Рендеринг по условию
- Рендеринг списков
- Чистые компоненты
Добавление интерактивности
Эта часть руководства по React посвящена тому как обрабатывать действия пользователя. Некоторые элементы на экране обновляются в ответ на действия пользователя. Например, клик по галерее изображений переключает активное изображение. В React данные, которые меняются со временем, называются состоянием. Вы можете добавить состояние к любому компоненту и обновить его по мере необходимости. В этой части курса по Реакт вы узнаете, как писать компоненты, которые обрабатывают взаимодействия, обновляют свое состояние и отображают разные выходные данные с течением времени.- Реакция на события
- Состояние - память компонента
- Рендеринг и фиксация
- Состояние как снимок
- Очередь обновлений состояния
- Обновление объектов в состоянии
- Обновление массивов в состоянии
Управление состоянием
Данная часть react js руководства включает подробное объяснение работы с состоянием. По мере роста вашего React приложения полезно более внимательно относиться к тому, как организовано состояние и как данные передаются между вашими компонентами. Избыточное или повторяющееся состояние является распространенным источником ошибок. В этой части вы узнаете, как правильно структурировать состояние, как поддерживать логику обновления состояния и как обмениваться состоянием между компонентами.- Реакция на ввод с состоянием
- Какую структуру состояния выбрать
- Обмен данными между компонентами
- Сохранение и сброс состояния
- Управление состоянием в редьюсере
- Отправка данных вглубь с помощью контекста
- Масштабирование состояния с редьюсером и контекстом
Продвинутые темы
Некоторым из ваших компонентов может потребоваться управление и синхронизация с системами вне React. Например, вам может потребоваться сфокусировать ввод с помощью API браузера, воспроизвести и приостановить видеопроигрыватель, реализованный без React, или подключиться и прослушать сообщения с удаленного сервера. В этой части курса по Реакт вы узнаете о лозейках, позволяющих «выйти за пределы» React и подключиться к внешним системам. Большая часть логики вашего приложения и потока данных не должны полагаться на эти функции.- Доступ к данным через рефы
- Управление DOM с помощью рефов
- Синхронизация с помощью эффектов
- Вам может не понадобиться эффект
- Жизненный цикл реактивных эффектов
- Отделение событий от эффектов
- Удаление лишних зависимостей эффектов
- Переиспользование логики с кастомными хуками
5 кастомных React хуков, которые улучшат ваш код
2 года назад·3 мин. на чтение
В этой статье рассмотрим несколько очень полезных React хуков.
1. Хук useWindowSize
- хук для получения размера экрана
Я уверен, что в некоторых проектах, над которыми вы работали, вам нужно было получить ширину и высоту окна пользователя.
Так вот, теперь у вас есть хук для этого, так что вы можете сделать это еще проще, чем раньше.
Этот хук может быть особенно полезен при реализации отзывчивого дизайна, когда по какой-то причине вам нужно запустить определенный код при определенных размерах. Более продвинутый вариант этого хука можно найти в статье “Хук useResize для отслеживания ширины экрана в ReactJS”.import { useState, useEffect } from "react"; interface WindowSize { width: number; height: number; } const useWindowSize = (): WindowSize => { const [windowSize, setWindowSize] = useState<WindowSize>({ width: window.innerWidth, height: window.innerHeight, }); useEffect(() => { const handleResize = () => { setWindowSize({ width: window.innerWidth, height: window.innerHeight, }); }; window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); }; }, []); return windowSize; };
2️. Хук useKeyPress
- хук для определения нажатия клавиши
Следующий хук позволяет определить, когда нажата определенная клавиша. Это может вызвать события или действия, основанные на нажатой клавише. Например, для закрытия модального окна, отправки формы и т.д.
Пример использования:import { useState, useEffect } from "react"; const useKeyPress = (targetKey: string): boolean => { const [keyPressed, setKeyPressed] = useState(false); const downHandler = ({ key }: KeyboardEvent) => { if (key === targetKey) { setKeyPressed(true); } }; const upHandler = ({ key }: KeyboardEvent) => { if (key === targetKey) { setKeyPressed(false); } }; useEffect(() => { window.addEventListener("keydown", downHandler); window.addEventListener("keyup", upHandler); return () => { window.removeEventListener("keydown", downHandler); window.removeEventListener("keyup", upHandler); }; }, []); return keyPressed; };
const closeModalKeyPress = useKeyPress("Escape");
3. Хук useInterval
- хук для вызова функции setInterval
Этот хук позволяет вам использовать функцию setInterval
в качестве хука. Как и функция setInterval
, этот хук имеет множество применений, например, анимация, обновление данных через регулярные промежутки времени или даже установка таймера.
Можно использовать этот хук следующим образом:import { useState, useEffect, useRef } from "react"; const useInterval = (callback: () => void, delay: number | null) => { const savedCallback = useRef<() => void>(); useEffect(() => { savedCallback.current = callback; }, [callback]); useEffect(() => { function tick() { savedCallback.current && savedCallback.current(); } if (delay !== null && delay > 0) { let id = setInterval(tick, delay); return () => clearInterval(id); } else { tick(); } }, [delay]); };
const [count, setCount] = useState(0); useInterval(() => { setCount(count + 1); }, 1000);
4. Хук useDebounce
Теперь мы поговорим о хуке, который выполняет функцию только после того, как пройдет определенное количество времени без ее вызова.
Это полезно, например, для ограничения скорости вызовов API или обновления состояния при изменении ввода, например, когда вы набираете текст в поисковой строке.
Пример использования:import { useEffect, useRef } from 'react'; export function useDebounce(callback:Function, timeout: number = 200, deps: Array<any> = []) { const data = useRef({ firstTime: true }); useEffect(() => { const { firstTime, clearFunc } = data.current; const handler = setTimeout(() => { if (clearFunc && typeof clearFunc === 'function') { clearFunc(); } data.current.clearFunc = callback(); }, timeout); return () => { clearTimeout(handler); }; }, [timeout, ...deps]); } export default useDebounce;
const [inputValue, setInputValue] = useState(""); useDebounce(() => { // вызов APIl }, 500);
5️. Хук useThrottle
Throttle означает, что функция будет выполняться один раз за каждый заданный промежуток времени. Это может быть полезно для предотвращения быстрого запуска слишком большого количества вызовов API или событий.
Пример:import { useEffect, useRef } from 'react'; export const useThrottle = (callback:Function, delay: number = 200, deps: Array<any> = []) => { const lastRan = useRef(Date.now()); useEffect( () => { const handler = setTimeout(function() { if (Date.now() - lastRan.current >= delay) { callback(); lastRan.current = Date.now(); } }, delay - (Date.now() - lastRan.current)); return () => { clearTimeout(handler); }; }, [delay, ...deps], ); }; export default useThrottle;
Еще больше крутых хуков вы можете найти в каталоге хуков.const [inputValue, setInputValue] = useState(""); useThrottle(() => { // вызов API }, 500);