Это руководство поможет вам разработать простое приложение на React и подключить его к серверу, созданному с использованием Node.js. Мы начнем с создания React приложения с помощью команды create-react-app, а затем настроим его подключение к серверу Node.js c помощью proxy.
Приветствую, уважаемые читатели! Сегодня я хочу поделиться своим опытом использования одной из самых популярных библиотек для создания форм на React - React Hook Form. Когда я только начинал использовать эту замечательную библиотеку, я совершил несколько ошибок, которые я надеюсь, вы сможете избежать.
Не так давно я столкнулся с проблемой, что при плохом интернете некоторые запросы к серверу идут так долго, что пользователь успевает перейти на другую страницу, пока запрос еще не завершился. И этот запрос с предыдущей страницы продолжает выполняться на новой странице.
Хотя такое возможно и при нормальной скорости интернета, но все же особенно неприятно это становится тогда, когда у пользователя медленный интернет и каждый лишний запрос еще больше замедляет работу вебсайта.
Что такое Framer Motion?
Framer Motion - это библиотека для react-приложений, которая дает возможность создавать анимированные jsx-компоненты.
Преимущество Framer Motion в том, что управление свойствами анимации происходит прямо в jsx-разметке. Кроме того, с его помощью можно писать компоненты-обертки, которые будут анимировать вложенные в них компоненты.
С помощью Framer Motion можно создавать целые кастомные библиотеки анимационных компонентов и применять соответствующий компонент для соответствующей анимации.
Библиотека бесплатная и легка в освоении для новичков, в то же время дает широкие возможности для создания сложных анимаций.
Как начать работу с Framer Motion?
Чтобы начать использовать Framer Motion в react-приложении, нужно установить Framer Motion в проект:
Всем привет! В данной статье я бы хотел рассказать о таком фреймворке как Cample.js.
На сегодняшний момент (версия 3.0.1), фреймворк является активно поддерживаемым в разработке нового функционала. Есть поддержка работы с данными, которые благодаря реактивности без виртуального DOM отображаются крайне быстро. Пример тестов.
Приветствую, товарищи разработчики!
Мы рады представить вам Webpod — фантастический новый инструмент, разработанный для упрощения процесса деплоя вашего веб-сайта. Webpod позволяет эффективно и быстро развернуть веб-сайт на сервере, позволяя больше сосредоточиться на проекте и меньше на настройке.
Новый синтаксис шаблонов, встроенное управление потоком данных и прощание с структурными директивами? В последние годы не так много менялось. Angular был стабильным для некоторых разработчиков и застойным для других. Теперь он движется вперед со сверхсветовой скоростью. Но куда именно он направляется?
Что описывается: Apollo-client — популярная библиотека для работы с GraphQL. Библиотека призвана ускорить разработку и оптимизировать приложение.
Задача статьи: Описать возможные решения и проблемы оптимизации приложения в части apollo-client.
Приветствую всех. Уже как неделю я переписываю свой проект, который был на Vue options api с использованием Quasar и перевожу его на Svelte-Sveltkit-DaisyUI. Скажу сразу, он мне очень понравился, особенно в если учитывать что Vue composition api стал больше похож на React, нежели чем на самого себя. Складывается впечатление что Svelte это то к чему должен был прийти Vue, но он пришел к реакту))) (ты должен был бороться...)
Итак, тот код, который я писал на вью(вуй в простонародье) 10 месяцев на свелт был написан за 9 дней, и то успел добавить дополнительные функции. Кое-что еще не реализовано, но это легкая часть, которая займет дня 3-4, не больше. Затем привязка к бэкенду и тестирование и через 2-3 недели все должно быть в целом готово. Справедливости ради стоит отметить что не все время из этих 10 месяцев было использовано на написание кода. Половина времени было потрачено на безрезультатные попытки(пытки) написать бэкенд самому. Прыгал с одной технологии на другую, но в основном пытался(пытал себя) написать на фшарп. Ничего не вышло, перешел на ноду-экспресс. Кое-что вышло, но в процессе написания понял что бэк не мое. Один бэкендер говорил что работа бэкендера это как 8 часов решать "судоку" на работе, а в остальное время решать судоку для отдыха. Полностью с этим согласен. Главное что вовремя осознал свою неспособность писать бэкенд, а заодно и нелюбовь решать судоку. Хотя когда был в школе любил, вероятно и бэк в то время зашел бы, но не факт. Отныне, если когда-нибудь я буду писать бэк для чего-то, то буду использовать лишь готовые вещи вроде strapi или directus.
Новый View Transitions API, что можно перевести как "интерфейс переходов отображения", предлагает легкий способ анимирования перехода между двумя состояниями DOM — даже между загрузками страниц. Это прогрессивное улучшение, которое можно реализовать уже сегодня.
Если вы, как и я, заинтересовались микрофронтами и пробуете развернуть проект на Nx, то возможно, у вас встанет вопрос, как в итоге объединить несколько своих микрофронтов в общий проект. По крайней мере, те статьи, которые я находил по этой теме, рассказывали про то, как создать в Nx несколько проектов (в т.ч. на разных фреймворках), как создать к ним компоненты и либы, и на этом всё заканчивалось. Разобравшись, решил оставить инструкцию для других.
Я разрабатываю роботов и меня часто спрашивают — «как сделать робота», «где ты находишь информацию, какие ресурсы используешь»?
Если вы не знаете с чего начать и хотите сделать собственного робота — эта статья для вас — в ней я постараюсь объяснить процесс, а также расскажу какие должны быть первые шаги.
Привет! Представляю вашему вниманию перевод статьи Matt Pocock.
Источник
TypeScript 5.2 представит новое ключевое слово - 'using', которое можно использовать, чтобы избавиться от чего угодно с помощью функции Symbol.dispose, при покидании области видимости.
Что такое react-контекст?
React Context API - это интерфейс, который позволяет сохранять некоторую величину (переменную или объект), и использовать ее между несколькими компонентами. Под самим же контекстным стором, или как его просто называют - контекстом, понимают эту сохраненную величину.
Интерфейс react-контекста состоит из метода createContext, компонента Context.Provider и хука useContext.
С их помощью вы можете создать контекст, а затем обернуть компоненты в провайдер от этого контекста. Компоненты обернутые в провайдер совместно будут иметь доступ на чтение и изменение контекста.
Для чего использовать контекст?
Библиотеки UI компонент популярны и удобны в некоторых случаях, но у них тоже есть обратные стороны. Одно дело, когда делаешь админку и используешь десятки компонент, другое - когда тебе надо всего пару компонент.
Было проведено исследование - взяты три HTML элемента: Button, Input и Select, и проверено, насколько увеличатся js и css бандлы если использовать для них одну из 10 распространенных UI библиотек для Vue 3.
Привет! Меня зовут Наташа, я фронтенд-разработчик в отделе рекламных спецпроектов KTS.
В отделе рекламных спецпроектов мы делаем множество сервисов в мини-приложениях VK, Одноклассниках, Телеграме, создаём лендинги.
Мы делаем как краткосрочные проекты, которые могут длиться 2 недели, так и долгосрочные — сроком работы от года. Изначально я написала этот материал для внутреннего использования, чтобы разработчик на каждом этапе разработки приложения знал, на что обратить внимание.
Эта статья — подсказка, которая помогает не пропустить важные моменты, если ваша команда разрабатывает, тестирует и выпускает проекты на потоке — то есть много и часто. Возможно, эти советы пригодятся и вам.
Нередко в проектах необходимо заводить переменные окружения (environment variables). Существует много способов сделать это. Например, указать переменную "inline", как MY_VAR="my value" node index.js или обозначить источник командой source. Некоторые фреймворки имеют даже целые отдельные пакеты для формирования переменных окружения (прим. nest.js). Но чаще всего за годы работы в сфере фронтенд-разработки мне приходилось работать со способом с содержанием .env файлов в проекте, которые имеют простейший синтаксис вида KEY=VALUE.
Проблема в том, что использование env-переменных не гарантирует нам наличие значения и не дает понимание о его типе данных.
В данной статье я хочу познакомить вас с тем, как осуществляется кодирование данных в транзакции в соответствии с Contract ABI Specification. Мы вручную разберём весь процесс кодирования, создадим контракт и произведём вызов его методов. В конце я покажу как при помощи Contract ABI создать объект-оболочку через web3.js, и через него вызывать методы контракта.
Всем Привет! Хочу поделиться своим опытом работы с огромным и непонятным legacy кодом на фронте. Я не специалист в работе с чистым JS и возможно мой подход был совсем не верным, поэтому просьба оставлять аргументированные комментарии, буду очень благодарен.
Наш проект написан на шаблонах PHP Yii2, на фронте всеми ~~не~~ любимый jQury.
Веб-потоки (web streams) предоставляют основанный на веб-стандартах способ асинхронной потоковой передачи данных по сети. Они позволяют разработчикам обрабатывать большие наборы данных по чанкам (chunks — части, куски), контролировать перегрузку сети (обратное давление — backpressure) и создавать высокоэффективные и отзывчивые приложения.
Использование веб-потоков может повысить производительность и отзывчивость приложения. Обработка данных по мере их поступления позволяет применять обновления и реагировать на взаимодействия пользователя в реальном времени, обеспечивая бесшовный пользовательский опыт за счет быстрой загрузки данных, предоставления актуальной информации и плавного, более интерактивного интерфейса.
Web Streams API постепенно становится краеугольным камнем основных веб-платформ, включая браузеры, Node.js и Deno. В этой статье мы рассмотрим, что такое веб-потоки, как они работают, их преимущества, а также инструменты, созданные на их основе.
