ReactJS *

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

А также между делом мы создадим мок API сервера с помощью JSON Server, будем использовать axios для вызова API и, наконец, воспользуемся хуком useReducer для управления состоянием.

Звучит интересно? Тогда давайте приступим.

Только что завершилась Конференция React.js. Долгожданная конференция спустя почти 3 года после предыдущей. Не менее долгожданны и обновления реакта. И именно с них была начата конференция, им и будет посвящена статья. И да, как вы увидели из превью — 19 версия перешла в статус release candidate. Полноценный же релиз нам обещают в течении двух недель.

В целом, мне как next.js разработчику большая часть была знакома. Десятки статей на хабре уже рассказали о практически каждой части этого обновления, частично их касался и я рассказывая об обновлениях внесённых в next.js.

Можно сказать, что главным направлениям этого обновления было достижение «Высокого UX при высоком DX». Максимальная производительность при максимально простом коде. И так, а теперь к самой конференции.

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

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

Hello world!

Представляю вашему вниманию третью и заключительную часть обновленного руководства по Next.js.

• Первая часть
• Вторая часть
• Руководство целиком

На мой взгляд, Next.js — это лучший на сегодняшний день инструмент для разработки веб-приложений.

Предполагается, что вы хорошо знаете JavaScript и React, а также хотя бы поверхностно знакомы с Node.js.

Обратите внимание: руководство актуально для Next.js версии 14.

При подготовке руководства я опирался в основном на официальную документацию, но в "отсебятине" мог и приврать (или просто очепятаться) 😁 При обнаружении подобного не стесняйтесь писать в личку 😉

Парочка полезных ссылок:

• Официальные примеры использования Next.js
• Классные туториалы по разработке веб-приложений с помощью Next.js

Привет, Хабр! Так вышло, что на текущем я попал под сокращение, а значит путь к собеседованиям открыт. Как раз вчера случилось одно (видимо, из многих), на котором зашла речь про useCallback.

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

В данной статье рассматриваются особенности, которые связаны с обработкой нативных событий (native events) в React-приложениях. Существует проблема частичной потери контекста функционального компонента при обработке нативных событий, которые навешиваются на элементы с помощью глобальных объектов document, window или через ссылки (refs). В статье рассматривается данная проблема и предлагается способ её решения (один из вариантов).

Hello world!

Представляю вашему вниманию вторую часть обновленного руководства по Next.js.

• Первая часть
• Третья часть
• Руководство целиком

На мой взгляд, Next.js — это лучший на сегодняшний день инструмент для разработки веб-приложений.

Предполагается, что вы хорошо знаете JavaScript и React, а также хотя бы поверхностно знакомы с Node.js.

Обратите внимание: руководство актуально для Next.js версии 14.

При подготовке руководства я опирался в основном на официальную документацию, но в "отсебятине" мог и приврать (или просто очепятаться) 😁 При обнаружении подобного не стесняйтесь писать в личку 😉

Парочка полезных ссылок:

• Официальные примеры использования Next.js
• Классные туториалы по разработке веб-приложений с помощью Next.js

Собираем кроссплатформенное (server-client, static-client, gh-pages, Android, iOS, macOS, Linux, Windows, Chrome extension, Docker, Kubernetes, ...) React приложение. В этой статье я почти не затрону Deep backend, только чуть-чуть в конце. Но рассмотрю Open Source шаблон/заготовку для сборки кроссплатформенных React приложений который мы используем в Deep.Foundation.

На прошлой неделе впервые поучаствовал в конференции по Frontend, где один из докладчиков, расказывал, как удачно его команда переехала с Redux на Mobx. Главным преимуществом он назвал отсутствие бойлерплейта и ускорение разработки в полтора раза.

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

Привет! Я frontend-разработчик в одной компании, занимающейся электронной коммерцией.

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

Представим, что у вас порядка 500-1000 доменов и 5-10 разных дизайнов сайтов, распределенных между этими доменами примерно так:

Если вбить слово «фронтенд» в поисковую строку, можно найти огромное количество курсов по данному направлению. Проблема в том, что все курсы являются платными и, как правило, имеют ценник в несколько десятков тысяч рублей. 

Чтобы разбавить засилие платных курсов, мы подготовили для вас программу обучения «Frontend-разработчик с нуля», которая состоит только из бесплатных материалов.

Приветствую Вас, дорогие читатели Хабр! В данной статье мы рассмотрим работы DOM на таких библиотеках JavaScript, как Vue, React, Angular. Материал поможет понять принцип работы, конечно, самый лучший способ разобраться в той или иной теме — это практика. В этой статье будут приведены несколько примеров для лучшего понимания материала.

Hello world!

Представляю вашему вниманию первую часть обновленного руководства по Next.js.

• Вторая часть
• Третья часть
• Руководство целиком

На мой взгляд, Next.js — это лучший на сегодняшний день инструмент для разработки веб-приложений.

Предполагается, что вы хорошо знаете JavaScript и React, а также хотя бы поверхностно знакомы с Node.js.

Обратите внимание: руководство актуально для Next.js версии 14.

При подготовке руководства я опирался в основном на официальную документацию, но в "отсебятине" мог и приврать (или просто очепятаться) 😁 При обнаружении подобного не стесняйтесь писать в личку 😉

Парочка полезных ссылок:

• Официальные примеры использования Next.js
• Классные туториалы по разработке веб-приложений с помощью Next.js

Как я создавал гибкий и настраиваемый компонент React для загрузки файлов с возможностью перетаскивания , и выложил на npm. Создана с использованием инструмента create-react-library, который позволяет быстро и легко создать новую библиотеку React.

Понимаем полностью useMemo и useCallback

Экскурсия по двум самым известным хукам в React

Если вы изо всех сил пытались разобраться в useMemo и useCallback, вы не одиноки! Я разговаривал со многими разработчиками React, которые cломали голову над этими двумя хуками.

Моя цель в этом здесь — прояснить всю эту путаницу. Мы узнаем, что они делают, почему они полезны и как получить от них максимальную пользу.

Погнали!

Convex - это платформа для создания бэкенда. В нее входит: Server Functions, ACID Database, Vector Search, Scheduling and crons, File Storage

Все в Convex работает в режиме реального времени. Также написаны удобные интерфейсы для работы с Convex на React

Не секрет, что я ❤️ React Query за то, как он упрощает взаимодействие с асинхронным состоянием в приложениях React. И я знаю, что многие коллеги-разработчики согласятся с этим.

Однако иногда я встречаю сообщения, в которых утверждается, что он вам не нужен для чего-то столь «простого», как получение данных с сервера.

Иногда в своё React-приложение нужно встроить сторонний компонент, который не работает с React и часто оказывается императивным.

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

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

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