React | Разработка приложений

🔥 Шаблонные строки Шаблонные строки используют, чтобы создавать сложные объекты класса String, а также динамически вычислять стили элементов в зависимости от условий. Можно вставлять значения переменных, операторы, вызовы функций и т. д.

💡 Cинтаксическая структура — enum TypeScript вводит удобную синтаксическую структуру — enum. Enum используется для конечных перечислений. Освоив enum, поначалу хочется писать его очень часто. Однако у enum есть справедливая критика, связанная с генерируемым кодом после компиляции.

Использовать 'any' Плюсы: - Вы не хитрите и не пишете костылей. - Вы сознательно показываете, что в будущем код стоит доработать. - Подобный тип легко найти поиском по проекту. Минусы: - Слишком частое использование этого приема вряд ли принесет пользу. - Нужна сознательность и ответственность, чтобы в будущем убрать такие затычки.

⚡ Хук useSyncExternalStore Для обеспечения безопасной и эффективной интеграции компонентов React с внешними изменяемыми источниками во время параллельного рендеринга.

Переменные let и const в React let и const — предпочтительные ключевые слова для объявления переменных в React, поскольку их поведение предсказуемо. Как и в JS, переменные, которые планируется переназначить, объявляют с помощью let, а те, которые не нужно переназначать, — const. const также используют при объявлении компонентов в комбинации со стрелочными функциями, поскольку компоненты остаются неизменными.

В приведенном примере у нас имеется 2 страницы, обрабатываемые роутером: главная (home) и контакты (contacts). При клике по <Link> роутер рендерит соответствующий <Route> (маршрут, путь). Обратите внимание: под капотом  <Link>  рендерит  <a> с настоящим href

Axios это один из самых популярных HTTP клиентов для браузеров и node.js, основанный на промисах. В Axios есть поддержка запросов, получение ответов от сервера, их трансформация и автоматическая конвертация в JSON.

Компоненты Class Components были основной частью React до появления React Hooks. Хотя большинство новых проектов отдают предпочтение функциональным компонентам, все еще существует много проектов на основе React, в которых используются компоненты класса.

Хранилище (store) — это объект, который: ✓ содержит состояние приложения; ✓ отображает состояние через getState(); ✓ может обновлять состояние через dispatch(); ✓ позволяет регистрироваться (или удаляться) в качестве слушателя изменения состояния через subscribe()

Reducer — это чистая функция, которая вычисляет следующее состояние дерева на основании его предыдущего состояния и применяемого действия. Редюсеры определяют, как состояние приложения изменяется в ответ на экшены, отправленные в стор. Экшены только описывают, что произошло, но не описывают, как изменяется состояние приложения.

Нейросеть ChatGPT собрала подборку топовых каналов, которые понадобятся любому разработчику! 1337 – известное популярное айти медиа о нейросетях, технологиях и интернет-трендах. Habr Articles – полезные статьи о программировании с известного русскоязычного форума Habr. ChatGPT-4 – комьюнити фанатов ChatGPT 4 версии. Здесь всё об нейросетях, айти технологиях и не только. Apple News – актуальная и полезная информация об Apple. Новости, обзоры, секреты, советы и фишки.

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

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

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

Уже 31 мая стартует обучение на продвинутом онлайн-курсе «Архитектура и шаблоны проектирования» в OTUS. Успейте протестировать процесс обучения на бесплатном вебинаре  «Паттерн Command: от процедурного до функционального программирования»: регистрация Данный паттерн у всех ассоциируется с объектно-ориентированным стилем программирования. На бесплатном вебинаре мы рассмотрим его реализацию в различных методологиях, чтобы легко его узнавать и проводить параллели. Вебинар обязательно будет полезен для всех разработчиков, которые хотят изучить основные паттерны проектирования и научиться применять их в сложных ситуациях. Нативная интеграция. Информация о продукте www.otus.ru

📗 Хуки useEffect и useLayoutEffect – придание жизни компонентам, а точнее – придание методов жизненного цикла Если вы работали с классовыми компонентами, то знакомы с методами жизненного цикла. Они служат для того, чтобы совершать какие-то операции на разных стадиях жизни компонента. Для этого есть два хука – useEffect и useLayoutEffect. Они похожи между собой, за исключением небольшой разницы в рендеринге. В случае с useLayoutEffect React не запускает рендеринг построенного DOM дерева до тех пор, пока не отработает useLayoutEffect. Если же берём useEffect, то React сразу запускает рендеринг построенного DOM, не дожидаясь запуска useEffect.

Без лишних слов: 20 ТБ курсов Не платите за курсы, если они в свободном доступе! Архиватор – тут есть всё

📚 хук useImperativeHandle настраивает значение экземпляра, которое предоставляется родительским компонентам при использовании  ref. В большинстве случаев следует избегать императивного кода, использующего ссылки.  useImperativeHandle должен использоваться с forwardRef.

‼️ Хук useRef – прямая связь с узлами и не только Бывают ситуации, когда необходимо обратиться к какому-то DOM-объекту напрямую. Для этого существует хук useRef. Cоздаём объект ref и указываем его в качестве элемента, обозначающего DOM-объект, к которому хотим обратиться, а также прописываем этот объект в качестве параметра. Далее можем взаимодействовать с Dom-объектом напрямую, как если бы мы нашли его с помощью селектора. Для этого используем свойство current у объекта ref.

❗ Хук useMemo – оптимизируй вычисления Этот хук позволяет не производить одни и те же вычисления много раз. Как только меняется какая-то зависимость из массива, запускается callback, который рассчитывает другое значение. Если ни одна зависимость не поменялась, то при рендеринге в переменную будет подставлено предыдущее вычисленное значение.