Реальные задачи по кодированию React для подготовки к собеседованию

Решение задач по кодированию является частью процесса собеседования. Особенно если у вас еще нет большого профессионального опыта в качестве разработчика React.

Но именно для таких разработчиков задания по кодированию представляют самую большую проблему: возможностей трудоустройства для разработчиков начального уровня так мало, что бомбить тестом по кодированию очень обидно. Это демотивирует. Даже унизительно.

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

  • 4 реалистичных задания по кодированию React, которые проверяют такие навыки, как CSS, простое управление состоянием, работа с данными API и отладка существующей кодовой базы.
  • Информацию о цели задачи кодирования с точки зрения работодателя.
  • Советы о том, как подойти к задаче кодирования в процессе собеседования.

Оглавление

  • Задачи по коду React
    1. Стилизация заголовка на основе дизайна
    2. Переключение модала
    3. Рендеринг элементов на основе данных API из CMS
    4. Найти ошибку
  • (Менее известная) цель заданий по кодированию в процессе собеседования
  • 6 советов по решению задач кодирования на собеседовании
    1. Просите разъяснений
    2. Говорите во время кодирования (для задач в реальном времени)
    3. Чистый формат кода
    4. Используйте TypeScript и пишите тесты, если можете
    5. Добавьте README с четкими инструкциями
    6. Будьте готовы к вопросам

Задачи по коду React

Я рекомендую вам прочитать всю статью до того, как вы начнете работать над задачами. Тем не менее, давайте начнем с самой интересной части. Перед вами несколько задач по кодированию, которые вы могли бы встретить на собеседовании в процессе повседневной работы в качестве разработчика.

Задачи основаны на кодовой базе и дизайне React Job Simulator. Вы можете найти исходный код здесь, на GitHub. Они отличаются по сложности и проверяют различные навыки.

Давайте начнем с простой задачи.

1. Стилизация заголовка на основе дизайна

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

Здесь показано текущее состояние сайта, а ниже — дизайн.

Проверяемые навыки: CSS

Сложность: Легко

Задачи:

  • Реализуйте заголовок на основе дизайна.
  • Навигационные ссылки должны указывать на /, /products, /documentation и /pricing.
  • Ссылка «Open Dashboard» уже существует, но ее необходимо привести в соответствие с дизайном.

Подсказки:

  • Файл, который вам нужно отредактировать, находится по адресу pages/index.jsx внутри репозитория.
  • В настоящее время для CSS используется styled-components. Я бы рекомендовал использовать его и для вашего кода, но в качестве альтернативы вы можете использовать модули CSS или встроенные стили. Библиотека здесь не имеет большого значения.
  • Сам проект написан на TypeScript, но файл для этой задачи — обычный JSX. Не стесняйтесь изменить тип файла на .tsx, если вам так удобнее.
  • Если вам нужна помощь, потому что вы никогда не работали с дизайнами или хотите сделать их пиксельно идеальными, вы можете получить дополнительные ресурсы, оставив свой email ниже.

Вот решение этой первой задачи. Это не самый чистый код. Я не отделил заголовок в новый файл компонента. Я не использовал TypeScript и не писал никаких тестов. Но для этой задачи этого достаточно.

2. Переключение модала

Первая задача была простым упражнением по статической стилизации. Эта задача будет немного более динамичной.

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

А вот дизайн:

Проверенные навыки: CSS, простое управление состоянием, общие API React.

Сложность: Легкая — Средняя

Задачи:

  • Реализуйте модальный пользовательский интерфейс.
  • Кнопка «Отмена» должна закрывать модальное окно, а «Открыть приложение электронной почты» — открывать почтовый клиент пользователя.
  • Модальный интерфейс должен открываться, когда пользователь нажимает на кнопку контакта.
  • Не используйте модальную библиотеку.

Подсказки:

  • Файл, который вам нужно отредактировать, находится в репозитории pages/index.jsx.
  • Можно добавить весь код в вышеупомянутый файл.
  • Есть два способа реализации модала: простой и более продвинутый, о котором мало кто знает. Поэтому одним из проверяемых навыков является «общие API React». Если вы хотите увидеть оба решения, оставьте свой e-mail в форме ниже.

Если вы хотите более сложную задачу, вы можете попробовать:

  • Интегрировать свой код в существующую кодовую базу.
  • Добавить тест Cypress для этой задачи в существующий набор тестов.
  • Добавить историю Storybook для модального компонента.

К сожалению, это выходит за рамки данной статьи. Если вы заинтересованы в этом, посмотрите React Job Simulator.

3. Рендеринг элементов на основе данных API из CMS

Эта задача немного более сложная. Цель состоит в том, чтобы подключить наш сайт к системе управления контентом (CMS). CMS — это как база данных и редактор для содержимого сайта. Хорошими примерами являются Contentful или Strapi.

CMS часто используется отделами маркетинга для легкого создания контента, например, целевых страниц или постов в блогах. Редактор вводит текст, изображения и все, что ему нужно. CMS хранит эти данные, а приложение (например, наш сайт) может получить к ним доступ через API.

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

В этом задании вам предстоит создать следующий элемент контента, который управляется данными из API.

Проверяемые навыки: Работа с данными API, CSS

Сложность: Средняя

Задачи:

  • Загрузить данные из конечной точки [https://prolog-api.profy.dev/content-page/home](https://prolog-api.profy.dev/content-page/home), где последний параметр в URL (home) называется «slug», который идентифицирует страницу.
  • На основе этих данных отобразите секцию героя (часть, выделенная в дизайне).
  • Секция героя должна соответствовать дизайну.

Подсказки:

  • Вы можете получать данные любым удобным для вас способом.
  • Можно добавить весь код в файл pages/index.jsx.
  • Вы можете найти документацию Swagger для нашего API здесь. (Оставьте свой e-mail ниже, чтобы получить более подробную информацию об этом).

Если вы хотите более сложную задачу, вы можете попробовать:

  • Интегрировать свой код в существующую кодовую базу.
  • Добавить тест Cypress для этой задачи в существующий набор тестов.
  • Добавить историю Storybook для модального компонента.

К сожалению, это выходит за рамки данной статьи. Если вы заинтересованы в этом, посмотрите React Job Simulator.

4. Найдите ошибку

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

Открыв страницу выдачи приложения, вы можете увидеть, что либо в колонке «События», либо в колонке «Пользователи» не отображаются правильные данные.

Проверяемые навыки: Отладка существующей кодовой базы

Сложность: Средняя

Задачи:

  • Выяснить причину ошибки.
  • Исправьте ее.

Подсказки:

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

(Менее известная) цель задач по кодированию в процессе собеседования

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

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

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

Очевидно, что задания по кодингу проверяют ваши технические навыки (например, знаете ли вы HTML, CSS, JS или React).

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

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

6 советов по решению задач по кодированию на собеседовании

Задачи по кодированию могут быть стрессом. Особенно если это живое задание, где вам придется кодировать вместе с интервьюером или рядом с ним.

Вот несколько советов о том, как к ним подойти.

Попросите разъяснений

Одна из самых больших ошибок (особенно совершаемых студентами младших курсов) — сразу же приступить к выполнению задания. Время ограничено, и вы хотите потратить его на кодинг, верно?

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

Это не слабость. Представьте, что вы взялись за работу и начали создавать решение, не определив сначала четко суть проблемы. Вы можете пойти в неверном направлении и, возможно, потратить уйму времени. На самом деле, такое случается довольно часто.

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

Разговаривайте во время кодирования (для задач в реальном времени)

Живые задачи по кодированию могут быть нервными. Но это также возможность, которой нет при выполнении заданий на дом:

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

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

Чистый формат кода

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

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

Однако есть простое решение: Используйте форматтер кода, например Prettier, для выполнения заданий по кодированию (на дом).

Используйте TypeScript и пишите тесты, если можете

Опытные разработчики ценят безопасность, которую они получают от использования TypeScript или написания автоматизированных тестов. Поэтому, если вы чувствуете себя в какой-то степени комфортно, используйте типы для своего кода и добавляйте тесты. Инструмент не имеет значения. Вы можете использовать Jest, React Testing Library или Cypress. Их не должно быть много. Одного-двух тестов должно быть достаточно, чтобы показать ваш профессионализм.

Добавьте README с четкими инструкциями

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

Добавьте четкие инструкции о том, как установить и запустить ваш код. И, кстати, дважды проверьте, работает ли ваш код.

Если у вас осталось немного времени, вы также можете добавить в README дополнительную информацию. Например,

  • Как и почему вы решили задачу так, как решили.
  • Какие предположения вы сделали.
  • Что бы вы улучшили, если бы у вас было больше времени.

Будьте готовы к вопросам

Добавление описанной выше информации в README также подготовит вас к следующему шагу: обсуждению вашего кода с интервьюером.

Если у вас есть возможность (например, при сдаче теста на дом), дайте коду немного отдохнуть после того, как вы представили свое решение. Если вас пригласили на повторное собеседование, еще раз внимательно изучите свой код.

  • Что кажется странным с точки зрения ретроспективы?
  • Есть ли части, которые особенно трудно понять?
  • Как вы могли бы улучшить или рефакторить свой код?
  • Есть ли что-то, что сейчас вы сделали бы по-другому?

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

Оцените статью
devanswers.ru
Добавить комментарий