Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 24 You must be signed in to star a gist
  • Fork 13 You must be signed in to fork a gist
  • Save Imater/99024412cf9bca9d849197ea16c9512c to your computer and use it in GitHub Desktop.
Save Imater/99024412cf9bca9d849197ea16c9512c to your computer and use it in GitHub Desktop.
Рекомендованные знания для React разработчика high middle

Рекомендованные знания для React разработчика high middle

React

  • Варианты создания компонента (pureFunction, class, createElement)
  • pureRender - знания принципа ререндера Реакт приложений при изменениях хранилищ, какие props приводят к неоправданному перерендеру, кеширование результатов функций
  • Контейнер - его назначение, основные задачи, типовая структура
  • Глупый компонент - его назначение, основные задачи, принцип разбиения на компоненты, функции
  • React router - как создавать синхронный, асинхронный роутер, как отложить рендер компонента в Route на время загрузки, как работает функция match, как считывать параметры url ?q=1, #q=1 как их устанавливать при .
  • Последовательность DOM render, последовательность вызова всех функций компонента, например componentDidMount, componentWillMount, componentWillReceiveProps и всех остальных. Как использовать ref, в какой момент он вызывается.
  • props, state все особенности работы с ними
  • Redux - что такое Provider, connect функция, dispatch, экшены, хранилища, редьюсеры, иммутабельность, схема движения данных при вызове action, прокидывание данных из хранилища в компонент, прокидывание action. Как вызывать асинхронные экшены. Что возращает dispatch. Как одно хранилище, может получить данные из другого. Принцип разделения на разные хранилища. HOR (High order reducer) - как сделать функцию создающую типовое хранилище с экшенами.
  • loop библиотека или любая другая для асинхронной работы
  • Storybook - как с ним работать, какие у него возможности
  • Redux devtool, React расширения хрома, знание всех возомжностей
  • Изоморфный рендеринг, routing при этом, как прокидываются начальные значения хранилищ при этом, что это такое, как работает, какие ошибки бывают. Умение показать назначение настроек в webpack и проекте
  • Знание возможности работы с ref компонента в dom через реакт.
  • Знание правил оформления кода и устоявшихся практик eslint-config-airbnb, понимания их правил и причин их появления
  • Отличие js, jsx, базовые знания typescript или flow.
  • Методы тестирования реакт компонентов, хранилищ, экшенов, редьюсеров, асинхронных действий, серверных АПИ методов
  • Инструментарий отладки производительности React
  • Умение найти разницу между серверным и клиентским рендерингом, понимать процессы происходящие в браузере при отрисовки приложений, асинхронных запросах, действиях пользователя.
  • Умение написать свой middleware для redux
  • Работа с библиотекой classnames. Знание что такое css модули. Как можно комбинировать стили, брать их из другого файла. Как устанавливать имена классов опционально, из другого файла стилей, как их комбинировать.
  • redux form - детальные знания работы с формами, валидацией, асинхронной валидацией

JavaScript

  • Работа с Promise, (водопад, последовательность, серия - работа с несколькими обещаниями), then, catch, цепочки из нескольких then,
  • this - каким он бывает, что в этом объекте в разных вариантах написания функций, классов, инстансов классов
  • Классы - конструктор, наследование, что такое super, варианты создания функций класса, функций экземпляра класса, какая между ними разница.
  • Экспорт, импорт модулей ES6. require, import, в том числе асинхронный import, import с указанием имени bundle в webpack 3.0
  • Ramda библиотека, основные функции работы с массивами, функциями, обещаниями
  • memoizee библиотека и принцип работы, длина ключа
  • throttle, debounce функции, setTimeout, setInterval - как они работают, как передавать в них параметры, в каких случаях нужен clearInterval
  • Cookies, как их устанавливать, считывать, как их можно устанавливать только для конкретной страницы, доступны ли они на сервере, в какой момент применяются браузером, как их меняет сервер
  • Регулярные выражения, использование на примерах, функции сравнения, выбора, поиска регулярок, флаги case, global search, регулярные выражения замены
  • Уверенное знание что такое Объекты, массивы, строки, числа, null, undefined, typeof, функции работы с этими объектами, все основные операции, создания, клонирования, merge, конкатенирования, деструктуризации,
  • Базовые или начальные знания node.js
  • Умение работать c websocket, основные знания по нему
  • События, подписка, генерация, скроллинг, ресайз окна
  • Умение работать с элементом дерева DOM - размеры, overflow width при скроллинге, умение переместить скролл страницы программно.
  • Строгое и нестрогое сравнение всех видов объектов js
  • Знания передачи объектов по ссылке, что происходит при { ...state, id: 1 } что при этом передается по ссылке, а что создается заново, если в state сложные объекты, массивы, функции, ссылки на самого себя
  • Умение преобразовать объект в строку и обратно, умение вывести сircular объект, где есть ссылки на самого себя
  • Умение работать с рекурсией

Верстка

  • Умение верстать основные элементы с применением и без flex
  • Умение работать с browserstack
  • Поллифилы
  • Инструментарий проверки совместимости css-свойства в разных браузерах (caniuse)
  • Принцип наименования

Инструментарий и общие знания

  • Паттерны, антипаттерны, принципы "плохого кода", основные виды рефакторинга
  • Дебаг в хроме, использование всех вкладок, их назначение, особенности. Расширения Redux, React, JSON View.
  • Git консольные команды, коммит, мерж, решение мерж конфликтов, ветвление, пулл-реквест, правила наименования commit, умение работать в интерфейсе github на сайте. Общие знания принципа работы. Умение сравнивать разные ветки, зание что такое fork, как с ним работать. Умение работать с хуками.
  • webpack, знание назначения всех настроек, hot reload, уметь настроить свой проект. Уметь делать изоморфный рендеринг.
  • yarn, npm знание основных комманд, умение создавать свой пакет, принципы обновления, структура package.json
  • Умение работы в консоли, основные операции с файлами, ssh доступ
  • Умение работы в avocode, zeplin
  • Любой эмулятор АПИ запросов GET, POST, PUT ... Умение работать с curl или подобным, методы сохранения запросов. Что означают параметры запроса, какими они бывают, какие типы отправки запросов в body запроса бывают
  • Редактор кода, показать основные функции, умение автоматизировать действия, навигация по файлам fuzzy поиском, автозамена, поиск по тексту в файлах регулярками, автоформат кода, lint внутри редактора, быстрое переключение между файлами, работа в split view, знание горячих клавиш, git возможности, если есть.
  • Поиск по всему проекту (с умением исключать папки) по имени файла, по тексту внутри, использование регулярок для поиска
  • Инструмент работы с буфером обмена, историей буфера обмена.
  • Monosnap, умение записать видео, умение писать подробные вопросы, описывать ТЗ на задачу, документировать баги.
  • Основные умения в trello, jira
  • Умение делать review чужого кода в github
  • Умение осуществлять поиск фрагментов кода по github, stackoverflow, умение читать чужой код. Умение понимать исходники используемых библиотек, уметь осуществлять их отладку. Умение сделать fork чужой библиотеки и внести локальное исправление и включение его в package.json. Умение сделать Pull Request в чужую npm библиотеку. Умение написать свою npm библиотеку и опубликовать, чтобы можно было устанавливать при помощи npm install yourname
  • Какие теги в html файле бывают, как загружаются стили, скрипты, в какой момент они выполняются, что такой обфускация, конкатенирования скриптов, uglify скриптов, как работают sourcemap.
  • Базовые знания работы с АПИ yandex метрики, google analytics, google или yandex map.
  • Базовые знания функционального подхода (функциональные языки или работы в ramda) – Знание базовых алгоритмов и паттернов (сортировки, адаптер, декоратор, фабрика, мемоизация, медиатор, observer и другие, уметь читать код и понимать что он делает)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment