React

Антипаттерны и лучшие практики React - "за" и "против Может показаться, что React - один из наименее подверженных влиянию мнений фреймворков на Диком Западе Web. Несмотря на это, существует множество ошибок, которые можно совершить, и еще больше вещей, которые можно сделать, чтобы написать чистый и читабельный код. В этой статье рассказывается о 17 распространенных антипаттернах и лучших практиках в React. https://dev.to/perssondennis/react-anti-patterns-and-best-practices-dos-and-donts-3c2g ✍️ @React_lib

Передача props компоненту Компоненты React используют props для взаимодействия друг с другом. Каждый родительский компонент может передавать некоторую информацию своим дочерним компонентам, передавая им props. Props могут напоминать атрибуты HTML, но через них можно передавать любые значения JavaScript, включая объекты, массивы и функции. https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children ✍️ @React_lib

Как вырасти от junior до middle? Middle-специалист отличается не только опытом и уровнем владения технологиями, но и софт скилами. Курс Яндекс Практикума «Мидл фронтенд-разработчик» составлен так, чтобы вы могли освоить и то, и другое а ещё: • разработать мессенджер, используя только JavaScript, Typescript, CSS и API браузера; • познакомиться с теорией и отработать её на практике в больших проектах; • научиться брать ответственность за решения и вкладываться в общий результат; • самостоятельно декомпозировать задачи и распределять время; • исследовать смежные сферы программирования, без которых невозможен фронтенд: • информационную безопасность, прототипирование интерфейсов, командную работу, DevOps, ООП. На всех этапах вас будут сопровождать опытные разработчики: мы не дадим просесть по учёбе и поможем выкроить время на образование. Вы будете практиковаться на реальных кейсах и положите в портфолио работающие проекты. А карьерные консультации подготовят вас к разговору о повышении или помогут с поиском новой работы. Пройдите первый бесплатный урок

6 подходов к выборке данных в React Получение данных является ключевым аспектом любого React-приложения. Для разработчиков React очень важно понимать различные подходы к получению данных и понимать, какой из них наиболее подходит для их конкретного случая. https://dev.to/char_carr_dev/6-approaches-for-data-fetching-in-react-1ec3 ✍️ @React_lib

7 небольших и недооцененных библиотек React 🔥 Сегодня я расскажу о 7 небольших и недооцененных библиотеках React, которые я люблю использовать и которые могут понравиться вам. https://dev.to/naubit/7-small-underrated-react-libraries-h54 ✍️ @React_lib

Frontend meetup (Online) 1. Построение микрофронтендной архитектуры. Первый взгляд, боли и решения —Никита Морозов, АО "МТТ" В докладе будет представлен путь построения микрофронтендной архитектуры на примере проекта МТС «Exolve», а также поэтапный рассказ об эволюции проекта от webpack до vite, от SingleSPA до собственного решения 2. Бьем монолит. Основные практики — Гузенко Александр IT_ONE Рассмотрим основные подходы к разбиению монолитных фронтедов. 3. Безопасный TypeScript. Защищаемся от any в кодовой базе —Максим Земсков, Яндекс Как получить максимум безопастности при использования TypeScript. Какие настройки стоит использовать и как улучшить типизацию стандартных функций. 4. Beyond Frontend — Алексей Тюльдюков, VK Как T-shape подход может помочь фронтенд разработчику стать техническим менеджером 🗓 12 июля, начало в 19:00 мск, Среда 🚀 Телеграмм канал с анонсами митапов ✅ Регистрация на мероприятие

Full Modern React Tutorial #1 - Introduction #2 - Creating a React Application #3 - Components & Templates #4 - Dynamic Values in Templates #5 - Multiple Components #6 - Adding Styles #7 - Click Events #8 - Using State (useState hook) #9 - Intro to React Dev Tools #10 - Outputting Lists Все видео доступны на youtube ✍️ @React_lib

Многопоточное приложение React с использованием useWorker Если мы выполняем какую-либо требующую больших затрат задачу, она будет блокировать взаимодействие с пользовательским интерфейсом. И пользователю придется ждать, пока она завершится, чтобы выполнить любое другое действие, что создает плохое впечатление от UX. https://dev.to/nilanth/multi-threaded-react-app-using-useworker-gf8 ✍️ @React_lib

Prop drilling and component composition in React https://alexsidorenko.com/blog/react-prop-drilling-composition/ ✍️ @React_lib

4 совета по React для мгновенного улучшения вашего кода Я хотел бы поделиться четырьмя советами, которые помогли мне в написании лучшего кода React. Надеюсь, вы найдете для себя что-то новое и полезное. Так что давайте приступим к делу! https://javascript.plainenglish.io/4-react-tips-to-instantly-improve-your-code-7456e028cfa3 ✍️ @React_lib

Переосмысление лучших практик React Мы начнем с ознакомления с основными ограничениями React и прошлыми подходами к управлению ими, исследуя основные паттерны и принципы, которые объединяют счастливые приложения React. К концу мы поймем, как меняются ментальные модели в таких фреймворках React, как Remix и каталог приложений в Next 13. Давайте начнем с изучения основных проблем, которые мы пытались решить до сих пор. Это поможет нам контекстуализировать рекомендацию основной команды React использовать с React фреймворки более высокого уровня, которые имеют тесную интеграцию между сервером, клиентом и бандлером. https://frontendmastery.com/posts/rethinking-react-best-practices/ ✍️ @React_lib

Переходите на новый уровень в JS-разработке и разнообразьте свою работу! Пройди тест по JS и проверь как хорошо ты знаешь язык. Ответишь — пройдешь на продвинутый курс «JavaScript Developer. Professional» от OTUS по специальной цене + получишь видео-курс по Git в подарок 👉 ПРОЙТИ ТЕСТИРОВАНИЕ https://otus.pw/yopR/ Нативная интеграция. Информация о продукте www.otus.ru

Что такое Vite и почему вы должны использовать его вместо создания React-приложения? Очень просто, Create React App (далее CRA) и Vite (произносится veet, в переводе с французского означает "быстрый") - это инструменты, которые помогают создавать новые React-приложения. https://luketheweb.dev/blog/what-is-vite-and-why-should-you-use-it-instead-of-create-react-app ✍️ @React_lib

Техники структурирования папок для начинающих и продвинутых проектов React Благодаря полному отсутствию определенных понятий относительно структуры и написания кода, React является невероятно гибкой библиотекой. Однако, поскольку React не установила никаких стандартов, эта гибкость делает сложным структурирование проекта с использованием React. В этой статье мы рассмотрим три различные структуры папок, которые могут быть применены к проектам любого размера. Сложность этих структур указана от самой простой к самой сложной, но в зависимости от размера вашего проекта более простой подход может оказаться предпочтительным. https://dev.to/fpaghar/folder-structuring-techniques-for-beginner-to-advanced-react-projects-30d7 ✍️ @React_lib

​React-query Хуки для получения, кэширования и обновления асинхронных данных в React • Transport/Protocol/Backend независимая выборка данных (REST, GraphQL, promises, что угодно!) • Автоматическое кэширование + выборка (stale-while-revalidate, Window Refocus, Polling/Realtime) • Параллельные + зависимые запросы • Мутации + Reactive выборка запросов • Многослойный кэш + автоматический сборщик «мусора» (garbage collector) • Load-More + Infinite Scroll Queries w/ Scroll Recovery • Отмена запросов и многое друго https://github.com/TanStack/query 👉 @Githublib

React Batching от создания (v0.4.0) до React 18 React Batching - это инструмент, который неявно присутствует в ежедневной разработке, но все же его понимание, может помочь ускорить вашу страницу, а так же объяснить иногда казалось бы странное поведение рендера 00:00 Анонс темы 01:25 Знакомство со спикером 02:44 Задачки по батчингу 07:35 От теории к практике 09:55 Что есть батчинг 11:08 unstable_batchedUpdates 14:15 Пример из реальной жизни 17:14 flushSync 21:31 Redux не решает проблему 24:12 История батчинга 28:38 Вспоминаем React версии 0.4.0 30:00 Благодарность 30:45 Вопросы и Ответы https://www.youtube.com/watch?v=lj0JjbVJPz0 ✍️ @React_lib

5 паттернов проектирования React, которые вы должны знать Вы устали писать один и тот же код снова и снова? Хотите поднять свои навыки работы с React на новый уровень? Откройте для себя силу HOCs, Render Props, Hooks и Context API; эти пять умопомрачительных паттернов проектирования React изменят ваше представление о кодинге! https://javascript.plainenglish.io/5-react-design-patterns-you-should-know-629030e2e2c7 ✍️ @React_lib

5 советов по оптимизации производительности вашего приложения React Одна из самых неприятных вещей для разработчика React - вкладывать время и усилия в создание приложения, а потом обнаружить, что оно работает медленно и не реагирует на запросы. https://dzone.com/articles/5-tips-for-optimizing-your-react-apps-performance ✍️ @React_lib

Что такое состояние В данной статье хотелось бы описать и раскрыть формальную сторону вопроса «что такое состояние» для лучшего понимания фундаментальных основ надёжности любого клиентского приложения. Хочется уже поставить точки в некоторых вопросах терминологии, чтобы чётче отвечать на вопросы «что, когда и зачем брать» при выборе библиотек и технологий для клиентского веб-приложения. https://habr.com/ru/companies/ruvds/articles/706086/ ✍️ @React_lib

React + TypeScript: необходимый минимум Многие React-разработчики спрашивают себя: надо ли мне учить TypeScript? Еще как надо! Преимущества изучения TS могут быть сведены к следующему: ваши шансы получить более высокооплачиваемую работу сильно увеличатся; в вашем коде будет намного меньше багов, его будет легче читать и поддерживать; рефакторить код и обновлять зависимости станет гораздо проще. Эта статья представляет собой минимальное введение по использованию TS в React. Rus https://habr.com/ru/companies/timeweb/articles/707744/ Eng https://profy.dev/article/react-typescript ✍️ @React_lib