React
-
Как создать многоразовый компонент слушателя клавиатурных сочетаний в React
Если вы, как и я, обожаете яркие сокращения, вы знаете, насколько удовлетворительно нажать несколько клавиш и наблюдать, как волшебство происходит. Будь то привычное Ctrl+C – Ctrl+V, которое разработчики используют для “одолжения кода” 😉 из LLM и кодовых страниц, или персонализированные ярлыки, которые мы настраиваем в наших любимых инструментах, клавиатурные ярлыки экономят время и заставляют нас чувствовать себя компьютерными волшебниками. Ну, не бойтесь! Я разгадал код создания компонентов, которые запускают и реагируют на клавиатурные ярлыки. В этой статье я научу вас…
-
Как создать и отправить шаблоны электронных писем с использованием React Email и Resend в Next.js
Современные программные приложения часто полагаются на электронную почту для взаимодействия с пользователями. Они могут отправлять коды аутентификации во время попыток входа, маркетинговые письма или новостные бюллетени, например. Это означает, что электронные уведомления обычно являются наиболее распространенным средством коммуникации с пользователями. В этом учебном пособии вы узнаете, как создавать потрясающие шаблоны электронных писем с помощью React Email и отправлять их с помощью Resend – простой и мощной платформы для отправки электронной почты через API. Предварительные требования Чтобы получить максимальную пользу от…
-
Как создать многоязычные приложения с помощью i18n в React
Недавно я работал над увлекательным проектом, который включал создание веб-сайта с возможностью переключения языков для привлечения более широкой аудитории. Это позволило мне лучше понять концепцию “локализации”, которая обычно подразумевает адаптацию контента, чтобы он был актуальным, доступным и понятным для пользователей на разных языках и в различных регионах. Локализация не только о переводе слов, это создание опыта, который заставляет пользователей чувствовать себя как дома, независимо от их языка. Например, глобальные платформы, такие как Amazon, делают переключение языков настолько плавным, что это…
-
Изучайте React у Боба Зиролла
Изучение React может показаться сложным сначала, особенно когда вы не уверены, с чего начать, или оказываетесь перед пустым редактором кода. Но правильный курс поможет вам понять основные концепции и приобрести практический опыт, создавая проекты реального мира. Мы только что опубликовали курс на канале freeCodeCamp.org на YouTube, который научит вас современному React самым увлекательным и практичным способом. Созданный Бобом Зироллом из Scrimba, этот курс наполнен более чем 170 задачами по кодированию и шестью захватывающими проектами. В конце концов у вас будут…
-
Как создать игру на карточках для запоминания с помощью React
Недавно, когда я наблюдала за тем, как моя дочка 🧒🏻 играет в бесплатные игры на память на своем планшете, я заметила, что она борется с огромным количеством рекламы и надоедливых всплывающих баннеров. Это вдохновило меня создать для нее похожую игру. Поскольку сейчас она увлечена аниме, я решила создать игру, используя милые аниме-стилизованные изображения. В этой статье я расскажу вам о процессе создания игры для вас или ваших детей 🎮. Мы начнем с изучения особенностей игры, затем рассмотрим стек технологий и…
-
Построение и развертывание приложения HR с использованием Refine
Введение В этом руководстве мы создадим приложение управления кадрами с помощью Refine Framework и развернем его на платформе DigitalOcean App Platform. По завершении этого руководства у нас будет приложение управления кадрами, включающее: Страницу входа: Позволяет пользователям войти как менеджерам, так и сотрудникам. Менеджеры имеют доступ к страницам Отгул и Запросы, в то время как сотрудники имеют доступ только к странице Отгул. Страницы отгула: Позволяет сотрудникам запрашивать, просматривать и отменять свой отгул. Также менеджеры могут назначать новые отгулы. Страница запросов: Доступна…
-
Как создать CRUD-приложение с использованием React и Convex
Операции CRUD являются основой каждой приложения, поэтому важно стать профессионалом в их освоении при изучении новых технологий. В этой учебнике вы узнаете, как создать приложение CRUD с использованием React и Convex. Мы покроем эти операции, создавая проект под названием “Коллекции книг”. В этом проекте пользователи смогут добавлять книги и обновлять их статус после того, как они прочитают книгу. Contents Что такое Convex? Как установить ваш проект Как создать схему Как создать UI Как создать CRUD функции Стилизация Резюме Что такое…
-
Как передавать дополнительные аргументы в серверные действия Next.js?
Асинхронные изменения данных и их обработка являются необходимыми задачами в современных веб-приложениях. Вы можете захотеть выполнять самостоятельную асинхронную функцию на сервере для выполнения таких задач, как сохранение данных в базе данных, отправка电子邮件, загрузка PDF-файлов, обработка изображений и т. д. Next.js обеспечивает нам инструмент Server Actions, который является асинхронной функцией, выполняемой на сервере. Мы можем использовать серверные действия для мутаций данных на сервере, но серверные действия могут вызываться из обеих частей — серверных и клиентских компонентов. Серверные действия — это отличный…
-
Как использовать RxStomp с React – Build Chat App с STOMP и React
STOMP – это удивительно простая, но мощная протокол для отправки сообщений, реализованный популярными серверами, такими как RabbitMQ, ActiveMQ и Apollo. Utilizando STOMP через WebSocket, вы используете простой протокол, что делает его популярным выбором для отправки сообщений из веб-браузера, поскольку протоколы, такие как AMQP, ограничены браузерами, которые не допускают TCP-соединения. Для использования STOMP через WebSocket вы можете использовать @stomp/stompjs, но он имеет сложные вызовыallback и сложную API, которая соответствует специфическим сценариям использования. К счастью, также существует менее известный @stompjs/rx-stomp, который предоставляет…