С ростом спроса на React - он год за годом возглавляет список ежегодных опросов Stack Overflow по наиболее востребованным фреймворкам, следовательно, существует огромный спрос на навыки разработчиков React. ИТ рекрутеры часто оказываются в затруднительном положении, когда не получают резюме с большим опытом и соответствующими навыками. Самая большая проблема, с которой они действительно сталкиваются, заключается в том, что они не знают, какие именно навыки нужно искать.
При приеме на работу разработчика React происходит множество сложных и длительных процессов. Итак, как же нанять лучшего разработчика React для своего бизнеса?
1. Что такое React?
React (также называемый React.js или ReactJS) - это библиотека JavaScript с открытым исходным кодом, используемая для создания интерактивных пользовательских интерфейсов (UI). Что касается веб-сайтов и веб-приложений, пользовательские интерфейсы представляют собой набор экранных меню, панелей поиска, кнопок и всего остального, с чем кто-то взаимодействует для использования веб-сайта или приложения. Он был создан Facebook 2013 и используется в качестве основы для отдельной веб-страницы или мобильных приложений (с React Native).
React помогает разработчикам создавать пользовательские интерфейсы в виде дерева небольших частей, называемых компонентами. Компонент представляет собой смесь HTML и JavaScript, которая захватывает всю логику, необходимую для отображения небольшой части большего пользовательского интерфейса. Каждый из этих компонентов может быть встроен в последовательно сложные части приложения.
Важное различие между библиотеками, такими как React, и фреймворками, такими как Ember.js и Angular, заключается в том, что React занимается только рендерингом пользовательского интерфейса и оставляет множество вещей для каждого проекта, которые нужно собрать. React считается самоуверенным. React зарекомендовал себя как одна из самых доминирующих библиотек, используемых разработчиками. Согласно опросу State of Developer Ecosystem Survey за 2020 год, React является наиболее часто используемой платформой, и 63% респондентов утверждают, что используют ее, что на 10% больше, чем в прошлом году. Более того, React с большим отрывом выходит на первое место при рассмотрении необработанных данных и явного массового использования загрузок .
1.1. Для чего используется React и какие проблемы он решает? До React разработчикам оставалось создавать пользовательские интерфейсы вручную с помощью «vanilla JavaScript» (разработчики говорят о необработанном языке JavaScript без каких-либо поддерживающих фреймворков) или с помощью предшественников React, менее ориентированных на пользовательский интерфейс, таких как jQuery. Этот процесс привел к длительному времени разработки и большему количеству нарушений и ошибок. Превосходство React быстро решило подобные проблемы. На React созданы сотни тысяч веб-сайтов. Он чрезвычайно популярен благодаря своей скорости работы и способности адаптироваться к проектам разного масштаба. Некоторые примеры популярных сайтов, использующих React, - это Facebook, Instagram, Netflix, Reddit, Airbnb и Uber.
React упрощает создание тестовых примеров пользовательского интерфейса, создание сайтов, оптимизированных для SEO, повторное использование компонентов на многих платформах, внедрение существующего кода для веб-сайта в мобильное приложение, повышение производительности ресурсоемких веб-приложений, и его можно использовать везде, где есть JavaScript. необходимо.
1.2. Похож ли он на какие-либо другие языки или фреймворки? Дизайн и функциональность React не очень похож на другие JavaScript-фреймворки.
Однако фреймворк Vue действительно имеет сходство с React. Они включают в себя возможность использовать виртуальную модель DOM, предоставлять реактивные и компонуемые компоненты представления и поддерживать фокус в основной библиотеке с такими проблемами, как маршрутизация и глобальное управление состоянием, которые обрабатываются сопутствующими библиотеками.
Но есть еще одна особенность: React создает HTML с использованием так называемого синтаксиса JSX, который очень похож на исходный HTML. Таким образом, знание HTML может быть применимо к React.
1.3. Каковы его основные преимущества или особенности?
Явным преимуществом использования React является то, что он использует стиль функционального программирования. Функциональное программирование - это процесс создания программного обеспечения путем составления чистых функций; избегая общего состояния, изменяемых данных и побочных эффектов. Функциональное программирование является декларативным, а не императивным, и в результате React использует очень мало «шаблонного» кода. Фактически это означает, что вы можете многого добиться с помощью небольшого количества кода. Изучение процесса может занять некоторое время, однако в конечном итоге это сокращает время разработки и снижает риск ошибок кодирования.
React имеет две ключевые функции, которые делают его привлекательным для разработчиков JavaScript: JSX и Virtual DOM.
JSX (сокращение от JavaScript eXtension) - это специальное расширение синтаксиса React, которое эффективно позволяет веб-разработчикам смешивать синтаксис HTML с синтаксисом JavaScript. Обычно нативный JavaScript не поддерживает эту функцию, поэтому JSX значительно сокращает объем необходимого кода. И поскольку поддержка браузера React распространяется на все современные веб-браузеры, JSX совместим с любой доступной браузерной платформой.
Если разработчик использует JSX для управления и обновления своей DOM, React создает нечто, называемое Virtual DOM. Виртуальная модель DOM - это искусственная копия модели DOM сайта, и React использует эту копию, чтобы увидеть, какие части фактической модели DOM необходимо изменить, когда происходит событие (например, когда пользователь нажимает кнопку). Этот вид выборочного обновления требует меньше вычислительных ресурсов и меньше времени на обновление страницы. В целом, это делает процесс программирования более приятным для программистов.
2. Что важно знать ИТ рекрутеру о React?
ИТ рекрутеру важно помнить, что React - это библиотека / фреймворк представления, которая не определяет, как мы обрабатываем состояние (данные) в наших приложениях. Чтобы противостоять этому, в 2015 году была выпущена популярная библиотека для управления состоянием под названием Redux, которая использовалась до 2019 года. В настоящее время Redux утратил популярность, и React Hooks стал основным инструментом для управления состоянием приложения. Сегодня люди не очень часто пишут новые приложения с помощью Redux. Но многие существующие проекты, продукты и компании полагаются на Redux, и им придется активно поддерживать его в течение многих лет.
2.1. Как часто меняется стек технологий?
Это сложно сказать, потому что мы не можем предсказать будущее. Приблизительно каждые 2-3 года происходят большие изменения, такие как замена миксинов на компоненты более высокого порядка или переход от компонентов класса к функциональным компонентам на основе хуков.
2.2. Доступно ли много ресурсов / инструментов / технологий?
По React доступно огромное количество материалов, включая множество бесплатных руководств по его использованию. Удобство использования библиотеки не так сложно, как, например, Angular, поэтому она популярна как среди любителей, так и среди опытных программистов.
Что касается инструментов, есть также множество плагинов и библиотек, доступных для использования с React. Поскольку фреймворк был синтезирован Facebook, поддерживающая экосистема действительно мощная. Есть много JS-библиотек, у которых есть соответствующие привязки React. Для React по-прежнему активно поддерживается широкий спектр инструментов, пользующихся успехом у пользователей (важно выбрать инструмент, который не кажется заброшенным или обновленным).
Существует множество ресурсов, которые можно объединить или изучить React на другом уровне, и лучшие из них можно найти на таких сайтах, как Hongkiat .
2.3. С какими инструментами и методами должен быть знаком React разработчик?
Один из наиболее эффективных способов освоить React - это использовать его инструменты для создания веб-приложений для реальных проектов. Так что вполне вероятно, что у разработчика есть в этом большой опыт. Знание React Hooks, React Context API и Redux жизненно важно для разработчика React.
- Для создания визуальных элементов разработчик React должен хорошо разбираться в HTML, CSS, SASS / LESS / Stylus. Кроме того, SVG будет бонусом.
- Хорошее знание JavaScript является фундаментальным. Также неплохо иметь типографский скрипт.
- Они должны иметь практические знания этих библиотек: jQuery, MomentJS, Underscore и Lodash.
- Опытный разработчик React знает, как использовать эти инструменты JavaScript: npm, Yarn, платформу Node.js (в целом) и как минимум один из инструментов для автоматизации создания приложения: Webpack, Parcel или Rollup (Grunt, Gulp и Раньше Browserify был популярен, а сейчас им мало что)
- Для тестирования они должны знать TDD, BDD, Unit Tests и уметь уверенно использовать такие инструменты тестирования, как Jest или Enzyme. Жасмин, Карма, Мокко и Селен также будут полезны.
- Приятно иметь хороший опыт управления облачными платформами, такими как SaaS, Amazon AWS, Google Cloud или Microsoft Azure.
- Ищите кого-нибудь с навыками работы с этими платформами приложений: инструменты управления проектами: Jira и серверы: NGINX, Apache, а также инструменты онлайн-сотрудничества Slack, Miro, Figma и облачные документы, такие как Google или Microsoft и т. д.
2.4. Какой опыт важно искать в React разработчике?
Научный и академический опыт для React практически не имеет значения. С другой стороны, коммерческий опыт очень важен. Опыт с открытым исходным кодом - это хорошо, но определенно не обязательно. Если разработчик поддерживает популярную библиотеку ОС, это будет большим преимуществом.
Вообще говоря, выполнение простых задач в React несложно , поэтому многие подражатели-разработчики пытаются начать свою карьеру с фронтенд-разработки, часто с React. Поэтому есть много выпускников учебных курсов, которые хотят получить свою первую работу в React. Наличие коммерческого опыта - очень большое преимущество по сравнению с людьми, которые посещали учебные лагеря и часто создавали один или два проекта на стороне. Давать новичкам шанс - это здорово, но их опыт на самом деле не означает проверенных в бою знаний.
3. Как проверить навыки разработчика React на этапе подбора?
Технические или жесткие навыки - это профессиональные навыки , которые необходимы для выполнения работы. Эти навыки приобретаются и развиваются посредством обучения, семинаров, тренингов и сертификатов.
Но с другой стороны, межличностные навыки относятся к межличностным способностям человека. По своей природе их довольно сложно измерить или количественно оценить. Мягкие навыки помогают нам определить, как сотрудник взаимодействует с другими и обладают ли они качествами, соответствующими корпоративной культуре. Некоторые из наиболее важных навыков программирования на React включают:
- Отличные коммуникативные навыки
- Командная работа
- Творческий подход
- Умение справляться с критикой
3.1. Что нужно учитывать при просмотре резюме?
Безусловно, первое, что нужно искать в резюме, - это коммерческий опыт разработки front-end проектов. Всегда отдавайте предпочтение опыту, а не длинному списку различных инструментов. Зачем?
Современная интерфейсная разработка представила сотни инструментов, которые решают похожие проблемы по-разному, а иногда и делают одно и то же. Существует множество тенденций, некоторые инструменты могут стать популярными, а через два года они уже унаследованы, и ситуация меняется очень быстро.
Тот факт, что кто-то упомянул инструмент X в своем резюме, означает, что они могут что-то построить с его помощью. Но это не значит, что у них есть твердое понимание того, почему они сделали это таким образом, или каковы плюсы и минусы других различных решений. Способность адаптироваться к незнакомым ситуациям является здесь настоящим ключом, без этого базового опыта решения различных проблем разработчик может знать только то, к чему он привык или чему его научили.
В общем, довольно просто перечислить множество знакомых инструментов в резюме, но решение проблем гораздо важнее. Если бы кто-то включил «проектирование решений» или «предоставление архитектуры», это было бы предпочтительнее, чем просто имена инструментов с указанием имен.
3.2. Какие термины глоссария важно знать в React (включая фреймворки, библиотеки и языковые версии)?
Вот ключевые слова, которые стоит понять:
Архитектура
- Компоненты класса
- Функции (все) Компоненты
- Реагировать на хуки
Управление
- React Context API
- Redux
- MobX
Стиль
- Стилизованные компоненты
- Emotion
- CSS в JS
- Модули CSS
Статический набор текста или проверка типов
Экосистема
Bundler
Разработчики React также используют React Native, предназначенный для создания собственных мобильных приложений. React в сочетании с React Native позволяет разработчикам использовать один и тот же код как для браузера, так и для мобильных устройств, что является большим преимуществом. Тем не менее, для каждой платформы по-прежнему существует важный код для конкретной платформы, который нельзя дублировать.
3.3. Какие версии полностью разные? Какие версии похожи друг на друга?
Количество версий не так важно, поскольку люди не заучивают их наизусть, однако в эволюции React действительно было несколько «эпох».
Имейте в виду, что Python v2 и v3 не совместимы друг с другом. Что более важно, так это архитектуры, которые люди скомпилировали. Новые версии, естественно, были добавлены, но React v16.8.3 не вызывает нареканий у многих разработчиков.
Архитектуры, с которыми люди могут быть знакомы (в хронологическом порядке), включают:
Класс React на основе компонентов
- Mixins - очень старый подход. В настоящее время это, по сути, наследие, и его следует избегать. Однако есть несколько старых проектов, где он все еще используется.
- HOC (компоненты высшего порядка) - идея этого подхода состоит в том, что HOC добавляет одно поведение к компоненту (добавляет одну функциональность). Он еще есть во многих проектах, но считается наследием.
- Render Props - некоторые нестандартные компоненты, у которых нет пользовательского интерфейса, имеют только логику / поведение. И они принимают эту «опору рендеринга», чтобы определить, что такое представление. Итак, принудительно отделяем логику от UI. В некоторых проектах он может быть, но считается наследием.
Функция React на основе компонентов
- React Hooks - представили в конце 2018 года и быстро стали доминирующим подходом. В настоящее время это абсолютно необходимо. Основан на функциональном программировании и полностью отличается от компонентов класса. Как только вы его изучите, он станет более безопасным и менее подверженным ошибкам. Но обычно для его изучения требуется больше усилий по сравнению с компонентами класса.
Все вышеперечисленные подходы в значительной степени пытаются достичь одной и той же цели, хотя и разными способами. В первую очередь посредством: составления компонентов, объединения нескольких более мелких компонентов в одну большую часть, улучшения возможности повторного использования и улучшения композиции.
3.4. Какие еще строки в резюме могут показать навыки разработчика React?
Разработчикам React также важно иметь глубокие знания в области агностических навыков, в том числе:
- Язык: JavaScript, ES6
- Асинхронный JavaScript (обещания, события, async await и rxjs)
- HTTP - протокол, используемый в настоящее время миллиардами устройств, который обеспечивает связь между клиентами и серверами.
- Typescript и / или Flow (приложения для React со статической типизацией)
- Библиотеки пользовательского интерфейса, такие как Material UI
- В общем, архитектура и паттерны дизайна.
3.5. Какие сертификаты доступны и соблюдаются? Полезны ли они для определения навыков?
Во фронтенде нет уважаемых сертификатов, к которым стоит стремиться. Если сертификаты и есть, то они малоизвестны. Это полностью противоположно тому, чем раньше была Java (с множеством доступных сертификатов).
4. Техническая проверка навыков разработчика React во время телефонного / видео-интервью.
Независимо от того, являетесь ли вы ИТ рекрутером или менеджером проекта, вы хорошо знаете, что успех вашего проекта зависит от вашей способности находить лучших разработчиков.
Ниже вы найдете несколько примеров вопросов для собеседований, к которым вы можете обратиться при поиске программиста React для создания ваших веб-приложений.
4.1. Вопросы, которые вы должны задать об опыте разработчика React . Зачем вам задавать каждый из этих вопросов? 1 Вы обращаете внимание на автоматическое тестирование?
Разработчики, у которых нет привычки писать модульные / e2e-тесты, могут быть оптимистичны в отношении качества своего кода, но на самом деле процесс тестирования жизненно важен.
2 Поддерживали ли вы доступность (a11y) в своих недавних проектах?
Важно создавать доступные веб-сайты, особенно для государственных и финансовых учреждений, чтобы люди с ограниченными возможностями могли максимально эффективно использовать приложения.
3 Вы предпочитаете кодировать бизнес-логику или визуальный слой?
Кандидат сказал бы, в чем его сильная сторона и какие задачи он бы предпочел выполнять в своей повседневной работе.
4 Как бы вы оптимизировали свою кодовую базу React?
Ответы на этот вопрос говорят об опыте. Хороший ответ должен включать в себя различные методы, такие как: memo, useMemo, PureComponent, удаление ненужных вычислений и разделение компонентов на более мелкие части (чтобы при каждом изменении повторно отображалось меньше разметки).
4.2. Вопросы, которые вы должны задать о знаниях и мнениях разработчиков React . Зачем вам задавать каждый из этих вопросов?
- Почему сообщество отвергло Redux (или, по крайней мере, заявило, что это не путь вперед для React)?
- Укажите плюсы и минусы как Redux, так и React Context API. Где бы вы использовали одно вместо другого?
- Какие преимущества у React Hooks?
- Укажите несколько техник функционального программирования, которые часто используются в приложениях React.
Вышеупомянутые вопросы являются высокоуровневыми, что позволяет кандидату позиционировать себя на собеседовании. Если кандидат неопытен, вы сможете сказать это довольно быстро.
Плохой ответ на вопрос « Почему был отклонен Redux ?» было бы « Потому что React Hooks лучше ». Более осознанный ответ был бы, хотя Redux предоставляет множество преимуществ, таких как предсказуемое управление состоянием, явность, путешествия во времени и горячая замена модулей, в Redux добавлено много повторяющегося кода, и доступность стала проблемой для многих его пользователей.
Некоторые другие вопросы, касающиеся знаний и мнений, включают: 1 Почему React представил Virtual DOM?
Ответ не на то, что это такое, а на то, почему это там, доказывает, что разработчик понимает внутренний дизайн и архитектуру, лежащие в основе самого React. Короткий ответ - из-за производительности, гибкости и простоты изменения структуры HTML.
2 Какие проблемы решают модули CSS?
Важно понимать проблемы, стоящие за управлением CSS в приложениях React. Некоторые стили просачиваются наружу, а некоторые стили извне проникают в ваше место. Модули CSS имитируют локальные стили.
3 Почему не рекомендуются ссылки (сокращение от ссылок)?
Это важно, поскольку доказывает понимание философии React. Короче говоря, типичный подход к программированию необходим. React следует декларативному подходу. Refs - это уход в императивный мир, существующий вне философии React. Его следует использовать только в крайнем случае.
4.3. Поведенческие вопросы, которые следует задать разработчику React. Зачем вам задавать каждый из этих вопросов?
1 Какая самая сложная задача React вам приходилась? Как ты с этим справился?
Ответ на этот вопрос покажет незнакомые задачи, которые стояли перед разработчиком. Это может относиться к обучению новым навыкам, совместной работе или сотрудничеству с бизнесом.
2 Если бы вы узнали, что набирающая популярность новая библиотека для управления состоянием для React, добавили бы вы ее в свой проект, зная, что у вас уже есть два разных способа управления состоянием?
Как упоминалось ранее, постоянно меняющиеся тенденции - это проблема во фронтенде. Инструменты меняются, но некоторые люди теряют фокус и относятся к ним как к самой цели, а не как к средству достижения бизнес-цели. Всегда отдавайте предпочтение разработчикам, которые смотрят на результат, а не на то, в каком направлении его нужно достичь.
3 Если бы появился новый подход к работе с React, вы бы хотели стать его первопроходцем?
То же, что и выше - не отдавайте предпочтение новым инструментам перед бизнес-целями. Переписывание своей кодовой базы требует времени и денег, и разработчики должны это знать.