Обновить
69.18

ReactJS *

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

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

Интеграция React и AngularJS через Webpack Module Federation

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

Переходите с AngularJS на React без стресса и суеты. В этой статье я поделюсь с вами способом, как оживить ваш проект, плавно встроив элементы React в структуру, построенную на добром старом AngularJS. Мы все знаем, что рефакторинг или полная смена фреймворка может пугать, особенно когда вложены годы труда. Но не волнуйтесь, я покажу, как использовать микрофронтенды и Module Federation для того, чтобы дать вашему приложению свежее дыхание, сохраняя при этом все то хорошее, что было накоплено за годы.

Читать далее

Создание кастомного React Native компонента Switch с помощью библиотек Reanimated и Gesture Handler (Часть 2)

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

Всех приветствую! Это вторая и заключительная часть моего цикла статей по созданию кастомного компонента Switch с помощью библиотек Reanimated и Gesture Handler. Здесь мы рассмотрим реализацию логики пропса disabled, добавим пару новых фич и напишем обработку изменения состояния value вне компонента.

Читать далее

Как создать YouTube GIF Maker с использованием Next.js, Node и RabbitMQ

Время на прочтение28 мин
Охват и читатели4.1K

В этом руководстве мы рассмотрим разработку веб-приложения по созданию GIF-файлов из видеороликов.

Функциональные возможности приложения:
- Создание GIF из видео на YouTube с определённым временным диапазоном.
- Предварительный просмотр результата перед выполнением фактической конвертации.

Компоненты системы:
- Клиентская часть на React (Next.js)
- Бэкенд-сервер на Node
- Node как Service Worker
- В качестве брокера сообщений — RabbitMQ
- Для хранения данных — MongoDB
- Для хранения медиафайлов — Google Cloud Storage

Полный код проекта можно найти на github, а по этой ссылке посмотреть демо-версию приложения.

Читать далее

Больше библиотек богу библиотек или как я переосмыслил i18n [next.js v14]

Время на прочтение6 мин
Охват и читатели928

Для интернационализации сделаны десятки по-своему потрясающих библиотек, такие как i18n, react-intl, next-intl. Все они отлично справляются со своей задачей - добавляют переводы в приложение или на сайт. Большинство из них проверены, отлажены и стабильно поддерживаются.

Но все они устарели.

Ведь всё это время развивалось и экосистема реакта. Так, последняя версия next.js включила крупные обновления из react.js - cache, taint, новые хуки и, конечно же, серверные компоненты. Команда самого React.js, вероятно, представит эти изменения уже в мае.

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

Читать далее

Авторизация в Django (DRF) и React по JWT-токену

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

Когда-то давно я уже делал авторизацию в Django и думал, что знаю о ней всё, но то была ошибка и оказалось, что я вообще ничего не знал и пользовался готовыми инструментами Django из коробки.

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

Читать далее

Создание кастомного React Native компонента Switch с помощью библиотек Reanimated и Gesture Handler (Часть 1)

Время на прочтение8 мин
Охват и читатели2.8K

Приветствую дорогой читатель! Если тебя интересует разработка под React Native и ты хочешь научиться работать с анимациями и отслеживаниями нажатий, то эта статья для тебя. Данная статья первая, что вышла из под моего пера клавиш ноутбука, поэтому прошу сильно не кидаться тапками. Здесь мы рассмотрим работу с кастомными анимациями в React Native и использование библиотек react-native-reanimated и react-native-gesture-handler.

Читать далее

End-to-end тестирование React приложения с помощью Playwright

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

Привет, я Лиза – веб разработчик в одной зарубежной компании. Хочу поделиться тем, как я автоматизировала регрессионное тестирование в рабочем проекте на React с использованием довольно нового фреймворка Playwright. Разберемся, почему именно этот фреймворк, какие подводные камни, как обойти авторизацию и кто этим пользуется. 

Читать далее

Готовим Telegram Mini App без туннеля и с Hot Module Reload на React, TypeScript

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели39K

В этой статье разберем как собрать комфортную девелопмент среду для разработки Telegram Mini App. Под комфортом я понимаю ситуацию когда тебе не нужно выгружать свое приложение в облако, чтобы увидеть результат работы в телеге, или запускать туннель типа ngrock, который после каждого перезапуска меняет ссылку. И я не уверен, что HMR можно получить через туннель. Поэтому я сделал свое решение, и хочу оставить его тут себе и потомкам.

Читать далее

React-lens — эффективное управление состоянием в приложениях в ReactJs

Уровень сложностиСредний
Время на прочтение10 мин
Охват и читатели314

Во многих разрабатываемых программах мы сталкиваемся с необходимостью организации работы с данными. Такие задачи могут быть самыми разными: хранение, актуализация, масштабирование и т. п. А ещё приходится реализовывать взаимодействие различных библиотек. Рассмотрим один из способов решения этих проблем при помощи React Lens.

Читать далее

Next.js App Router. Опыт использования. Путь в будущее или поворот не туда

Время на прочтение8 мин
Охват и читатели24K

Два года назад команда Next.js представила новый подход к роутингу, который должен был стать заменой так называемому Pages Router, вместе с тем добавив ряд принципиально нового функционала.

Практически в каждом релизе я находил множество полезного и нужного как для личных проектов, так и для коммерческих. Тем не менее, 13-ю версию я обошёл стороной для коммерческих проектов, так как функционал показывал себя крайне нестабильным и недостаточным. Однако, сейчас этот функционал перенесён в категорию стабильных, App Router считается основным, а Pages Router скорее поддерживаемым для обратной совместимости и постепенного перехода.

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

Читать далее

Личный опыт: переход с Redux на Effector. И при чем тут DX

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели7.9K

Frontend-разработка очень богата различными инструментами. Новые фреймворки и библиотеки выходят чуть ли не каждый день и, к сожалению, не все из них одинаково полезны или могут сделать ваш продукт лучше. Кроме того, они различаются по степени удобства именно для разработчика. Есть такое понятие DX – Developer eXperience – по аналогии с UX. Это то, насколько разработчику удобно, интуитивно понятно пользоваться определенным сервисом.

Меня зовут Аня, я frontend-специалист в компании SimbirSoft с опытом в разработке более трех лет. Уже успела поработать со многими инструментами, участвовала в проекте, где переносили огромное приложение на новые библиотеки, в том числе заменяли Redux на Effector. В этой статье хочу поделиться своими мыслями об этих стейтменеджерах с точки зрения DX. 

Да, их сравнивали много раз, но мой акцент будет на том, как писать код на Effector для привычных кейсов в Redux. Подчеркну, DX — это не про рациональные аргументы, а про комфорт, фэншуй и тому подобные вещи (вы же понимаете, о чем я, правда?…).

Забегая вперед, хочу сказать, что Effector мне понравился. И прежде всего своей простотой — да-да, один из наших любимых принципов KISS). И может быть, что я по поводу Effector испытываю ещё какую-то национальную гордость, потому что это разработка ребят из России.

Читать далее

Как я использую GigaChat для Frontend разработки

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

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

GigaChat - это мультимодальная модель (аналог ChatGPT от OpenAI), которую разрабатывает Сбер. В отличие от языковых моделей, мультимодальные работают не только с текстом. Они могут генерировать иллюстрации.

Читать далее

React + Three.js. Создаём собственный 3D шутер. Часть 3

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели12K

Привет, дорогие пользователи мира IT!

В эпоху активного развития веб-технологий и интерактивных приложений, 3D-графика становится всё более актуальной и востребованной. Но как создать 3D-приложение, не теряя преимуществ веб-разработки? В этой статье мы рассмотрим, как сочетать мощь Three.js с гибкостью React, чтобы создать собственную игру прямо в браузере.

В статье вы познакомитесь с библиотекой React Three Fiber и научитесь создавать интерактивные 3D-игры.

Читать дальше →

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

Причины говнокода во фронтенде. Мнение мимокрокодила

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

Мне не раз попадались такие проекты, от кода которых берет оторопь. Такое чувство, что сами авторы не смогут объяснить - почему у них все выглядит именно так. В этот момент у меня возникает вопрос: как так получилось? Если вас он тоже волнует, то могу пожелать лишь приятного чтения.

Читать

Сжатие css классов. Как сделать веб Ещё быстрее. next.js

Время на прочтение3 мин
Охват и читатели8.4K

Порою, заходя в стили проектов, я невольно пугаюсь сложившейся длине имён - модуль, блок, элемент, подэлемент, модификатор 1, модификатор 2. Длинные классы увеличивают вес страницы, это в свою очередь означает увеличение времени загрузки самого главного для рендера страницы - документа и файла стилей, от которых напрямую зависят метрики FCP, LCP.

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

Читать далее

Symbiote.js 2.0

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

Всем привет! 

Спешу сообщить о выходе новой версии замечательной фронтенд-библиотеки Symbiote.js! Никогда не слышали о ней? Самое время познакомиться.

Symbiote - это компактная, но очень мощная библиотека для создания веб-компонентов и приложений на их основе. Да, я знаю, у нас уже есть React, Vue, Svelte, LitElement и прочее. И может быть, не очень понятно, зачем вникать во что-то еще… Но не торопитесь с выводами, Симбиоту есть, что вам предложить.

Читать далее

Детальный React. Реконсиляция, рендеры, Fiber, виртуальное дерево

Уровень сложностиСложный
Время на прочтение19 мин
Охват и читатели36K

В сети можно найти огромное количество статей, мануалов и книг по основам React, включая официальную документацию от разработчиков. В этой статье мы не будем писать HelloWorld и изучать общеизвестные концепции. Сегодня мы заглянем под капот библиотеки и попытаемся понять, как она устроена внутри, как хранит данные, и как, на самом деле выглядит её виртуальное дерево.

На момент написания статьи, последняя стабильная версия React 18.2.0. За 10 лет разработчики Facebook проделали колосальный объем работы, было реализовано много фич и сделано не мало оптимизаций. За эти годы, так же, происходили и кардинальные архитектурные изменения. Очевидно, одной статьи мало, чтобы покрыть всю механику React, поэтому, данная публикация станет первой в серии статей о внутреннем устройстве React. Здесь мы познакомимся с основными сущностями и архитектурными решениями.

Читать далее

Стилистические правила умерли, да здравствуют стилистические правила

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели7.1K

Под конец прошлого года, по ряду причин, ESLint отказались от дальнейшей поддержки и развития стилистических правил. А тема, как по мне, несправедливо осталась в тени. Давайте разберемся, почему так произошло и какие изменения нас ждут на поприще статического анализа и форматирования кода.

Читать далее

Создание веб-приложения с использованием микрофронтендов и Module Federation

Уровень сложностиСредний
Время на прочтение12 мин
Охват и читатели12K

Привет! В данной статье мы разберём процесс разработки веб-приложения на основе подхода микрофронтендов с использованием технологии Module Federation

Читать далее

Вопросы и ответы для собеседования на позицию frontend-разработчик. Часть 2

Уровень сложностиПростой
Время на прочтение20 мин
Охват и читатели53K

Всем привет! В этой статье (части) рассмотрим вопросы, связанные с великим и могучим TypeScript'ом, которые задают на собеседованиях. Если вы не читали прошлую статью, где описаны вопросы по JS, вот ссылочка. Пожалуйста, не заучивайте вопросы, это вредно для вашего здоровья!)

Читать далее