Как создать приложение 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