Для интеграции функционала Яндекс карт в приложение, созданное на React 18, необходимо использовать официальное API Яндекс карт.
1. Установите библиотеку для работы с Яндекс картами:
```
npm install ymaps
```
2. Вам необходимо создать компонент React, который будет содержать карту:
```jsx
import React, { useEffect } from 'react';
const YandexMap = () => {
useEffect(() => {
window.ymaps.ready(() => {
const myMap = new window.ymaps.Map("map", {
center: [55.751574, 37.573856],
zoom: 9
});
});
}, []);
return <div id="map" style={{ width: '100%', height: '400px' }} />;
};
export default YandexMap;
```
3. Вставьте данный компонент в вашу основную компоненту приложения:
```jsx
import React from 'react';
import YandexMap from './YandexMap';
const App = () => {
return (
<div>
<h1>My React App with Yandex Map</h1>
<YandexMap />
</div>
);
};
export default App;
```
4. У вас должен быть где-то в вашем проекте HTML-код, где будет подключаться скрипт API Яндекс карт:
```html
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
```
5. После этого, запустите ваше приложение React и вы увидите на странице карту Яндекс.
Надеюсь, данное объяснение поможет вам интегрировать Яндекс карты в ваше React приложение. Если у вас возникнут дополнительные вопросы, не стесняйтесь обращаться!