ReactJS *

localStorage для авторизации в React приложении.

Пишем drag-and-drop загрузчик файлов для React приложения с помощью Context, подхода Compound components и нескольких кастомных хуков

Прикручиваем react-dnd за 5 минут

Пишем систему валидации форм для React приложений

Современные технологии – это истинное благо для любого бизнеса. Но точно так же они могут стать самым настоящим проклятьем. Только представьте. Вы захотели создать собственное мобильное приложение. Идея уже есть, спонсоры найдены, и, казалось бы, выпускай себе приложение и покоряй им мир стандартными «Efficiency, Resilience and Innovation • Trust • Human-Centered approach • Passion • Excellence». Но в действительности все оказывается куда сложнее. Вы приходите к специалистам и не понимаете, кого слушать. Одни наперебой убеждают вас, что приложение стоит сделать на технологии React Native, а другие упорно доказывают, что нет лучшего решения, чем разработка на Swift/Kotlin. Звучит знакомо? Тогда эта статья точно вам поможет.

Как можно использовать github pages для своих fullstack pet проектов с бэкендом на статических файлах)

Данный гайд описывает один из возможных подходов к организации фичи темизации приложения.

Спустя какое-то время работы с front-end'ом я решил перейти в страшный лес, каким его всегда представляли всякие мемы - back-end. Конечно же я выбрал node.js и начал с express.js. Для меня было необычно, что не было инструмента (или же я плохо искал) для того, чтобы создавать корневую систему директорий самому. Я начал класть все в корень проекта и в этом и не было проблемы до момента, когда надо было расширять проект и начиналась путаница где лежит сервер, а где конфигурации для сервера, БД и т.д.

В силу новизны своих знаний я думал, что вся эта штука с src, config и public нужна конкретно для экосистемы отдельных технологий. В силу новизны своих знаний я думал. Я начал сам создавать директории, потом перешел на Nest.js и забыл про это. И вот я начал учить Golang, а там к тому же еще другая модель структуры проекта.

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

Статья о JWT-авторизации и создании приватных страничек сайта для авторизованных пользователей. Простым и понятным языком. Даже твой кот сможет написать эту фичу по этому туториалу :)

Последнее время из каждого утюга кричат по технологии будущего - что Chat GPT может писать код вместо программистов, а MidJourney создавать интерфейсы вместо дизайнеров. Мы полезли в Community фигмы, а там по запросу Figma to Code больше сотни плагинов, которые обещают сгенерировать чистый работающий код на основе ваших макетов и за пару кликов создать готовое web-приложение вместо ваших frontend-разработчиков. Все это звучит вдохновляюще, но так ли это на самом деле?

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

Компоненты React проявляют себя лучше всего, когда говорят: «Дайте мне данные, и я их нарисую». В этом сценарии мы будем практиковаться в отображении данных, о которых знает компонент. Данные ”отрисовывания” на веб-странице будут включать интерполяцию. Это просто означает получение значения переменной, преобразование его в строку и размещение его в HTML, чтобы веб-страница отобразила его.

Мы продолжаем рассказывать о разработке недавно вышедшего продукта.

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

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

Современные фреймворки для разработки веб-приложений породили за собой разработку библиотек для них. Одним из самых популярных представителей является React. 

React — библиотека JavaScript с открытым кодом для фронтенда веб-приложений. Данный фреймворк отличается компонентной моделью, которая позволяет сохранять состояние и генерировать новые элементы пользовательского интерфейса.

Мы собрали пул UI-библиотек для React-проектов.

И снова всем привет! Судя по реакциям и количеству закладок к переводу первой части книги Patterns.dev, этот материал оказался для вас полезен. Поэтому я решил поделиться переводом второй части.

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

Напомню, что авторы Patterns.dev:
Лидия Холли — штатный консультант и преподаватель по разработке программного обеспечения, которая в основном работает с JavaScript, React, Node, GraphQL. Она также занимается наставничеством и проводит личные тренинги.
Эдди Османи — технический менеджер, работающий над Google Chrome. Его команды работают над такими проектами, как Lighthouse, PageSpeed ​​Insights, Chrome User Experience Report и другими.

Материал книги будет полезен не только React‑разработчикам, но и всем, кто так или иначе интересуется или сталкивается с frontend‑разработкой. Это ознакомительная часть перевода учебника https://www.patterns.dev/. Перевод всей второй части учебника можно найти здесь.

P. S.: На данный момент выложено в виде pdf, в дальнейшем планируется полноценная публикация на github для удобства изучения.

P. P. S.: Вторая часть взята из книги: https://www.patterns.dev/, переведена на русский язык. Книга находится под лицензией CC BY-NC 4.0

Данный адаптированный материал распространяется на условиях лицензии Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)

Все мы не любим писать много однообразного кода и хотим писать больше интересного кода) Давайте рассмотрим очень удобный инструмент для работы с API - RTK Query.

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

Давайте посмотрим в чем преимущества и недостатки каждого из вида компонентов:

В этой статье я хотел бы рассказать как решил создать свой первый проект.

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

Но японский язык (также как и китайский и, частично, корейский) имеют довольно высокий входной барьер для чтения, потому что нужно не только выучить два алфавита, но и запомнить как минимум несколько сотен кандзи (300-500).

Когда я искал свою первую работу в качестве Frontend-разработчика, меня часто спрашивали, умею ли я писать кастомные хуки в React. Тогда я только начинал изучать React и только-только запомнил основы, такие как useState и useEffect. Слово «кастомный хук» для меня было новым и сложным. Но теперь, когда я уже более опытный разработчик, знаю, что это значит и как их использовать.

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

Всем привет! Один из проектов на работе у нас изначально создан на create-react-app утилите. Встал вопрос по поводу того, можно ли как-то оптимизировать сборку по скорости и весу сжатого проекта, так как есть большие планы на рост проекта и не хотелось бы, чтобы что-то начало тормозить, и этим соответственно я и занялся. Хочу рассказать о том, как все проходило, какие шаги были пройдены и что в итоге получилось. Также в конце приложу код всей конфигурации.

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

Хочется простой бэк для хранения данных, которые используются на фронтенде, но не хочется устанавливать зависимости Firebase. И еще хочется все это задеплоить на Vercel.

Появилось вот такое желание при разработке своего пет-проекта (без туториалов на ютубе и тд.).Стек: React, TypeScript, RTK. Первое что вспомнил — это JSON Plaseholder. Но у этого сервиса есть ограничение: вы не можете самостоятельно спроектировать API.