В последнее время я исследую и использую React. Это по-прежнему наиболее часто используемый фреймворк из большой тройки (Angular, React и Vue), поэтому мне было интересно, как этот фреймворк по сравнению с фреймворком, с которым я больше всего знаком, старым добрым Angular. Я был удивлен тем, насколько я любил использовать React, поэтому задумался еще больше. На моем рабочем месте мы создаем производственные приложения с использованием Ionic. До Ionic 4 фреймворк всегда был жестко связан с Angular, но теперь, когда Ionic основан на веб-компоненте и, следовательно, больше не связан с Angular, я мог использовать Ionic с React.
Реагировать и TypeScript
Поскольку я привык к Angular, я также привык к TypeScript. Я не хочу терять преимущества TypeScript, поэтому сначала я должен попробовать использовать React вместе с TypeScript.
Начать проект с использованием TypeScript стало очень легко благодаря create-react-app. Просто используйте флаг TypeScript в процессе создания приложения-реакции.
npx create-react-app app-name --typescript
Просто запустите npm start, и сервер разработки запустится. Теперь мы готовы работать над приложением React TypeScript!
Если вы получите следующую ошибку.
Could not find a declaration file for module 'react'.
Возьмите файл response-app-env.d.ts и измените его следующим образом.
/// <reference types="react-scripts" /> declare module 'react';
Добавление Ionic в React
Примечание: на момент написания этого поста пакет npm @ ionic / response все еще находился в альфа-версии. Процесс добавления ионных соединений может быть изменен.
Чтобы добавить Ionic в приложение, мы просто запускаем следующую команду.
npm install @ionic/react @ionic/core
Это должно добавить основной ионный каркас и дополнительные дополнения, чтобы упростить его использование в React. Ionic рекомендует использовать TypeScript, к счастью для нас, мы уже добавили TypeScript в наше приложение React.
Структура ionic зависит от пакета response-router, поэтому мы также должны установить этот пакет.
npm install react-router @types/react-router
Теперь корнем приложения должен быть IonApp, и мы должны импортировать ionic css, чтобы Ionic работал в приложении React. Откройте App.tsx и измените его на следующее.
Это приведет к следующему.
Как видите, ионная карта отображается на странице. Это означает, что мы успешно добавили Ionic в наше приложение React.
Это, конечно, очень простое приложение, но это также отличная отправная точка для разработки приложения React с использованием компонентов Ionic.
В одном из будущих постов я добавлю больше логики в текущее приложение, чтобы показать возможности ionic и React. Так что, если вас интересует больше, обязательно подпишитесь на меня здесь в среде.
Пример репо можно найти здесь:
