Привет, в переводе данного руководства вы сможете узнать как поместить ваше приложение в докер.
Докер – это открытая платформа для разработки, запуска и управления контейнерами на сервере и в облаке.
Для примера приложения в этом руководстве мы будем использовать Next.js.
Распространенная проблема: создается какой-нибудь “универсальный” компонент, и вдруг в него нужно добавить что-то, что совершенно не влезает в текущую реализацию. Проще написать новый. Именно так и случилось, когда мы рисовали графики на React с использованием библиотеки D3.
В этой статье:
? Типичные технические и бизнес-требования к графикам
? Различные способы передачи данных в React компонентах. От решения "в лоб" до постепенного улучшения
В первую очередь React это JS библиотека, а не полноценный фреймворк, так что для создания полноценного веб приложения тебе нужно знать много дополнительных вещей, чтобы использовать их вместе с React. В этой статье пойдет речь о React концептах, хуках и, конечно 😊 , хороших практиках.
Эта статья — перевод основных изменений версии реакта 18.0.0.
Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.
В этом руководстве вы пройдете через процесс создания и публикации собственной библиотеки компонентов React и размещения ее на Github.
От переводчика: в статье автор демонстрирует как создать библиотеку с React компонентом внутри, подготовить её к публикации с помощью Rollup, опубликовать через npm, настроить StoryBook, настроить тестирование с использованием React Testing Library и Jest. В оригинальной статье есть ссылка на видеоверсию текущего урока.
Мы делаем Discord доступным для каждого. В 2020 году мы многое сделали, чтобы значительно улучшить ассебилити в приложении. Остаётся ещё много работы, но мы уже сейчас можем рассказать об одном из наших последних проектов - Навигация по клавиатуре.
Далее по катом.
«Почему бы не сделать одну сетку и работать с ней?», — подумал Senior Frontend Developer @manmo и внедрил идею стандартизированных резиновых эластичных сеток в департамент Frontend-разработки компании.
Рассказываем, как это решение облегчило работу верстальщиков и сэкономило время на проектах.
Материал предназначен для дизайнеров и frontend-разработчиков. Дизайнеры поймут, как минимизировать количество работы для верстальщиков, и тем самым получить их одобрение. Верстальщики научатся экономить свои ресурсы, силы и мозги, чтоб потратить их на более полезные задачи, чем расчёт непонятных сеток.
В нашем последнем посте мы поделились пошаговыми инструкциями по обновлению вашего приложения до React 18. В текущем посте мы дадим обзор того, что нового появилось в React 18, и что это означает для будущего.
Наша последняя основная версия включает в себя такие улучшения, как автоматическое пакетирование, новые API, такие как startTransition, и потоковый серверный рендеринг с поддержкой Suspense.
Многие функции в React 18 построены на основе нашего нового конкурентного рендеринга - закулисного изменения, которое открывает новые мощные возможности. Concurrent React является опциональным - он включается только при использовании concurrent функционала - но мы считаем, что он окажет большое влияние на то, как люди создают приложения.
Мы потратили годы на исследование и разработку поддержки конкурентности в React, и мы позаботились о том, чтобы обеспечить постепенное внедрение для существующих пользователей. Прошлым летом мы создали рабочую группу React 18, чтобы собрать отзывы экспертов сообщества и обеспечить плавное обновление для всей экосистемы React.
Эта статья является продолжением статьи Тёмная тема в React с использованием css переменных в scss. Если в прошлый раз мы добавляли темную тему через родной реактовский контекст, то сейчас мы попробуем сделать всё то же самое, но с помощью Redux, точнее redux-toolkit
Разрабатывая продукт, в какой-то момент задумываешься о поддержке языков. И, казалось бы, что могло пойти не так?
Привет! Это третья и заключительная часть серии статей “Лучшие подходы и решения для уменьшения кода на React” автора Rahul Sharma. Предыдущие статьи вы можете найти по ссылкам ниже:
В данной части вы получите несколько советов, как сделать Ваш код более универсальным. Узнаете немного о защите данных вашего приложения. Также, вы найдете расширения для VSCode, которые помогут Вам в разработке. И ещё много всего полезного и интересного.
Привет. Это перевод второй статьи из серии “Лучшие подходы и решения для уменьшения кода на React” автора Rahul Sharma.
В данной части в основном советы, которые подойдут начинающим разработчикам. Но и опытный разработчик сможет найти для себя что-то полезное, или, как минимум, закрепит уже известную информацию.
Всего в данной серии 3 статьи, и найти их все вы можете по ссылкам ниже:
Доброго времени суток! В данной серии статей вы узнаете подходы, которые помогут Вам писать более красивый React код, а также познакомитесь с способами сделать части кода более универсальными.
Всего в данной серии 3 статьи:
Лучшие подходы и решения для уменьшения кода на React. Часть 1
Лучшие подходы и решения для уменьшения кода на React. Часть 2
Лучшие подходы и решения для уменьшения кода на React. Часть 3
Привет, друзья!
В этой статье я продолжаю (и заканчиваю) делиться с вами заметками о Docker.
Заметки состоят из 4 частей: 2 теоретических и 2 практических.
Если быть более конкретным:
Docker, Docker CLI и Dockerfile;Docker Compose;В этой заключительной части мы "контейнеризуем" наше приложение.
Репозиторий с кодом приложения.
Если вам это интересно, прошу под кат.
Добрый день, меня зовут Николай! Я один из разработчиков новой библиотеки formMOD.
Как много времени вы тратите на создание сложных форм из проекта в проект?
Думаю этот вопрос актуален для многих разработчиков React.
Библиотека formMOD создана чтобы сократить время разработки форм, а так же для их универсальности и гибкости.
На момент написания статьи это полностью готовый проект, с документацией и система уже используется в приложениях.
Я постараюсь описать все возможности библиотеки максимально кратко. Все примеры и подробное описание есть в документации.
Привет, Хабр! Меня зовут Паша, и я руковожу frontend-направлением в ЕВРАЗе. В рамках цифровой трансформации компании моя команда разрабатывает огромное количество интерфейсов. Только с 2019 года их число превысило 20, и у каждого свой уникальный UX/UI. Несмотря на все разнообразие, проекты являются частью общей дизайн-системы, где повторяются те или иные элементы.
Но отдельные задачи требуют особого подхода, что приводит к локальным изменениям по стилям компонентов. И вот тут мы столкнулись с некоторыми проблемами, разрешив которые, получили идеальный UI Kit.
Темная тема стала стандартом де-факто. Ее отсутствие может стать причиной отказа от пользования сайтом. Особенно если на него заходят программисты, которые сплошь и рядом работают в тёмной теме.
Я покажу, как можно просто добавить темную тему в React проект. Разберем основные моменты и сделаем всё красиво. Для тех, кто хочет все сразу:
• Демо
Сегодня я хочу вам представить относительно новую библиотеку для управления глобальным состоянием приложения – Recoil JS. Как и React является open-source проектом при поддержке разработчиков из Meta. Пока что является экспериментальной, на момент написании статьи имеет версию 0.4.1.
Recoil располагает себя как библиотека исключительно для React, что поможет решать проблемы в диапазоне данного фреймворка, плюс ко всему разработчики, занимающиеся Recoil и React, из одной компании.
PureComponent, memo, useCallback и прочих возможностях, которые нам предоставляют создатели библиотеки для оптимизации наших приложений. Разработчики React уже позаботились о том, чтобы обновление DOM было предсказуемым и производительным: преобразования деревьев React-элементов выполняются максимально эффективно с помощью алгоритма согласования (reconciliation). Однако при большом количестве компонентов, глубокой вложенности или неправильной архитектуре количество отрисовок или вызовов функций может заметно увеличиться. Для оптимизации использования ресурсов мы применяем различные приёмы, позволяющие нам, к примеру, избавиться от лишних отрисовок с одинаковыми входными значениями props.
Для того чтобы получить полезный трафик не обязательно платить за размещение рекламных постов и баннеров на сторонних площадках и тратить на это значительную часть своего рекламного бюджета. Уже давно вошли в моду системы лояльности, которые позволяют финансово вознаграждать своих пользователей за активность в приложении. Это своего рода внутренний арбитраж трафика: мы закупаем активность своих же пользователей в обход посредников. Чтобы это реализовать потребуется несколько часов свободного времени и капелька желания.