• Работа с callbacks в React

    • Tutorial

    За время своей работы, я периодически сталкивался с тем, что разработчики не всегда четко представляют, каким образом работает механизм передачи данных через props, в частности колбеков, и почему их PureComponents обновляется так часто.


    Поэтому в данной статье мы разберемся, как передаются callbacks в React, а также обсудим особенности работы event handlers.

    Читать дальше →
    • +29
    • 6.7k
    • 5
  • Разбор конкурса-квиза по React со стенда HeadHunter на HolyJs 2018

      Привет. 24–25 сентября в Москве прошла конференция фронтенд-разработчиков HolyJs https://holyjs-moscow.ru/. Мы на конференцию пришли со своим стендом, на котором проводили quiz. Был основной квиз — 4 отборочных тура и 1 финальный, на котором были разыграны Apple Watch и конструкторы лего. И отдельно мы провели квиз на знание react.


      Под катом — разбор задач квиза по react. Правильные варианты будут спрятаны под спойлером, поэтому вы можете не только почитать разбор, но и проверить себя :)


      image


      Поехали!

      Читать дальше →
      • +15
      • 4.5k
      • 5
    • Keys in React. Готовим правильно

      • Tutorial

      Сегодня поговорим об атрибуте key в React. Часто разработчики, которые только начинают использовать React, не придают большого значения атрибуту key. А зря…


      image
      Что говорит уточка, когда узнала, что ты не используешь key


      Чтобы представить работу ключей полностью и с различными кейсами, рассмотрим план:


      1. Reconciliation
      2. Реиспользование ключей и нормализация
      3. Использование key при рендере одного элемента
      4. Работа с ключами при передаче компоненту children
      Читать дальше →
      • +33
      • 19.7k
      • 1
    • Нянчим проект на React-redux с пелёнок

        intro
        В начале этого года мы в HeadHunter начали проект, нацеленный на автоматизацию различных HR-процессов у компаний-клиентов. Архитектурой этого проекта на фронте выбрали React-Redux стек.

        За 9 месяцев он вырос из небольшого приложения для тестирования сотрудников в многомодульный проект, который сегодня называется “Оценка талантов”. По мере его роста мы сталкивались с вопросами:

        • хранения стейта, его нормализации;
        • построения масштабируемой архитектуры проекта, удобной иерархии — как в структуре, так и в бизнес-логике.

        Это проявлялось в изменении подхода к построению компонентов, архитектуры редьюсеров.

        Давайте поговорим о том, как мы развивали проект и какие решения принимали. Некоторые из них могут оказаться “холиварными”, а другие, напротив, “классикой” в построении большого проекта на redux. Надеюсь, что описанные ниже практики помогут вам при построении react-redux приложений, а живые примеры помогут разобраться, как работает тот или иной подход.
        Читать дальше →
      • Unit тестирование в js. YATS — поделка для написания юнит тестов

          Добрый день!

          Начать свою статью я хочу с небольшого вступления. Вы помните, какими были сайты лет 10 назад? а пять? Если сайты и содержали какую-то js логику, то она была проста и наивна. На сегодняшний день каждый второй — это не просто статические данные, это большое динамическое содержимое, с «кучей» js логики.

          За 5-8 лет JavaScript перестал быть языком для анимирования снежинок под новый год и преобразовался в довольно популярный и востребованный язык программирования, с большим коммьюнити.

          Любой код можно сделать лучше, если покрыть его тестами. Код, покрытый тестами проще рефакторить, при написании tests first можно писать удобный расширяемый код.

          В таких задачах хорошо помогает UNIT-тестирование.

          На сегодняшний день существует множество фреймворков для unit тестирования js кода. В данной статье я бы хотел описать свое видение небольшой библиотеки для тестирования js кода.
          Читать дальше →
        • Верстка для самых маленьких. Верстаем страницу по БЭМу

          • Tutorial
          Недавно хабраюзер Mirantus написал статью «Как сверстать веб-страницу», в которой рассказывал о том, как же сверстать веб-страничку. В его статье было подробно рассмотрено, как выделить отдельные элементы из заданного шаблона, подобрать шрифты и т.п. Однако его подход к написанию, собственно, веб-страницы мне показался не очень хорошим, о чем я написал в комментариях.

          В данной статье я хочу рассказать, о том, как можно сверстать «хорошо» (по крайней мере структурировано ;), а заодно рассказать и о методологии, которая может «упростить жизнь» при верстке. Структура поста будет следующей:

          • BEM
          • Собственно пример — как сверстать страницу

          Читать дальше →
        • Организуем выделение текста в textarea

          • Tutorial
          Добрый день.

          В разработке интерфейсов иногда можно встретиться с задачей выделения вводимого пользователем текста в зависимости от определенных условий. (Например, была реализована серверная проверка грамматики, либо необходимо выделять определенным цветом те или иные слова\участки и т.д.)
          Однако, элемент textarea не поддерживает html\bb теги. Как один из способов решения — использование contenteditable в элементах div.
          В данной небольшой статье я предлагаю более-менее подробно рассмотреть способ выделения текста, используя textarea.
          Читать дальше →
        • Пишем HTML-виджет для приложения IBOOK Author

          • Tutorial
          Ни для кого не секрет, что печатные книги уходят в прошлое. Им на смену приходит новое поколение устройств (а вместе с ними и программ), которые позволяют не только прочитать материал, подобно книге, но и разнообразить чтение интерактивными вставками. Это может быть как и некий динамически изменяющийся материал (лента твиттера и т.п.), так и некое интерактивное содержание (анимация работы конденсатора и т.п.)
          Компания Apple выпустило приложение IBOOK Author, которое позволяет делать интерактивные книги для приложения IBOOKS устройств IPAD. Сегодня я предлагаю познакомиться с тем, как же создавать HTML-виджеты для данного приложения на примере виджета твиттера.
          Для создания виджетов существует множество программ, стоимость которых варьируется от 0 (Dashcode) до 60 (Tumult Hype).
          Создавать же свой виджет мы будем «вручную», без использования специализированных программ.
          Теперь предлагаю перейти от слов к делу.
          Читать дальше →