Для отображения текста на странице с использованием React вы можете создать React-компонент и затем использовать JSX для вставки текста в вашу разметку. Вот простой пример компонента, который делает это:
```jsx
function WelcomeMessage() {
return <h1>Добро пожаловать на сайт!</h1>;
}
ReactDOM.render(<WelcomeMessage />, document.getElementById('root'));
```
В приведенном выше примере мы создали функциональный компонент `WelcomeMessage`, который возвращает JSX-разметку с текстом внутри элемента `h1`. Затем этот компонент отрисовывается в DOM с помощью `ReactDOM.render`, где `document.getElementById('root')` представляет собой элемент в вашем HTML-файле, в который React будет монтировать ваше приложение.
Если вам нужно отобразить текст из компонента `TodoItem`, который был деструктуризирован и разбит на более мелкие компоненты, вам сначала нужно будет передать текстовые данные через входные параметры, известные как `props`. Вот пример компонента `TodoItem` и его использования:
```jsx
function TodoListItem({ text }) {
return <li>{text}</li>;
}
function TodoList({ items }) {
return (
<ul>
{items.map((item) => (
<TodoListItem key={item.id} text={item.text} />
))}
</ul>
);
}
const todoItems = [
{ id: 1, text: 'Купить молоко' },
{ id: 2, text: 'Прочитать книгу' }
];
ReactDOM.render(<TodoList items={todoItems} />, document.getElementById('root'));
```
В этом примере:
- `TodoListItem` компонент получает `text` через `props` и отображает его внутри элемента списка `li`.
- `TodoList` компонент принимает массив `items`, итерирует его с помощью функции `map`, для каждого элемента массива создает `TodoListItem`, передавая в него уникальный `key` и текст элемента через `text`.
- Массив `todoItems` содержит объекты, каждый из которых имеет свойство `id` и `text`.
- `ReactDOM.render` используется для отображения `TodoList` и передачи в него массива `todoItems` как `props`.
Это один из подходов организации компонентов в приложении с использованием React и JSX для отображения текста и данных на странице.
