От автора: Ionic недавно добавил поддержку React; поэтому теперь разработчики React могут использовать преимущества Ionic для создания гибридных мобильных приложений и прогрессивных веб-приложений (PWA). В этой статье мы покажем вам, как начать использовать Ionic с React, создав простое демонстрационное приложение с нуля.
Что вам необходимо
Чтобы следовать этому руководству, вам понадобятся следующие предварительные условия:
последние версии Node.js и npm, установленные в вашей системе,
опыт работы с TypeScript и React.
Вы можете проверить, установлена ли у вас последняя версия Node.js (v10), выполнив следующую команду:
node -v
Представляем React и Ionic
Давайте начнем с краткого введения в React и Ionic. По информации официального сайта: «React — это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов. Она позволяет создавать сложные пользовательские интерфейсы из небольших и изолированных частей кода, называемых «компонентами».
React фокусируется на создании пользовательских интерфейсов и не предоставляет никаких встроенных инструментов для общих задач, необходимых для веб-разработки, таких как выборка удаленных данных и маршрутизация, поэтому вам придется использовать для этого некоторые сторонние библиотеки.
По информации сайта Ionic: «Ionic Framework — это бесплатный инструментарий мобильного интерфейса с открытым исходным кодом для разработки высококачественных кроссплатформенных приложений для iOS, Android и Веб — и все это из единой базы кода».
По сути, это набор компонентов пользовательского интерфейса, которые можно использовать с простым JavaScript или любой популярной интерфейсной средой или библиотекой, такой как Angular, React или Vue, для создания гибридного мобильного приложения и PWA.
В этом руководстве мы будем использовать некоторые компоненты Ionic UI, такие как:
IonMenu: с его помощью панель навигации будет выдвигаться из боковой стороны текущего представления.
IonToolbar: эти верхние панели располагаются выше или ниже содержимого.
IonHeader: этот родительский компонент содержит компонент панели инструментов.
IonContent: этот компонент предоставляет область содержимого с методами управления прокручиваемой областью и другими элементами. Вам нужен только один компонент контента внутри одного представления.
IonList: этот компонент содержит элементы с аналогичным содержимым данных, таким как изображения и текст. Он состоит из объектов IonItem.
IonItem: этот компонент может содержать текст, иконки, аватары, изображения, входные данные и любые другие собственные или пользовательские элементы.
IonButton: этот компонент предоставляет интерактивный элемент, который можно использовать в форме или в любом месте, где требуется простой, стандартный функционал кнопок.
Установка Ionic CLI V5
Интерфейс командной строки (CLI) Ionic, версия 5, поддерживает создание проектов Ionic на основе React. Итак, начнем с установки инструмента из npm. Откройте CLI и выполните следующую команду:
npm install -g ionic
На момент написания, Ionic CLI v5.2.3 является последней.
Примечание:* В зависимости от того, как вы установили Node.js в своей системе, вам может потребоваться добавить sudo перед командой на macOS или Linux, или запустить командную строку с правами администратора в Windows, если вы получите какие-либо ошибки доступа. Вы также можете просто исправить права доступа npm или использовать такой инструмент, как nvm.*
Затем установите Cordova Resources(который используется для локального создания ресурсов Cordova) и Native Run (используется для развертывания двоичных файлов приложений на устройствах):
npm install -g cordova-res native-run
Они необходимы только в том случае, если вы хотите протестировать приложение на реальном мобильном устройстве или эмуляторе.
Создание проекта React и Ionic
Теперь давайте создадим проект на основе React. Вернитесь к терминалу, убедитесь, что вы находитесь в рабочем каталоге, и выполните следующую команду:
ionic start myApp --type=react
Мы используем —type=react для создания проекта на основе React. Затем вам нужно будет выбрать стартовый шаблон из доступных. Давайте выберем стартовый шаблон sidemenu с боковым меню и навигацией.
После создания проекта и установки зависимостей вы можете обслуживать свое приложение локально, используя следующие команды:
cd ./myApp ionic serve
Ваше приложение будет доступно по адресу http://localhost:8100, и вы можете использовать веб-браузер, чтобы начать экспериментировать с ним.
Ionic называется гибридной мобильной платформой, потому что она использует веб-технологии, которые изначально были предназначены для создания веб-приложений, наряду с собственным контейнером (Cordova или Capacitor), для создания мобильных приложений без использования нативных технологий для целевых платформ, таких как Java или Kotlin для Android или Swift для iOS.
Поскольку ваше мобильное приложение на самом деле является веб-приложением, вы можете выполнять большую часть разработки, тестируя в веб-браузере без использования эмулятора или реального мобильного устройства, за исключением тестирования нативных функций устройства, таких как камера или хранилище SQLite. Фактически, даже возможно использовать определенные методы, чтобы имитировать плагины, которые предоставляют нативные функции, и выполнять полное тестирование во время разработки в веб-браузере.
Очистка проекта
У нас есть базовая структура приложения, с двумя страницами (home и list) и меню. Давайте удалим страницу списка, так как это всего лишь стандартный код.
Сначала удалите файл src/pages/List.tsx, затем откройте файл src/App.tsx и удалите запись для страницы списка из массива appPages:
const appPages: AppPage[] = [ { title: 'Home', url: '/home', icon: home } ];
Также удалите импорт страницы списка из файла:
import List from './pages/List';
Далее удалите <Route path=»/:tab(home)/list» component={List} exact={true} /> из компонента App:
const App: React.FunctionComponent = () => ( <IonApp> <IonReactRouter> <IonSplitPane contentId="main"> <Menu appPages={appPages} /> <IonPage id="main"> <IonRouterOutlet> <Route path="/:tab(home)" component={Home} exact={true} /> <Route exact path="/" render={() => <Redirect to="/home" />} /> </IonRouterOutlet> </IonPage> </IonSplitPane> </IonReactRouter> </IonApp> ); export default App;
Компонент App является корневым компонентом, который визуализируется с помощью нашего приложения. Если вы откроете файл src/index.tsx, вы найдете следующий код:
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));
Метод render() используется для визуализации элемента React в DOM в предоставленном элементе root.
Настройка темы приложения
Создав, обслужив и очистив наш проект Ionic, давайте теперь посмотрим, как мы можем изменить цвета пользовательского интерфейса, чтобы он выглядел более профессионально.
Давайте начнем с бокового меню. Откройте файл src/components/Menu.tsx и добавьте к компонентам IonToolbar, IonContent, IonList и IonItemUI атрибут color со значением primary:
const Menu: React.FunctionComponent = ({ appPages }) => ( <IonMenu contentId="main"> <IonHeader> <IonToolbar color="primary"> <IonTitle>Menu</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary"> <IonList style= {{ background : '#3880ff'}} color="primary"> {appPages.map((appPage, index) => { return ( <IonMenuToggle key={index} auto-hide="false"> <IonItem color="primary" href={appPage.url}> <IonIcon slot="start" icon={appPage.icon} /> <IonLabel>{appPage.title}</IonLabel> </IonItem> </IonMenuToggle> ); })} </IonList> </IonContent> </IonMenu> );
Ionic предоставляет некоторые цвета по умолчанию (primary, secondary, tertiary, success, warning, danger, light, medium и dark), которые можно использовать для изменения цвета компонентов пользовательского интерфейса. Цвет может быть применен к компоненту, чтобы изменить цвета по умолчанию с помощью атрибута color. Эти цвета имеют значения по умолчанию, но вы можете настроить их с помощью некоторых предопределенных переменных CSS.
Это скриншот нашего меню:
Далее давайте изменим цвет домашней страницы. Откройте файл src/pages/Home.tsx и установите для атрибута color компонентов IonToolbar и IonContent значение primary:
const HomePage: React.FunctionComponent = () => { return ( <> <IonHeader> <IonToolbar color="primary"> <IonButtons slot="start"> <IonMenuButton /> </IonButtons> <IonTitle>Home</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary" > </IonContent> </> ); };
Это скриншот страницы:
Установка Axios и использование REST API
Мы рассмотрим, как установить Axios и использовать сторонний RESTful API в приложении, а также, как отображать извлеченные данные с помощью карты Ionic и компонентов списка.
Настроив тему приложения, давайте теперь посмотрим, как получать данные с помощью Axios. Мы будем использовать сторонний API, доступный на NewsAPI.org.
Во-первых, нам нужно получить ключ API, чтобы мы могли взаимодействовать с ним. Перейдите на страницу регистрации, введите свои данные и зарегистрируйте учетную запись. Вам будет предоставлен ключ API; скопируйте его, и давайте продолжим.
Вернитесь к терминалу и выполните следующую команду, чтобы установить Axios:
npm install axios --save
Затем откройте файл src/pages/Home.tsx и начните с импорта Axios и IonButton:
import { IonButton } from '@ionic/react'; import axios from 'axios';
Затем определите постоянные переменные API_KEYи URL:
const API_KEY = "<YOUR_API_KEY_HERE>"; const URL = `https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${API_KEY}`;
В переменную URL добавим конечную точку, чтобы получить верхние заголовки из нашего источника, TechCrunch. Вы можете использовать любой источник из доступных.
Примечание. Не забудьте поместить в переменную API_KEY собственный ключ API.
Затем следующим образом определите метод fetchArticles():
const fetchArticles = () => { return axios({ url: URL, method: 'get' }).then(response => { console.log(response); return response.data; }) };
Мы просто вызываем метод axios() для отправки запроса GET к конечной точке, и результатом метода является promise, который необходимо разрешить для получения данных новостей.
Затем обновите компонент HomePage следующим образом, чтобы вызвать метод fetchArticles() и разрешить возвращенный promise:
const HomePage: React.FunctionComponent = () => { const [articles, setArticles] = React.useState([]); const items: any[] = []; React.useEffect(() => { fetchArticles().then(data => setArticles(data.articles)); }, []); return ( <> <IonHeader> <IonToolbar color="primary"> <IonButtons slot="start"> <IonMenuButton /> </IonButtons> <IonTitle>Home</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary" > <IonList color="primary"> { articles.map(a => { return ( <IonItem> {a['title']} <IonButton href={a['url']} color="primary" slot="end">Read</IonButton> </IonItem> ); }) } </IonList> </IonContent> </> ); };
В функциональном компоненте мы сначала вызываем хук React useState(), чтобы создать переменную состояния articles, которая будет содержать новостные статьи после того, как мы получим их из API.
useState() возвращает переменную состояния, которая содержит пустой массив в качестве исходного значения и функцию, которую мы можем использовать для изменения значения переменной. Мы используем деструктурирующее присваивание, чтобы распаковать значения из возвращенной пары в различные переменные (то есть articles и setArticles()).
Далее мы вызываем хук useEffect() для выполнения побочного эффекта в нашем компоненте. В нашем случае побочным эффектом является получение данных из API новостей с помощью метода fetchArticles(), который возвращает promise. Как только promise разрешен, мы вызываем метод setArticles() для присвоения данных новостей переменной articles.
И useState(), и useEffect() являются встроенными хуками React, которые были представлены в React 16.8; они просто позволяют вам использовать состояние и другие функции React без необходимости писать класс. Хук useEffect() эквивалентен вызову методов жизненного цикла componentDidMount, componentDidUpdate и componentWillUnmount, объединенных в компоненты на основе класса.
Наконец, в шаблоне представления мы перебираем массив articles, используя метод map(), и отображаем заголовок каждой новостной статьи внутри элемента IonItem компонента IonList, а также кнопку, которая переносит нас на страницу полной статьи.
Это скриншот страницы:
Вы можете найти исходный код в этом репозитории GitHub.
Заключение
В этом руководстве мы использовали Ionic и React и для создания простого мобильного приложения, которое извлекает и отображает новостные данные из стороннего API с помощью клиента Axios. Мы также рассмотрели, как использовать хуки React, а именно — хуки useState() и useEffect() — для создания состояния и выполнения побочных эффектов внутри компонентов функции React. Мы увидели, как легко с помощью Ionic создать проект на основе React, и как мы можем оформить тему приложения, используя атрибуты компонентов color.
Автор: Ahmed Bouchefra
Источник: https://www.smashingmagazine.com
Редакция: Команда webformyself.