#react #hook #JavaScript #js

👩‍💻 useEffect в React

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

До появления хуков побочные эффекты в компонентах React обрабатывались в методах жизненного цикла класса, таких как componentDidMount, componentDidUpdate и componentWillUnmount. С помощью хуков useEffect предоставляет унифицированный API для обработки этих сценариев в компонентах функций.

🖥 Читать статью

📱 @dev_notes_ru

#React #Vite #JavaScript

👩‍💻 Руководство по использованию Vite в React

Vite, разработанный Evan You (создателем Vue.js), создан для обеспечения молниеносной среды разработки. Для этого он обслуживает файлы с помощью нативных модулей ES и использует оптимизированный сервер разработки. Всё это позволяет ускорить запуск сервера и сделать разработку более отзывчивой.

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

В статье мы рассмотрим, как создать проект React с помощью Vite, изучим структуру проекта, покажем, как работать с ресурсами и развернуть приложение. В конце мы рассмотрим, как Vite может улучшить опыт разработки React.

🖥 Читать статью

📱 @dev_notes_ru

#NodeJS #React

👩‍💻 Что означает гидратация

Термин гидратация часто встречается в разговорах о JavaScript фреймворках.

Короткий ответ: это процесс, в ходе которого JavaScript выполняет, согласовывает и делает интерактивным HTML, уже находящийся в DOM, посредством рендеринга на стороне сервера (SSR).

🖥 Читать статью

📱 @dev_notes_ru

👩‍💻 React и FormData

Когда изучаете, как получить доступ к данным формы в React, исторически вы должны были узнать об управляемых и неуправляемых полях. Позже можете начать использовать сторонние абстракции, такие как Formik или React Hook Form, использующие управляемые и неуправляемые методы под капотом. В любом случае конечной целью является сбор данных формы. В случае с управляемой формой ваши данные — это ваше состояние. В случае с неуправляемой нужно собирать значения формы самостоятельно, и обычно разработчики выбирают для этого рефы.

Все поля форм в React должны быть либо управляемыми, либо неуправляемыми, потому что вы либо добавляете value в проп, либо нет. FormData, стандарт JavaScript с 2010 года, — это способ доступа к данным формы, независимо от того, управляемая она или неуправляемая, но большинство предпочитает неуправляемую.

🖥 Читать статью

📱 @dev_notes_ru

#React #FromData #JavaScript #TypeScript

👩‍💻 Используйте useId() вместо вручную созданных ID

Мы считаем, что следует чаще использовать хук useId(). Если вы обнаружили, что не используете его, есть большая вероятность, что ваше приложение или сайт либо недоступны (a11y), либо вы создаёте код, склонный к ошибкам. Позвольте объяснить.

tl;dr
✅ Используйте`useRef()` вместо вручную созданных ID, если требуется доступ к DOM из JS
✅ Используйте useId() вместо вручную созданных ID, чтобы связать два узла DOM для обеспечения доступности.


🖥 Читать статью

📱 @dev_notes_ru

#React #Hooks #useId

👩‍💻 Хук useState в React: Полное руководство

В React хук useState позволяет добавлять состояние в функциональные компоненты. useState возвращает массив с двумя значениями: текущее состояние и функцию для его обновления.

🖥 Читать статью

📱 @dev_notes_ru

#React #Hook #UseState

👩‍💻 Внутреннее устройство React: Какой useEffect запускается первым?

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

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

Но приходилось ли сталкиваться с ситуациями, когда хуки useEffect запускаются в неожиданном порядке, если задействовано несколько слоев компонентов?

🖥 Читать статью

📱 @dev_notes_ru

#React #useEffect