ReactJS *

Что такое react-контекст?

React Context API - это интерфейс, который позволяет сохранять некоторую величину (переменную или объект), и использовать ее между несколькими компонентами. Под самим же контекстным стором, или как его просто называют - контекстом, понимают эту сохраненную величину.

Интерфейс react-контекста состоит из метода createContext, компонента Context.Provider и хука useContext. 

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

Для чего использовать контекст?

Привет! Меня зовут Наташа, я фронтенд-разработчик в отделе рекламных спецпроектов KTS.

В отделе рекламных спецпроектов мы делаем множество сервисов в мини-приложениях VK, Одноклассниках, Телеграме, создаём лендинги.

Мы делаем как краткосрочные проекты, которые могут длиться 2 недели, так и долгосрочные — сроком работы от года. Изначально я написала этот материал для внутреннего использования, чтобы разработчик на каждом этапе разработки приложения знал, на что обратить внимание. 

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

Перевод данной статьи был выполнен с оригинального источника, автор — Tanveer Singh.

Управление состоянием является одной из самых больших проблем при использовании фреймворка React. Это касается не только пользователей. Разработчикам нужен простой и масштабируемый процесс управления состоянием для проектирования эффективных и сложных пользовательских интерфейсов.

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

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

Нередко в проектах необходимо заводить переменные окружения (environment variables). Существует много способов сделать это. Например, указать переменную "inline", как MY_VAR="my value" node index.js или обозначить источник командой source. Некоторые фреймворки имеют даже целые отдельные пакеты для формирования переменных окружения (прим. nest.js). Но чаще всего за годы работы в сфере фронтенд-разработки мне приходилось работать со способом с содержанием .env файлов в проекте, которые имеют простейший синтаксис вида KEY=VALUE.

Проблема в том, что использование env-переменных не гарантирует нам наличие значения и не дает понимание о его типе данных.

В этой статье вы узнаете как с помощью react можно сделать input с двигающимся суффиксом, который идет сразу после значения ввода

Как крутить 2 сервера с белыми IP одного компа, и попутно разрабатывать Telegram Web Apps  на Bot API 6.7. Фронт + бэк на примере веб приложения внутри телеграм React + Fast-api.

Что такое дебаунсер?

Дебаунсер - это функция-обертка, которая ограничивает число выполнений переданной в нее функции, некоторым промежутком времени.

Практическое применение

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

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

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

Всем привет! Меня зовут Анастасия Щедрина, я технический лидер по фронтенду проекта размещения объявлений в компании Домклик. Сегодня я расскажу вам немного о том, как устроены правила в ESLint, и покажу на примере, как можно разработать собственные.

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

Рады поделиться: выложили нашу разработку Maskito в открытый доступ, и совсем недавно произошел релиз ее первой мажорной версии. Maskito — коллекция библиотек, упрощающих маскирование текстовых полей, с удобным и гибким публичным API.

Maskito содержит разные библиотеки: основная написана на TypeScript без зависимостей, есть опциональный пакет с набором готовых конфигурируемых масок, а еще есть библиотеки для удобного использования Maskito в проектах на React, Angular или Vue. Рассказываю обо всем подробнее.

Как оказалось, выбор версии ES для сборки веб приложения, а так же организация самой этой сборки, может оказаться весьма сложной задачей. Задачей, включающей в себя много разнообразных вопросов.

В статье вы увидите бенчмарк производительности EcmaScript фич; узнаете какой из компиляторов генерирует самый производительный JavaScript код; а также можно ли добиться прироста производительности, начав собирать сайт в более поздней версии ES.

В этом техническом "глубоком погружении" (deep dive) мы с нуля реализуем очень простую версию серверных компонентов React.

Данный туториал будет состоять из трех частей (написана пока только эта).

Руководства, шпаргалки, вопросы и другие материалы по JavaScript, TypeScript, React, Next.js, Node.js, Express, Prisma, GraphQL, Docker и другим технологиям, связанным с разработкой веб-приложений.

Сегодня мы перепишем на $mol эту демку почти пиксель в пиксель и напишем несколько тестов.

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

Изначально она была реализована на эффекторе + react, недавно несколько человек реализовали ее на реатоме + react исходники, на vue исходники и две независимых версии на моле: первая и моя о ней пойдет речь.

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

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

Меня зовут Артём Кияшко, я руковожу группой аналитиков в крупной ИТ-компании. В этой статье расскажу о том, как мы разработали и внедрили сервис расчёта стоимости доставки. 

В МойОфис мы создаем продукты для совместной работы и делового общения. В том числе стремимся делать так, чтобы доступ к корпоративной коммуникации был максимально удобным для пользователя. Большинство наших решений — от редакторов документов и почтовых систем до цифрового рабочего пространства Squadus — представлены, помимо десктопа и веба, на основных мобильных платформах.

iOS- и Android-приложения Squadus мы разрабатываем с помощью кроссплатформенного фреймворка React Native. И сегодня расскажем о том, какое значение в iOS-разработке имеет CocoaPods — мощный инструмент управления нативными iOS-зависимостями, который позволяет упростить управление вашим проектом.

Под катом разбираем основы работы с CocoaPods, а также пример его использования в проекте для исправления ошибки.

Когда вы пишете просто на React - то используете Redux store как глобальное хранилище - ничего сложного.

Но когда начинаете задумываться о том, чтобы использовать Server-side Rendering - то по началу может возникать некоторая путаница с непривычки.

В React - результаты запросов сохраняем в Redux store - и уже на основании этих данных рендерится страница - всё понятно.

В Next.js же - страница отрендерилась на сервере - и пришла уже в виде html и css. Внимание вопрос: как тогда использовать Redux - если код страницы нам уже пришёл? И для чего вообще в таком случае нужен Redux при использовании Next?

Работает это примерно так: страница рендерится на сервере. Когда пользователь заходит на сайт - он скачивает эту страницу с сервера. На этом этапе серверный рендеринг закончился. Пользователь получил страницу в базовом виде - таком, как её видит весь интернет и роботы поисковиков. В этот момент в Redux store - хранятся исключительно те значения, какие там были при инициализации.

Если после этого сделать запрос к серверу и изменить значения в store - они там сохранятся. И если все ссылки для переходов по страницам сайта были обёрнуты в тег <Link></Link> - то при переходе по ним приложение будет вести себя в плане Redux - как SPA - всё, что загружено в Redux store - останется без изменений.

Например, переходим на главную страницу сайта. Получили эту страницу отрендереной с сервера. После чего залогинились - и информацию о пользователе (например, его имя) - сохранили в Redux. Тогда когда начнёте переходить на другие страницы сайта - его имя уже будет храниться в store и не придётся его каждый раз заново запрашивать.

Современная ситуация с разработкой веб-приложений

NPM библиотека для интернационализации и локализации i18n очень популярна, однако за последние годы она сильно располнела. В ней много возможностей для локализации дат, чисел, установки нужных склонений, поддержки RTL языков, загрузки локалей с сервера и кучи еще чего. На сайте i18next она называется уже даже "интернационализационным фреймворком".

В то же время часто для локализации сайта нужны очень простые вещи, занимающие всего пару процентов от всего функционала тяжеловеса i18n. Ниже будет описана несложная процедура избавления от i18next-ной зависимости в данном случае.