Всем привет!
Меня зовут Лихопой Кирилл и я - фронтенд-разработчик в компании Idaproject.
В этой серии статей я рассказываю об основах TypeScript, его преимуществах и фишках.
Сегодня мы поговорим про объекты, массивы и функции, а также затронем еще пару тем, полезных для веб-разработки. Если вы пропустили первую часть, то советую ознакомиться: Изучение TypeScript — Полное руководство для начинающих. Часть 1 — введение и примитивные типы данных. Итак, начнем.
Vitest — это новая среда тестирования на базе Vite. Он все еще находится в разработке, и некоторые функции могут быть еще не готовы, но это хорошая альтернатива, которую можно попробовать и изучить.
30 марта 2022 года команда инженеров Meta анонсировали новую версию React Native 0.68. Помимо различных минорных улучшений и фиксов эта версия содержит историческое для платформы изменение, впервые мы можем попробовать в своих приложениях так называемую новую архитектуру. Давайте вместе разберемся что это за новая архитектура и почему к ней шли без малого 4 года.
Всем привет. Меня зовут Лихопой Кирилл и я - Frontend-разработчик в компании Idaproject.
Представляю вашему вниманию cвою первую статью на Хабре, a точне перевод англоязычной статьи, на тему изучения TypeScript (TS, Тайпскрипт).
В этой статье используется базовая компоновка с родительским и дочерними компонентами для демонстрации внутренних процессов архитектуры Fiber, на которую опирается React для передачи пропсов в дочерние компоненты.
Случалось ли вам, выполняя какую-то задачу, понять, что самый простой путь — нажать Сtrl+C, Сtrl+V: перетащить из соседней папочки пару файлов, поменять пару строчек, и будет ок? Повторялось ли это ощущение? Я хочу рассказать о том, как боролся с этой проблемой и к чему пришёл вместе с командой. Назовём это решение «универсальные компоненты» (если у кого-то будет более удачное название для концепции, жду в коментариях). Примеры буду приводить в основном на React, но концепции будут общие. 
Погрузитесь глубоко в новую архитектуру React под названием Fiber и узнайте о двух основных фазах нового алгоритма согласования (reconciliation). Мы подробно рассмотрим, как React обновляет состояние и пропсы и обрабатывает дочерние элементы.
Вы когда-нибудь задумывались о селекторе CSS, где вы проверяете, существует ли конкретный элемент внутри родителя? Например, если у компонента карты есть миниатюра, нам нужно добавить к нему display: flex. Это было невозможно в CSS, но теперь у нас будет новый селектор CSS :has, который поможет нам выбрать родителя определенного элемента и многое другое.
В этой статье я объясню проблему, которую решает :has, как он работает, где и как мы можем его использовать с некоторыми вариантами использования и примерами, и, самое главное, как мы можем использовать его уже сегодня.
Кто бы что не говорил о метриках производительности, мол это все ерунда и никому кроме гугла не нужно. Но, во-первых, я так не считаю, а во вторых у нас есть заказчики, которым это важно
и они задачи по оптимизации производительности нам ставят, и, даже если по Вашему высокопрофессиональному мнению они заблуждаются, то делать их надо.
Не буду пересказывать рекламные лозунги про 500% пользователей покидают страницу после 100мс ожидания, увелечения конверсии на 20% при снижении LCP на 2мс… читайте сами. Скажу коротко: метрики производительности важны.
Казанская IT-компания объявила набор стажёров, которым предстоит заниматься сборкой интерактивных фильмов. Работать нужно будет удалённо, так что рассматриваются кандидаты со всей России и других стран. Основное требование - знание одного из языков: Kotlin, Android SDK / Swift, iOS SDK, UIKit / JavaScript, React. Рассматривают студентов и выпускников IT-направлений, которые находятся в поисках интересного опыта.
Почитать подробности и подать заявку до 21 апреля можно здесь: hr.movika.com
Movika разрабатывает IT-решения для интерактивного видео: инструменты для его создания, просмотра, монетизации и экспорта. Цель компании - сделать так, чтобы формат интерактивного контента становился повсеместным и популярным.
За последние несколько лет управление состоянием в React претерпело значительные изменения. Многие перешли с Flux на Redux и ищут еще более простые решения. Кроме того, появление React Hooks открыло новые возможности для управления состоянием.
Некоторые из новых библиотек управления состоянием, которые появились на горизонте, — это Recoil, Jotai, Radio Active state и Zustand.
В этой статье я расскажу о Zustand, который предоставляет легкий и простой способ управления состоянием в React.
Привет, когда разрабатываем любой проект на React, мы, при выборе что рендерить, больше всего имеем дело с условными операторами или просто с передачей компонентов в определенный компонент, функцию или тому подобное. Но если происходит неожиданная ситуация и в React компоненте или функции случается ошибка, то, зачастую мы видим белый экран смерти. И после этого нам надо открыть инструменты разработчика, чтобы увидеть в консоли ошибку. А это точно не лучший способ обработки ошибок. Решением данной проблемы является Error Boundary.
Привет, в данном посте вы найдете перевод статьи Mangabo Kolawole, в которой пойдет речь о Test-Driven Development. Мы создадим крайне простое приложение на React по всем правилам TDD.
Первое правило Test-Driven Development (TDD) – это написание тестов перед написанием кода. Это звучит более интуитивно, когда мы говорим о разработке для бэкенда, если честно, но работает ли данная схема для фронтенда, в частности для React, что же, посмотрим.
Представляю несколько проектов с исходным кодом начиная от инструментов для повышения производительности до B2B приложений. Решения можно использовать как замену платным.
В статье ставится проблема избыточной сложности использования фреймворка React.js при богатстве его функций, описана возможная тенденция роста технического долга и зависимость между предоставляемыми средствами и величиной технического долга.
Что подразумевается под необоснованной сложностью проектов?
Для начала необходимо отметить, что «React» в отличии от «Vue» предоставляет огромную свободу разработчику. Благодаря этому разработчики любят данный фреймворк и всячески указывают, что приложения на «React» будут быстрее и производительнее чем на «Vue». Это несомненно так, «React» приложения можно сделать быстрым, производительным и легко тестируемым. К сожалению, достичь этого крайне тяжело и из-за этого многие компании могут иметь не высокопроизводительные приложения, а наоборот перегруженные излишним кодом и трудно тестируемые приложения. Это связанно с тем, что начинающим разработчикам сложно понять, как правильно писать приложения на «React».
«React» словно тренер по плаванию, бросает вас в воду и говорит плыви, ему не важно будете вы правильно дышать или махать руками, ему важно чтобы вы плыли. Проецируя данный пример на «React», мы получаем возможность писать очень плохой рабочий код. Особенно это распространено в командах, где нет специалиста по «React». Люди меняются и каждый раз поддерживать приложение все труднее и труднее, кто-то увидел пример в функциональном стиле:
Привет, в переводе данного руководства вы сможете узнать как поместить ваше приложение в докер.
Докер – это открытая платформа для разработки, запуска и управления контейнерами на сервере и в облаке.
Для примера приложения в этом руководстве мы будем использовать Next.js.
Распространенная проблема: создается какой-нибудь “универсальный” компонент, и вдруг в него нужно добавить что-то, что совершенно не влезает в текущую реализацию. Проще написать новый. Именно так и случилось, когда мы рисовали графики на React с использованием библиотеки D3.
В этой статье:
📌 Типичные технические и бизнес-требования к графикам
📌 Различные способы передачи данных в React компонентах. От решения "в лоб" до постепенного улучшения
В первую очередь React это JS библиотека, а не полноценный фреймворк, так что для создания полноценного веб приложения тебе нужно знать много дополнительных вещей, чтобы использовать их вместе с React. В этой статье пойдет речь о React концептах, хуках и, конечно 😊 , хороших практиках.
Эта статья — перевод основных изменений версии реакта 18.0.0.
Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.
В этом руководстве вы пройдете через процесс создания и публикации собственной библиотеки компонентов React и размещения ее на Github.
От переводчика: в статье автор демонстрирует как создать библиотеку с React компонентом внутри, подготовить её к публикации с помощью Rollup, опубликовать через npm, настроить StoryBook, настроить тестирование с использованием React Testing Library и Jest. В оригинальной статье есть ссылка на видеоверсию текущего урока.
