🔥 Interview Case #1: Hello World

Dear candidate! This is a test task for the React Developer position at our company.

Hello! My name is Alexander, and I'm the Team Lead. We're looking for talented React developers to join our team. This simple test task will help us evaluate your basic skills with React and JSX. Successfully completing this task is the first step towards receiving a job offer from our company.

Technical Requirements

To successfully pass the interview, you need to:

Implement the HelloMessage component that displays the text “Hello World” using JSX.
Use an appropriate HTML tag for displaying the text (for example, <h1>, <p>, or another).
Ensure that the text is displayed inside a container with the hello-message class.
The code should follow modern React standards and be clean and readable.

Time limit: 15 minutes

Expected Result

Your solution should look approximately like this: Example of Hello World result

💡 Tips for Candidates

We evaluate not only the functionality of the code but also its quality, cleanliness, and adherence to modern standards.
JSX allows you to write HTML-like markup directly in JavaScript code.
You can use any appropriate HTML tag to display text, for example: <h1>Hello World</h1>.
Remember that in JSX, all tags must be closed, even self-closing ones.
If you’re not familiar with JSX, we recommend referring to the official documentation: react.dev/learn/writing-markup-with-jsx

👀 Solution Example (view only after attempting on your own)

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>
  );
}

HR Department Comment: This is an example of an ideal solution that we expect from candidates. The HelloMessage component correctly uses JSX to display text, follows the requirements for classes and structure. Such a solution demonstrates an understanding of React basics and the ability to write clean, readable code.

Technical Requirements

Expected Result

🔥 Interview Case #1: Hello World

Technical Requirements

Expected Result

🧑‍💻 It's not a bug! It's a feature!