Как стать автором
Обновить
55.51

ReactJS *

JavaScript-библиотека для создания интерфейсов

Сначала показывать
Порог рейтинга
Уровень сложности

И снова о useCallback

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров4.3K

Привет, Хабр! Так вышло, что на текущем я попал под сокращение, а значит путь к собеседованиям открыт. Как раз вчера случилось одно (видимо, из многих), на котором зашла речь про useCallback.

Читать далее
Всего голосов 20: ↑20 и ↓0+20
Комментарии9

Новости

Преобразования данных с React Query

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров1.4K

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

Читать далее
Всего голосов 7: ↑8.5 и ↓-1.5+10
Комментарии1

Особенности обработки native events в React.js

Уровень сложностиПростой
Время на прочтение11 мин
Количество просмотров1.9K

В данной статье рассматриваются особенности, которые связаны с обработкой нативных событий (native events) в React-приложениях. Существует проблема частичной потери контекста функционального компонента при обработке нативных событий, которые навешиваются на элементы с помощью глобальных объектов document, window или через ссылки (refs). В статье рассматривается данная проблема и предлагается способ её решения (один из вариантов).

Читать далее
Всего голосов 6: ↑5 и ↓1+4
Комментарии10

Руководство по Next.js. 2/3

Уровень сложностиСредний
Время на прочтение52 мин
Количество просмотров2.5K


Hello world!


Представляю вашему вниманию вторую часть обновленного руководства по Next.js.



На мой взгляд, Next.js — это лучший на сегодняшний день инструмент для разработки веб-приложений.


Предполагается, что вы хорошо знаете JavaScript и React, а также хотя бы поверхностно знакомы с Node.js.


Обратите внимание: руководство актуально для Next.js версии 14.


При подготовке руководства я опирался в основном на официальную документацию, но в "отсебятине" мог и приврать (или просто очепятаться) 😁 При обнаружении подобного не стесняйтесь писать в личку 😉


Парочка полезных ссылок:


Читать дальше →
Всего голосов 8: ↑12 и ↓-4+16
Комментарии3

Один репозиторий, чтобы править всеми

Уровень сложностиПростой
Время на прочтение10 мин
Количество просмотров9.2K

Собираем кроссплатформенное (server-client, static-client, gh-pages, Android, iOS, macOS, Linux, Windows, Chrome extension, Docker, Kubernetes, ...) React приложение. В этой статье я почти не затрону Deep backend, только чуть-чуть в конце. Но рассмотрю Open Source шаблон/заготовку для сборки кроссплатформенных React приложений который мы используем в Deep.Foundation.

Надеть еще одно кольцо всевластия
Всего голосов 13: ↑13.5 и ↓-0.5+14
Комментарии5

Redux это бойлерплейт, а Mobx нет! Но есть нюанс

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров4.1K

На прошлой неделе впервые поучаствовал в конференции по Frontend, где один из докладчиков, расказывал, как удачно его команда переехала с Redux на Mobx. Главным преимуществом он назвал отсутствие бойлерплейта и ускорение разработки в полтора раза.

Я прочитал несколько статей и посмотрел другие доклады, где все как один говорят, что Mobx лучше, чем Redux. Возможно это и так, но почему в сравнение всегда идет Redux, а не Redux-Toolkit, я не понимаю. Попытаемся конструктивно посмотреть действительно ли Mobx настолько хорош как о нем говорят.

Читать далее
Всего голосов 10: ↑7 и ↓3+4
Комментарии100

Мультидоменный проект (мультисайт) на NextJS

Уровень сложностиСложный
Время на прочтение3 мин
Количество просмотров2.1K

Привет! Я frontend-разработчик в одной компании, занимающейся электронной коммерцией.

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

Представим, что у вас порядка 500-1000 доменов и 5-10 разных дизайнов сайтов, распределенных между этими доменами примерно так:

Читать далее
Всего голосов 5: ↑4 и ↓1+3
Комментарии5

Как стать Frontend-разработчиком бесплатно? Программа обучения с нуля

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров18K

Если вбить слово «фронтенд» в поисковую строку, можно найти огромное количество курсов по данному направлению. Проблема в том, что все курсы являются платными и, как правило, имеют ценник в несколько десятков тысяч рублей. 

Чтобы разбавить засилие платных курсов, мы подготовили для вас программу обучения «Frontend-разработчик с нуля», которая состоит только из бесплатных материалов.

Читать далее
Всего голосов 24: ↑19 и ↓5+14
Комментарии20

Поверхностный анализ работы DOM на библиотеках JavaScript

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров2.3K

Приветствую Вас, дорогие читатели Хабр! В данной статье мы рассмотрим работы DOM на таких библиотеках JavaScript, как Vue, React, Angular. Материал поможет понять принцип работы, конечно, самый лучший способ разобраться в той или иной теме — это практика. В этой статье будут приведены несколько примеров для лучшего понимания материала.

Читать далее
Всего голосов 5: ↑3.5 и ↓1.5+2
Комментарии4

Руководство по Next.js. 1/3

Уровень сложностиСредний
Время на прочтение45 мин
Количество просмотров5.2K


Hello world!


Представляю вашему вниманию первую часть обновленного руководства по Next.js.



На мой взгляд, Next.js — это лучший на сегодняшний день инструмент для разработки веб-приложений.


Предполагается, что вы хорошо знаете JavaScript и React, а также хотя бы поверхностно знакомы с Node.js.


Обратите внимание: руководство актуально для Next.js версии 14.


При подготовке руководства я опирался в основном на официальную документацию, но в "отсебятине" мог и приврать (или просто очепятаться) 😁 При обнаружении подобного не стесняйтесь писать в личку 😉


Парочка полезных ссылок:


Читать дальше →
Всего голосов 13: ↑14.5 и ↓-1.5+16
Комментарии2

Как я делал загрузчик файлов на react и выложил на npm

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров3.2K

Как я создавал гибкий и настраиваемый компонент React для загрузки файлов с возможностью перетаскивания , и выложил на npm. Создана с использованием инструмента create-react-library, который позволяет быстро и легко создать новую библиотеку React.

Читать далее
Всего голосов 7: ↑5 и ↓2+3
Комментарии11

Понимаем полностью useMemo и useCallback

Уровень сложностиПростой
Время на прочтение15 мин
Количество просмотров9.5K

Понимаем полностью useMemo и useCallback

Экскурсия по двум самым известным хукам в React

Если вы изо всех сил пытались разобраться в useMemo и useCallback, вы не одиноки! Я разговаривал со многими разработчиками React, которые cломали голову над этими двумя хуками.

Моя цель в этом здесь — прояснить всю эту путаницу. Мы узнаем, что они делают, почему они полезны и как получить от них максимальную пользу.

Погнали!

Читать далее >
Всего голосов 12: ↑12 и ↓0+12
Комментарии3

Convex — альтернатива Firebase и Supabase

Время на прочтение10 мин
Количество просмотров2.6K

Convex - это платформа для создания бэкенда. В нее входит: Server Functions, ACID Database, Vector Search, Scheduling and crons, File Storage

Все в Convex работает в режиме реального времени. Также написаны удобные интерфейсы для работы с Convex на React

Читать далее
Всего голосов 8: ↑9 и ↓-1+10
Комментарии3

Ближайшие события

Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн
Антиконференция X5 Future Night
Дата30 мая
Время11:00 – 23:00
Место
Онлайн
Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург

Почему вам необходим React Query

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров7.4K

Не секрет, что я ❤️ React Query за то, как он упрощает взаимодействие с асинхронным состоянием в приложениях React. И я знаю, что многие коллеги-разработчики согласятся с этим.

Однако иногда я встречаю сообщения, в которых утверждается, что он вам не нужен для чего-то столь «простого», как получение данных с сервера.

Читать далее
Всего голосов 8: ↑8.5 и ↓-0.5+9
Комментарии21

Как сделать из императивного компонента — декларативный React-компонент

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров4K

Иногда в своё React-приложение нужно встроить сторонний компонент, который не работает с React и часто оказывается императивным.

Такой компонент приходится каждый раз инициализировать, уничтожать и, главное, проверять его состояние, прежде чем вызывать его методы.

Верным признаком того, что компонент нужно обернуть в декларативный компонент является обилие useEffect-ов, где проверяются разные сочетания параметров компонента. И в зависимости от этих сочетаний вызываются соответствующие методы компонента.

В статье я хочу разобрать по шагам, как превратить такой компонент в декларативный React-компонент.

Вперёд, какие там шаги?
Всего голосов 5: ↑5 и ↓0+5
Комментарии10

Логи в файлах: написал своё приложение для просмотра структурированных логов

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров4.5K

Не каждому проекту нужно децентрализованное логирование. В моём случае, оказалось проще хранить логи в .json файлах формата Compact Log Event Format (CLEF). Мне нужно было простое и бесплатное решение для просмотра логов.

Читать далее
Всего голосов 10: ↑10.5 и ↓-0.5+11
Комментарии12

Книга «React быстро. 2-е межд. изд.»

Время на прочтение11 мин
Количество просмотров5.9K
image Привет, Хаброжители!

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

«React быстро. 2-е издание» предлагает уникальный подход к освоению фреймворка React. Более 80 компактных примеров проведут читателя от изучения основ работы к созданию довольно сложных приложений. В книге подробно описаны многие функциональные компоненты, хуки React и средства доступности веб-приложений, а также представлены интересные проекты для отработки новых навыков.

Книга предназначена для разработчиков, имеющих опыт создания веб-приложений на базе JavaScript.
Читать дальше →
Всего голосов 12: ↑12 и ↓0+12
Комментарии2

Typescript Generics

Уровень сложностиСложный
Время на прочтение8 мин
Количество просмотров6.3K

Javascript - крутой язык со своими преимуществами и недостатками. И одно из его свойств - это динамическая типизация, которая одновременно может быть как преимуществом, так и недостатком. Очень много холиварных тредов на этот счет, но по мне так все просто. Для небольших и простых проектов динамическая типизация - это очевидный плюс, так как сильно ускоряет разработку. Однако, когда речь идет о сложных системах, над которыми работает не один человек, сложно отрицать преимущество статической типизации. Ведь статические типы не только регламентируют систему, но и при больших размерах системы начинают ускорять разработку.

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

При этом написание типов бывает действительно утомительным, но Typescript предоставляет возможности ускорить и этот процесс. Здесь нам на помощь придут дженерики.

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

Читать далее
Всего голосов 13: ↑11 и ↓2+9
Комментарии2

Топ-3 причины, почему вы должны использовать Copilot

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров31K

Всем привет! Меня зовут Анатолий Барцев, я frontend-разработчик в команде Модерации Циан. Я решил протестировать Copilot, чтобы оценить, полезен ли он для реальной разработки. В статье расскажу, какие выделил для себя плюсы использования, а также покажу, как GitHub Copilot помогает в разработке на примере проекта на React/Typescript.

Читать далее
Всего голосов 39: ↑28 и ↓11+17
Комментарии33

Django + React. Авторизация с помощью сессий между разными источниками

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров2K

Всем здравия! Сегодня будет рассмотрена авторизация с помощью сессий между Django и React, которые находятся на разных доменах, т.е случай "cross-origin". Я в двух словах донесу принцип работы, причины появления концепций и технологий описанных здесь, оставлю ссылки на более подробные источники и приведу код конкретной реализации с объяснением своих шагов. Кого интересует полный код, он находится на GitHub.

Читать далее
Всего голосов 5: ↑5 и ↓0+5
Комментарии0
1
23 ...