Как сделать такой компонент?

Для того чтобы создать компонент в React, вам необходимо выполнить несколько основных шагов.

1. Создать новый проект React. Прежде всего, вам нужно установить Node.js и пакетный менеджер npm. После этого вы можете использовать команду create-react-app, чтобы создать новый проект React. Выполните следующую команду в командной строке:

npx create-react-app my-app

2. Создать новый компонент. После успешного создания проекта вам будет доступна базовая структура приложения React. В папке src создайте новый файл с расширением .js или .jsx, который будет содержать ваш компонент. Например, создадим файл MyComponent.js:

import React from 'react';

class MyComponent extends React.Component {
    render() {
        return (
            <div>
                <h1>Hello, World!</h1>
                <p>This is my custom component.</p>
            </div>
        );
    }
}

export default MyComponent;

3. Подключить компонент в основном файле приложения. В основном файле приложения (src/App.js) импортируйте созданный вами компонент и добавьте его в JSX.

import React from 'react';
import MyComponent from './MyComponent';

function App() {
    return (
        <div className="App">
            <MyComponent />
        </div>
    );
}

export default App;

4. Запустить приложение и увидеть результат. После завершения всех вышеперечисленных шагов запустите ваше приложение с помощью команды npm start:

npm start

Откройте браузер и перейдите по адресу http://localhost:3000, чтобы увидеть компонент в действии.

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