Как стать автором
Обновить
75.42
Рейтинг

ReactJS *

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

Сначала показывать
  • Новые
  • Лучшие
Порог рейтинга
  • Все
  • ≥0
  • ≥10
  • ≥25
  • ≥50
  • ≥100

Игра с голосовым управлением на React и Phaser

Блог компании KTS JavaScript *ReactJS *Медийная реклама

В апреле 2020 года перед отделом рекламных спецпроектов KTS встала непростая задача: разработать игру-раннер с управлением голосом в браузере.

В этой статье я расскажу, как мы делали этот проект, какие технические решения принимали, какие технологии использовали и с какими проблемами сталкивались.
При разработке мы использовали TS + React + MobX и Phaser в качестве игрового движка.

Читать далее
Всего голосов 10: ↑10 и ↓0 +10
Просмотры 1.2K
Комментарии 0

Книга «React: современные шаблоны для разработки приложений 2-е издание»

Блог компании Издательский дом «Питер» Профессиональная литература ReactJS *
image Привет, Хаброжители! Хотите создавать эффективные приложения с помощью React? Тогда эта книга написана для вас. Познакомьтесь c лучшими практиками и шаблонами создания современного кода.

Вам не потребуются глубокие знания React или функционала JavaScript — достаточно знакомства с принципами работы JavaScript, CSS и HTML.

Алекс Бэнкс и Ева Порселло научат вас создавать пользовательские интерфейсы, которые будут динамически отображать изменения без необходимости перезагрузки страницы даже на крупномасштабных сайтах, работающих с огромными массивами данных.
Читать дальше →
Всего голосов 4: ↑4 и ↓0 +4
Просмотры 2K
Комментарии 3

Как и для чего мы сделали «Перчатку» — приложение для сотрудников «Перекрёстка» с элементами соцсети

Блог компании X5 Group Мессенджеры *SQL *MongoDB *ReactJS *

В рознице «Перекрёстка» работает порядка 30 тыс. сотрудников без закрепленного рабочего места и персонального компьютера. Чтобы они могли активнее участвовать в жизни компании и коммуницировать с коллегами, мы разработали «Перчатку». Это приложение с чатом и корпоративными сервисами: графиком смен и отпусков, информацией о выплатах и другими возможностями вроде ведения блогов и комментирования публикаций коллег.

 Инструментарий «Перчатки» также включает чат-бота «Василису», которая помогает новичкам влиться в коллектив: сопровождает в первые дни, находит корпоративные онлайн-курсы. Отличительной особенностью проекта являются элементы геймификации — за активность в «Перчатке» пользователи получают специальные баллы («клеверы»), на которые можно приобретать «сувенирку».

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

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

React 18: что нужно знать о новой версии

JavaScript *ReactJS *

В начале лета в официальном блоге React вышла новость о планах на 18 версию библиотеки. Команда разработчиков рассказала о новых фичах и API, которые планируется зарелизить в обновлении. Меня зовут Ильмир Шайхутдинов, я frontend разработчик Технократии, и в этой статье я хочу пробежаться по изменениям и познакомить вас с ними поближе. 

Читать далее
Всего голосов 10: ↑10 и ↓0 +10
Просмотры 6.2K
Комментарии 4

Как серверу на Django знать своих клиентов на React в лицо, практическое руководство

Веб-дизайн *Django *ReactJS *

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


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


main

Читать дальше →
Всего голосов 3: ↑3 и ↓0 +3
Просмотры 3.9K
Комментарии 4

Пользовательские хуки React: зачем нам нужен контекст

Блог компании OTUS JavaScript *Программирование *ReactJS *
Перевод

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

Правила для пользовательских React хуков довольно просты:

Пользовательский хук — это функция JavaScript, имя которой начинается с "use" и которая может вызывать другие хуки.

Читать далее
Всего голосов 12: ↑12 и ↓0 +12
Просмотры 5.1K
Комментарии 0

Как сконфигурировать NextJS сервер с полной поддержкой кэширования в Redis

JavaScript *Node.JS *ReactJS *
Tutorial

Шаг 1. Установка NextJS

yarn create next-app

Шаг 2. Установка пакетов:

yarn add express redis node-gzip

Шаг 3. Создаем в  корне проекта файл server.js

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

Создаем текстовый редактор на React.js

Блог компании KTS JavaScript *ReactJS *

Привет! Меня зовут Данила, и я фронтенд-разработчик в KTS.

Однажды в одном из своих проектов мне потребовалось реализовать кастомный текстовый редактор на React.js. Задача показалась мне довольно интересной, и я решил рассказать о своем опыте. В статье я поэтапно покажу, как можно создать текстовый редактор с базовыми функциями.

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

Читать далее
Всего голосов 17: ↑16 и ↓1 +15
Просмотры 8.7K
Комментарии 10

6 лучших практик React в 2021 году

Блог компании OTUS Программирование *ReactJS *
Перевод

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

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

Читать далее
Всего голосов 12: ↑6 и ↓6 0
Просмотры 5.5K
Комментарии 1

Перестроились в модульный монолит, а не в микросервисы

Блог компании Юнидата JavaScript *ReactJS *TypeScript *

Относительно недавно мы начали строить качественно новую версию платформы "Юнидата", в которой изменилось очень многое, включая архитектуру, технологии, подход. Даже основная идея продукта приросла новыми деталями.

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

Об авторе статьи. Меня зовут Илья, я занимаюсь разработкой новой версии. Мне не довелось работать с предыдущими версиями "Юнидата", и в проект я пришел на этапе прототипа. Я могу быть не до конца объективен на тему того, почему было выбрано то или иное решение, если это происходило еще до моего присоединения к продукту. В причинах перехода я написал свое видение, после общения с командой.

Итак, всем, кто любит истории переезда с ноткой технических особенностей, добро пожаловать под кат.

Краткий тех.обзор

Сейчас мы имеем модульный монолит и на бэке и на фронте. Они расположены в отельных репозиториях + есть еще один, который содержит настройки для запуска всего приложения в контейнерах.

Кроме того, продукт разделён на Community Edition (хранится в публичном гитлабе) и Enterprise Edition.

Фронтенд состоит из 20 модулей (число не конечное). Мы используем свежую версию typescript и почти свежую react (сейчас 16, но перевод на 17 - дело ближайшего времени). Применяем MVC подход в каждом модуле: реакт только view-слой, своя observable модель (обязательно про нее напишем отдельную статью), mobx сторы в качестве контроллеров.

Читать далее
Всего голосов 9: ↑9 и ↓0 +9
Просмотры 7K
Комментарии 2

Создаём одинаковое приложение 5 раз

Блог компании ITSOFT jQuery *Angular *ReactJS *VueJS *
Перевод

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

Вот видео с канала, в котором в 10 фреймворках создают todo-приложение:


Я решил, что не хочу тратить на это кучу времени, и в основном использовал статью как оправдание для изучения нескольких новых фреймворков, поэтому пять раз собрал одно и то же приложение. Я планирую создать простое приложение для добавления заметок, в котором пользователи могут писать текст и сохранять его как отдельные заметки. Некоторые из этих фреймворков я уже использовал для создания подобных приложений, а в других не делал ничего похожего, или даже не использовал их вообще, поэтому это будет чуть сложнее.
Читать дальше →
Всего голосов 12: ↑9 и ↓3 +6
Просмотры 7.2K
Комментарии 25

Это — новый Хабр

Habr ReactJS *TypeScript *


И снова привет — год назад я написал на Хабр о своём клиенте для этой площадки, который я разрабатывал в качестве проекта для оттачивания навыков программирования. Теперь мой Хабр посетило больше 30 тысяч человек, а я за прошедший год полностью обновил дизайн, прикрутил авторизацию, увеличил скорость приложения и оптимизировал клиент для разных viewport'ов.


Попробовать новый клиент можно по этой ссылке — habra.vercel.app, а если интересно, как я такую вещь сделал и что планируется сделать в будущем, то прошу под кат.

Читать дальше →
Всего голосов 148: ↑148 и ↓0 +148
Просмотры 37K
Комментарии 142

Моки без лишней мороки с mswjs+faker.js

Разработка веб-сайтов *JavaScript *ReactJS *
Из песочницы

Недавно я в очередной раз столкнулся с типичной проблемой: для создания нового функционала фронтенд и бэкенд нужно было реализовывать параллельно. Но как делать фронт, не имея 100% рабочих эндпойнтов на бэкенде? Сегодня я расскажу о том, какие подходы применял, и разберу их плюсы и минусы.

Читать далее
Всего голосов 6: ↑6 и ↓0 +6
Просмотры 2.6K
Комментарии 4

Устаревшие пропсы и дочерние зомби-компоненты в Redux

JavaScript *ReactJS *
Из песочницы
Перевод

Читая документацию по react-redux v7, вы могли обратить внимание на предупреждение о проблеме устаревших пропсов и дочерних зомби-компонентов. Этот раздел может показаться слегка запутанным, если читатель ещё не сталкивался с проблемой сам. Цель данной статьи — как следует разобраться с проблемой устаревших пропсов и её решением в react-redux.

Статья является переводом материала «Stale props and zombie children in Redux», впервые опубликованного в блоге Кай Хао, и, хотя автор скромно отзывается о себе как об исследователе-любителе и просит не считать себя экспертом, статья является одним из самых подробных материалов по теме. Кроме того, ссылка на оригинал уже включена в официальную документацию по react-redux.

Дисклеймер: статья предполагает, что читатель уже имел дело с React, Redux и react-redux. Мы не будем подробно останавливаться на описании API этих библиотек и оставим это дело официальной документации. Совершенно не обязательно читать это, чтобы использовать Redux, однако никогда не будет лишним разобраться как работают твои инструменты под капотом — не говоря о том, что это просто интересно.

Читать далее
Всего голосов 12: ↑12 и ↓0 +12
Просмотры 4.3K
Комментарии 15

На что стоит обратить внимание новичкам при работе с ReactJS

Блог компании Orion Innovation Разработка веб-сайтов *JavaScript *ReactJS *Карьера в IT-индустрии

Всем привет, меня зовут Иван, я – разработчик ПО в Orion Innovation. Сейчас много публикаций по фронтенд-разработке, в которых начинающему специалисту легко потеряться и упустить неочевидные вещи.

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

Читать далее
Всего голосов 8: ↑6 и ↓2 +4
Просмотры 12K
Комментарии 19

React Router Hooks: Изучение принципов их работы

Блог компании OTUS ReactJS *
Перевод

React Router — это не то же самое, что маршрутизатор, направляющий сетевые данные — к счастью! Однако между сетевым маршрутизатором и React Router есть много общего. React Router помогает нам направлять пользователей к нужному компоненту. Например, мы можем использовать маршрутизацию на стороне клиента для создания одностраничного приложения (SPA), которое позволяет перемещаться между различными страницами без обновления браузера.

Другими словами, React Router поддерживает синхронизацию пользовательского интерфейса с URL. Он имеет простой API с такими мощными функциями, как ленивая загрузка кода, динамическое сопоставление маршрутов и обработка перехода между локациями.

Но есть еще много интересного. В этой статье мы рассмотрим хуки React Router. Они позволяют разработчикам писать гораздо более чистый код, так как не нужно писать всю его шаблонную часть, как в компонентах класса. Из коробки мы можем получить доступ к нескольким хукам, таким как useHistory, useLocation, useParams и useRouteMatch. Например, хук useHistory дает нам доступ к объекту history для обработки изменений маршрута.

Читать далее
Всего голосов 4: ↑4 и ↓0 +4
Просмотры 2.9K
Комментарии 0

Блюр объектов в реальном времени на видео с помощью canvas

Работа с видео *JavaScript *Обработка изображений *Canvas *ReactJS *

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

Сегодня я хочу поделиться реализацией такого блюра/пикселизации видео (изображения) в вебе.

Читать далее
Всего голосов 10: ↑9 и ↓1 +8
Просмотры 2.7K
Комментарии 19

Планы React Native на второе полугодие 2021 года

JavaScript *Разработка под iOS *Разработка под Android *ReactJS *
Перевод

За последний год в нашем мире так много изменилось, и React Native не исключение. Мы приветствовали новых членов в нашей команде (с которыми мы очень рады встретиться лично!), наши проекты созрели, и появились новые возможности. Мы рады поделиться всем этим с вами в этой публикации!

В Facebook наша команда работает полугодиями. Каждое полугодие мы пересматриваем нашу стратегию, устанавливаем планы и делимся ими внутри компании. Сегодня мы хотим поделиться с вами, нашим комьюнити, нашими планами на второе полугодие 2021 года.

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

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

Memo в React

ReactJS *
Из песочницы
Перевод

Перед использованием memo попробуйте сначала два других подхода. И если их вам будет не хватить, то переходите к memo

Читать далее
Всего голосов 11: ↑11 и ↓0 +11
Просмотры 4.4K
Комментарии 6

Вклад авторов