ReactJS *

Данная статья продолжение статьи про мемоизацию, в которой мы разбирали зачем нужно использовать memo и как правильно с ним работать. В этой статье разберем, как правильно использовать useMemo и useCallback, какое у них api и разберем пару трюков. В прошлой статье я писал, что в следующей будет информация про useRef, useImperativeHandle и прочее, но в итоге решил, что текущий материал можно объяснить проще. Только трюки подведут нас к использованию useRef и уже в следующей лекции мы разберемся с ним.

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

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

Предисловие

Этот туториал предназначен в первую очередь для новичков в разработке на Frontity (React framework для WordPress).

Основная цель

Собрать в одном месте необходимую информацию для настройки авторизации для приватных эндпоинтов WordPress на примере получения коллекции меню.

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

С огромной гордостью, хочу анонсировать WebEngine - IDE и набор технологий для создания современных сайтов на React, а в дальнейшем Angular, Vue, тем для WordPress, приложений на Electron и многое другое.

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

Привет, друзья!

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

Веб состоит из технологий, появившихся более 25 лет назад. HTTP, HTML, CSS и JS были стандартизированы в середине 90-х (когда мне было 8 лет). С тех пор веб эволюционировал в вездесущую платформу приложений. Одновременно с эволюцией веба развивалась и архитектура разработки соответствующих приложений. Сегодня существует большое количество архитектур, которые можно использовать для разработки веб-приложений. В настоящее время самой популярной из них является "Одностраничное приложение" (Single Page App, SPA), но сейчас наблюдается переход к новой улучшенной архитектуре.

Делиться своими идеями с сообществом - хорошо и правильно. Это позволяет развиваться, перенимать лучшие практики, исследовать новые инструменты, учиться оформлять свои решения. Но какой код стоит выносить в общий доступ? И как делать это на постоянной основе? Чтобы разобраться в этих вопросах я решил сделать свой Javascript OpenSource Boilerplate - маленькую, но максимально расширяемую библиотеку компонентов. Она называется handy-ones.

Как часто рано или поздно при решении новой задачи приходит мысль: а нельзя ли для неё переиспользовать код из реализованной ранее аналогичной задачи? Думаю, что в такой момент нами движет что-то среднее между ленью и здравым смыслом. Ну не писать же всё с нуля? Далее появляется подлая мыслишка: а может, просто «скопипастить» и не заморачиваться?

25 октября команда Next проведёт презентацию, посвящённую новой, 13-ой версии. Данное обновление по традиции именуют крупнейшим. Оно может затронуть буквально всё — от очередных ускорений сборки до изменений в структуре приложения и новых абстракций.

Next.js — крупнейший фреймворк для разработки веб-приложений. Он был создан 6 лет назад, 25 октября 2016 года. За это время было выпущено 12 крупных релизов, делая веб всё быстрее и быстрее. Несмотря на громоздкость фреймворка, размеры каждого последующего релиза не становились меньше, хоть и замедлялись в темпах.

Три года назад команда Next.js впервые провела конференцию, посвящённую релизу и сделала её ежегодной. Исключением стала презентация 11-ой версии, которая прошла в июне 2021 года. В данной статье речь пойдёт о том, какой функционал был завершён в последних обновлениях и что может нас ждать на завтрашней конференции.

Nextjs — самый быстрорастущий фреймворк. После создания, в 2016 году, было выпущено уже 12 обновлений, каждое из которых называлось компанией “крупнейшим”. 25 октября Vercel (компания, владеющая Nextjs) представит новый, 13 релиз, который, конечно же, вновь станет “крупнейшим”. Тем не менее, в этой статье речь пойдёт не конкретно о нём, а о действительно новом для компании процессе.

В мае этого года Nextjs неожиданно выпустил в своём блоге RFC (request for comments). В нём речь идёт, в первую очередь, о новой абстракции — layouts, а также о множестве связанных изменений, нацеленных на ускорение, улучшение DX и стандартизацию путём создания новых конвенций. Это рабочее предложение однозначно заслуживает внимания в меру своей громоздкости для фреймворка и потому, что буквально описывает его будущий вид.

Впервые я познакомился с React в 2015 году и вот уже использую его можно сказать повседневно 7 лет. Бесчисленное количество компонентов было написано за это время, React из подающей надежды модной технологии вырос в серьезную библиотеку и по сути стал стандартом для написания веб приложений в 2022 году.

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

Скриншот официального сайта https://reactjs.org

Создадим приложение с использованием фреймворка Next.js, настроим облачные сервисы Amazon S3, Amazon CloudFront, AWS Lambda@Edge, развернем приложение и настроим маршрутизацию доменного имени.

Привет, друзья!

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

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

Я люблю сталкиваться с трудностями. Но с такими, которые можно решить, подумать над интересным решением, подобрать технологию. Люблю быть в потоке, а после решения чувствую себя настоящим профессионалом.

Но есть кое-что, из-за чего я не люблю программировать. Как ни странно, это тоже трудности, только другого рода. Например, когда, чтобы пофиксить баг, приходится разбираться с легаси-компонентом, который написан на классах на 300 строк кода. Разбираясь уже второй час, ловлю себя на мысли, что уже 10 минут просто смотрю в экран, а в голове «из-за угла» выглядывает мысль «Псс, парень, программирование — это не твое». Такие задачи не вызывают удовлетворения.

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

Привет, Хабр! Это моя первая публикация и хотелось бы начать с чего-то полезного для сообщества. С места в карьер… Я запилил расширение для VSCode, которое поможет автоматизировать создание файловой структуры компонентов.

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

Привет, друзья!

В этой статье я покажу вам, как начать разработку библиотеки компонентов с помощью Vite, React, TypeScript и Storybook.

Мы разработаем библиотеку, состоящую из одного простого компонента — кнопки, подготовим библиотеку к публикации в реестре npm, а также сгенерируем и визуализируем документацию для кнопки.

Репозиторий с кодом проекта.

Если вам это интересно, прошу под кат.

Всем привет!

Делимся полезными материалами с недавно прошедшего митапа Frontend Mix, где экперты ЮMoney и Альфа Банка рассказали, как они создают продукт. 

Я решил перевести документацию react-redux, позвал напарника, и мы вместе решали проблемы, связанные с этим. Собственно, о проблемах и решениях пойдёт речь.

Ссылка на перевод

Кратко: поговорили с авторами библиотеки, развернули перевод на github-pages, получили домен, получаем обновления через свой сервер и хотим внимания)

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

Так вот как то раз смотря документацию Relay я наткнулся на мысль, что не понимаю, как работает связка Relay.useLazyLoad и React.Suspense.

В частности не понятно, как именно React.Suspense понимает, что вот прямо сейчас происходит асинхронный запрос и самое время отрисовывать fallback?

В феврале 2022 года я наконец переехал в США по рабочей визе О1. Этому предшествовало 2.5 года работы над укреплением кейса, ожидание аппрува.

За 1.5 года до этой даты я начал готовиться к интервью на позицию Front End. Сейчас работаю Senior Front-End Engineer в Roku.

Мотивацией для данного поста и создания телеграмм канала по интервью Front-End инженеров стало отсутсвие подробной информации о том, как же выглядит этот процесс в США.