Разработка отдельного React‑компонента для отображения текста

Условие

Требуется оформить независимый React‑компонент, который выводит строку "Hello CodeSandbox". Ниже представлен пример реализации.

import "./styles.css";

export default function HelloComponent() {
  return (
    <div className="AppContainer">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Ответ

Приведённый HelloComponent уже является самостоятельным React-компонентом. Сохраните его в отдельном файле, импортируйте в App и используйте JSX-тег с заглавной буквы.

import HelloComponent from './HelloComponent';
export default function App() {
  return <HelloComponent />;
}

Файл компонента должен экспортировать функцию по умолчанию, как в условии. styles.css задаёт оформление, но не нужен для самого вывода текста. JSX обрабатывается сборкой проекта; вставить этот исходник в обычный script без преобразования нельзя. Отдельное состояние или useEffect для статической надписи не требуются.