Как создать приложение To-Do с помощью Ionic + React
Введение
Недавно я использовал Ionic и React для создания очень крутых приложений, поэтому сегодня мы расскажем, как создать простое приложение для списка дел с помощью Ionic&React. Если вы не знакомы, Ionic — это кроссплатформенная веб-инфраструктура, разработанная с учетом разработки гибридных мобильных приложений.
Хотя изначально он был построен на основе AngularJS, он начал поддерживать React ранее в этом году (на момент написания этой статьи; 2019), что мы и будем использовать. сегодня, чтобы построить наше приложение.
Если вы хотите следовать этому руководству, исходный код доступен здесь.
Начало работы
Мы начнем с создания нового проекта в текстовом редакторе (в этой статье я буду использовать VSCode) и установим наши пакеты и зависимости. Используя npm, мы установим Ionic CLI.
> npm install -g ionic@latest
Затем, чтобы создать начальный проект, снова используя npm, мы запустим команды:
> ionic start todoApp blank — type=react > cd todoApp > npm start
todoApp — это название проекта. Вы можете сделать это по своему усмотрению.
Отсюда проект будет построен на локальном хосте, и он должен автоматически открыть ваш веб-браузер по умолчанию.
Подготовка к кодированию
Перед тем, как перейти к коду, я лично предпочитаю набросать несколько вещей, вы можете пропустить эту часть, если хотите, или если вы уже выполнили этот шаг заранее.
Я хотел бы отметить, какие функциональные возможности я хотел бы поддерживать в своем приложении к моменту его завершения, и что мне нужно для этого. Для целей этого руководства нам просто нужен базовый пользовательский интерфейс и добавление/удаление функций для приложения.
Для UI нам понадобится несколько вещей, упакованных в рамках Ionic.
=› Ionic List, Ionic Checkbox, Ionic Item, Ionic Label, Ionic Fab/FabButton, Ionic Icon, Ionic Popover, Ionic Input, Ionic Button
Чтобы реализовать основные функции добавления/удаления, нам потребуется:
=› Состояние для отслеживания изменений ввода, а также существующих задач
=› Логика для обработки новых/удаления/сохранения/отображения дел
Кодирование
Первое, что мы сделаем, это разделим наше приложение на отдельные компоненты, чтобы оно было модульным и чистым. У нас будет три компонента; компонент «новая форма списка дел», компонент «элемент списка дел», компонент «отображать список дел» и компонент, в котором размещается большая часть кода пользовательского интерфейса приложения.
Создание формы списка дел:
Для этого компонента мы хотим создать форму задачи, которая обрабатывает ввод новых задач для нашего приложения. Поскольку Ionic построен на Typescript, а не на ES6, мы хотим определить нашу задачу для проверки типов. Нам нужен уникальный идентификатор для каждой задачи, чтобы иметь возможность нацеливаться на них и удалять их, а также строка для содержимого.
export interface Task { id: number; name: string; }
После импорта вышеуказанного файла .ts в наш файл NewTaskForm, а также нескольких компонентов Ionic мы хотим создать пользовательский интерфейс для этой формы.
interface Props { onChange: (event: React.ChangeEvent<HTMLInputElement>) => void; onAdd: (event: React.FormEvent<HTMLFormElement>) => void; task: Task; } export const NewTaskForm: FunctionComponent<Props> = ({ onChange, onAdd }) => ( <form onSubmit={onAdd}> <IonGrid> <IonRow> <input placeholder=”Enter new to-do here:” onChange={onChange}/> </IonRow> <br/> <IonRow> <IonButton fill=”outline” type=”submit”> Confirm </IonButton> </IonRow> </IonGrid> </form> );
Теперь, когда мы создали шаблон для нашего нового компонента формы списка дел, мы можем создать базовый пользовательский интерфейс для приложения и соединить два компонента.
Создание модального окна подсказки:
Я предпочитаю, чтобы функция «добавить новую задачу» была скрыта и вызывалась только тогда, когда вы собираетесь добавить новую задачу. По этой причине я буду кодировать минималистическую кнопку, которая при нажатии будет вызывать всплывающее окно для добавления нового списка дел.
В этом всплывающем окне мы добавим новый компонент формы списка дел, который мы только что создали выше.
<IonPopover> <IonToolbar> <IonTitle> New To-Do: </IonTitle> </IonToolbar> <NewTaskForm/> <IonButton expand=”block”> Close </IonButton> </IonPopover>
Пока мы находимся в файле Home.tsx, мы можем настроить наш интерфейс состояния для проверки типов, состояния и методов для обработки отображения/скрытия нашего всплывающего окна, добавления/удаления наших задач, а также метода onChange для обработки ввода. новое дело.
interface State { newTask: Task; tasks: Task[]; showInputPopover: boolean; } export default class App extends React.Component<{}, State> { state = { newTask: { id: 1, name: “” }, tasks: [], showInputPopover: false, }; private showPopover = () => { this.setState({ showInputPopover: true, }); }; private hidePopover = () => { this.setState({ showInputPopover: false, }); }; private addTask = (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); this.setState(previousState => ({ newTask: { id: previousState.newTask.id + 1, name: “” }, tasks: […previousState.tasks, previousState.newTask] })); }; private handleTaskChange = (event: React.ChangeEvent<HTMLInputElement>) => { this.setState({ newTask: { …this.state.newTask, name: event.target.value } }); }; private deleteTask = (taskToDelete: Task) => { this.setState(previousState => ({ tasks: [ …previousState.tasks.filter(task => task.id !== taskToDelete.id) ] })); };
Создание элемента списка дел:
Следующее, что мы создадим, — это наш компонент, который берет каждую задачу и связывает с ней кнопку, которая обрабатывает функцию удаления.
interface Props { task: Task; onDelete: (task: Task) => void; } export const TaskListItem: FunctionComponent<Props> = ({ task, onDelete }) => { const onClick = () => { onDelete(task); }; return ( <IonList> <IonGrid> <IonRow> <IonCol> {task.name} </IonCol> <IonCol> <IonIcon name=”close” onClick={onClick}/> </IonCol> </IonRow> </IonGrid> </IonList> ); };
Отображение списка дел в приложении:
Далее мы создадим наш компонент, который использует .map для отображения каждой задачи.
interface Props { tasks: Task[]; onDelete: (task: Task) => void; } export const TasksList: FunctionComponent<Props> = ({ tasks, onDelete }) => ( <ul> {tasks.map(task => ( <TaskListItem task={task} onDelete={onDelete} /> ))} </ul> );
И вот, мы почти закончили! С этого момента мы закончили создание всех наших компонентов, и нам просто нужно связать все вместе. Это включает в себя вызовы методов для кнопок, такие как обработка отображения и скрытия нашего всплывающего окна, а также изменение нашего ввода и тому подобное.
Как только все подключено, протестировано и подтверждено в работе на локальном хосте, все готово!
Если ваша компания нуждается в очень талантливой, коммуникативной разработке программного обеспечения с использованием Ionic и React, не смотрите дальше и свяжитесь с нами: (416) 524 6016 или посетите наш веб-сайт: BenchMarked Studios