Создание динамического React‑компонента для приветствия

Условие

Требуется вынести строку «Hello CodeSandbox» в отдельный React‑компонент. Часть текста «CodeSandbox» должна передаваться в компонент через проп, чтобы её можно было менять при каждом использовании. Ниже приведён базовый шаблон приложения, из которого можно начать работу (при желании переименуйте основной компонент).

import "./styles.css";

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

Ответ

Выделите компонент Greeting с пропом name и используйте его вместо фиксированного h1. Переданный текст становится частью JSX без ручной конкатенации HTML.

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

Теперь компонент можно переиспользовать как <Greeting name="Анна" />. Props доступны только для чтения: изменение приветствия выполняет родитель, передавая новое значение. Для TypeScript контракт можно описать как {name:string}; компонент объявляйте вне MainApp, чтобы его тип не создавался заново при каждом рендере.