Уважаемый кандидат! Перед вами тестовое задание на позицию React-разработчика в нашей компании.
Здравствуйте! Меня зовут Александр, я тимлид. Мы ищем талантливых React-разработчиков в нашу команду. Это простое тестовое задание поможет нам оценить ваши базовые навыки работы с React и JSX. Успешное выполнение этого задания — первый шаг к получению предложения о работе в нашей компании.
Техническое задание
Для успешного прохождения собеседования вам необходимо:
- Реализовать компонент
HelloMessage, который выводит текст “Hello World” с помощью JSX. - Использовать подходящий HTML-тег для вывода текста (например,
<h1>,<p>или другой). - Убедиться, что текст отображается внутри контейнера с классом
hello-message. - Код должен соответствовать современным стандартам React и быть чистым и читаемым.
Срок выполнения: 15 минут
Пример решения
Финальный результат должен выглядеть примерно так:
💡 Подсказка
- JSX позволяет писать HTML-подобную разметку прямо в JavaScript-коде.
- Для вывода текста можно использовать любой подходящий HTML-тег, например:
<h1>Hello World</h1>. - Не забудьте, что в JSX все теги должны быть закрыты, даже самозакрывающиеся.
- Документация: react.dev/learn/writing-markup-with-jsx
👀 Решение
import React from 'react';
import './styles.css';
export function HelloMessage() {
return (
<div className="hello-message" data-testid="hello-message">
<h1 className="hello-message__text">Hello World</h1>
</div>
);
}
export default function App() {
return (
<main className="hello-container">
<HelloMessage />
</main>
);
}Почему это работает: Компонент HelloMessage возвращает JSX-разметку, которая содержит заголовок с текстом “Hello World”. Этот компонент затем используется в основном компоненте App, который отображает его внутри контейнера. JSX позволяет нам писать HTML-подобную разметку прямо в JavaScript-коде, что делает создание пользовательских интерфейсов в React интуитивно понятным.
🔥 Интервью-кейс #1: Hello World
Уважаемый кандидат! Перед вами тестовое задание на позицию React-разработчика в нашей компании.
Здравствуйте! Меня зовут Александр, я тимлид. Мы ищем талантливых React-разработчиков в нашу команду. Это простое тестовое задание поможет нам оценить ваши базовые навыки работы с React и JSX. Успешное выполнение этого задания — первый шаг к получению предложения о работе в нашей компании.
Техническое задание
Для успешного прохождения собеседования вам необходимо:
- Реализовать компонент
HelloMessage, который выводит текст “Hello World” с помощью JSX. - Использовать подходящий HTML-тег для вывода текста (например,
<h1>,<p>или другой). - Убедиться, что текст отображается внутри контейнера с классом
hello-message. - Код должен соответствовать современным стандартам React и быть чистым и читаемым.
Срок выполнения: 15 минут
Пример решения
Финальный результат должен выглядеть примерно так:
💡 Подсказка
- JSX позволяет писать HTML-подобную разметку прямо в JavaScript-коде.
- Для вывода текста можно использовать любой подходящий HTML-тег, например:
<h1>Hello World</h1>. - Не забудьте, что в JSX все теги должны быть закрыты, даже самозакрывающиеся.
- Документация: react.dev/learn/writing-markup-with-jsx
👀 Решение
import React from 'react';
import './styles.css';
export function HelloMessage() {
return (
<div className="hello-message" data-testid="hello-message">
<h1 className="hello-message__text">Hello World</h1>
</div>
);
}
export default function App() {
return (
<main className="hello-container">
<HelloMessage />
</main>
);
}Почему это работает: Компонент HelloMessage возвращает JSX-разметку, которая содержит заголовок с текстом “Hello World”. Этот компонент затем используется в основном компоненте App, который отображает его внутри контейнера. JSX позволяет нам писать HTML-подобную разметку прямо в JavaScript-коде, что делает создание пользовательских интерфейсов в React интуитивно понятным.
🧑💻 Это не баг! Это фича!
Редактор кода намеренно скрыт на мобильном.
Поверь, так лучше: я оберегаю тебя от искушения писать код в неидеальных условиях. Маленький экран и виртуальная клавиатура — не лучшие помощники для программиста.
📖 Сейчас: Изучи задачу, продумай решение. Действуй как стратег.
💻 Потом: Сядь за компьютер, открой сайт и реализуй все идеи с комфортом. Действуй как код-джедай!