Интеграция React в ваше приложение Astro

В этом учебнике вы узнаете, как добавить React в ваше приложение Astro. Это позволит вам создавать современные компоненты React и интегрировать их в ваше приложение. Мы пройдем необходимые шаги для подготовки вашего приложения Astro к React и создадим простой компонент.

Основные моменты

• Вам нужно установить пакет React и соответствующие плагины.
• Структура ваших компонентов в Astro немного отличается от обычного HTML.
• Чтобы гарантировать, что ваши компоненты React будут отображаться в браузере, вам нужно использовать атрибут client:only.

Пошаговая инструкция

Чтобы добавить React в ваше приложение Astro, выполните следующие действия:

Сначала убедитесь, что ваш сервер разработки больше не работает. Вы можете сделать это, остановив команду npm run dev. Это важно, чтобы избежать конфликтов во время установки новых зависимостей.

Теперь вы готовы официально интегрировать React. Для этого используйте команду npx astro add react. С этой командой вы добавляете необходимые пакеты, необходимые для поддержки React в вашем приложении Astro.

Затем вам будет предложено установить новые зависимости с помощью npm. Убедитесь, что вы это подтверждаете, так как установка не будет работать правильно без этих зависимостей.

При установке также будут внесены изменения в astro.config.mjs. Вы также должны принять эти изменения, чтобы все работало гладко.

Когда установка завершена, ваше приложение теперь должно поддерживать React. Давайте проверим, какие новые зависимости были добавлены. В вашем package.json теперь вы найдете react, react-dom и @astrojs/react в качестве плагинов.

Чтобы убедиться, что все настроено правильно, вам нужна React-компонента, которую можно протестировать. Создайте новую папку с именем components в папке src, в которую позже будут добавлены ваши компоненты React.

В этой папке создайте файл с именем index.jsx. Это будет ваш готовый к использованию React-компонент, в который вы можете поместить свой код.

Теперь вам нужно убедиться, что компонент импортируется в файл index.astro. Для этого добавьте его между тремя дефисами (---) в верхней части файла, где вы можете вставить инструкции импорта.

Ваша инструкция импорта может выглядеть примерно так: import App from '../components/index.jsx';. Это гарантирует правильную загрузку вашего компонента.

Сначала убедитесь, что вы экспортируете что-то, чтобы файл не оставался пустым. Добавьте простую функцию, которая что-то рендерит в DOM.

Не забудьте установить атрибут client:only для вашего компонента. Это гарантирует, что компонент будет отображаться в браузере, а не на сервере.

Теперь перейдем к файлу index.jsx и создадим простой React-компонент. Например, вы можете добавить простой div с текстом "App" в HTML.

Теперь, когда вы запустите приложение, вы должны увидеть, что новый компонент успешно загружен и работает правильно.

Когда ты посмотрешь на DOM, ты обнаружишь, что Astro использует специальный заполнитель под названием "Astro Island", где будут рендериться твои компоненты React.

Astro позволяет использовать несколько фронтенд-библиотек одновременно. Это означает, что ты можешь комбинировать React, Vue или другие библиотеки в одном приложении без каких-либо осложнений.

Работающий компонент - это уже хороший шаг, и ты можешь начать дальнейшее развитие твоего приложения. В будущих уроках мы разовьем этот компонент в чат-приложение.

Резюме

В этом учебнике ты узнаешь, как добавить React в твое приложение Astro и создать простой компонент. Это открывает дверь к множеству возможностей для расширения твоего приложения.