Реагировать 101

Оригинальная статья опубликована в моем блоге

Обновлять

Эта статья изначально была опубликована с использованием компонентов React на основе классов. Но учитывая тот факт, что функциональные компоненты теперь стали нормой, я бы предоставил функциональный эквивалент App компонента с useState React hook. Наслаждайтесь! 😊

Вступление

Создание приложения со списком дел - отличный способ бросить вызов самому себе после понимания основ React Js. Это начальный проект, который поможет укрепить базовые концепции, такие как состояние, компоненты, виртуальная модель DOM и все, что у вас есть.

Я хотел бы провести вас через шаги по созданию простого приложения To-do и посоветовать вам использовать его и добавлять любые функции, которые могут вам понравиться. Прежде чем мы начнем, вы должны знать несколько вещей:

  • Все функциональные компоненты или функции, кроме тех, которые предоставляются create-react-app, будут записаны в виде стрелочных функций.
  • Чтобы понять эту статью, вам необходимо знать основы React. (Вы можете проверить React Documentation.)
  • В этой статье не рассматривается развертывание приложения со списком дел.

Для тех, кто хочет проверить настоящий код, вот ссылка на него.

Вы также можете получить доступ к живому приложению здесь.

Обновлять

В статью добавлен репо для функционально-компонентной версии этого приложения.

Поскольку это всего лишь учебник по React, я просто опущу ссылки на файлы CSS для каждого компонента:

  1. Index.css
  2. App.css
  3. ToDoList.style.css
  4. ToDo.style.css
  5. TaskIndicator.style.css
  6. InputForm.style.css

Настройте приложение React

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

Если у вас не установлен create-react-app на вашем компьютере, вы можете начать с ознакомления с Документацией по созданию приложения React.

Следующие шаги помогут вам начать настройку приложения:

  1. Перейдите в свой терминал (если вы пользователь MAC OS / LINUX) или в командную строку (если вы пользователь Windows).

Примечание. В этой статье я буду использовать только термин терминал.

2. Измените путь к каталогу, в котором вы хотите создать приложение, с помощью команды cd:

3. Введите create-react-app <name of the app> в свой терминал и нажмите Enter. Это устанавливает и приложение, и вуаля: мы можем начать кодировать наше приложение.

Примечание. Если в сообщении ниже вы получаете такую ​​ошибку, попробуйте использовать команду sudo для переключения на root.

4. Зайдите в папку приложения и откройте в VS Code или любой другой IDE, которую вы используете:

Эскиз и структура

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

В частности, в React мы хотим знать следующее:

  • Как будут выглядеть наши компоненты
  • Какую часть компонентов следует изменить или обновить
  • Когда они изменятся

Глядя на изображение, нам нужно будет придумать три основных компонента:

  1. Форма ввода: Эта часть заботится о получении пользовательского ввода (задачи), который в конечном итоге будет отображаться в компоненте списка дел.
  2. Список дел: этот компонент служит контейнером для каждого компонента дел (задачи) и вмещает любую новую принятую задачу.
  3. Индикатор задачи: этот компонент отображает количество задач, которые у вас есть на данный момент.

Так же, как эти компоненты изложены, вот так они будут выглядеть в нашем приложении. Нам нужно будет включить компонент списка дел для каждой задачи, и, наконец, наш App.js файл будет содержать все эти компоненты (это уже предоставлено нам create-react-app.)

После завершения настройки у нас будет src структура нашего приложения, которая выглядит следующим образом:

Как вы можете видеть здесь, мы создали папку component в папке src для размещения всех отдельных и повторно используемых компонентов. Это одно из главных преимуществ React; это помогает разбить все наше приложение на куски (компоненты многократного использования). Мы склонны видеть это преимущество больше при создании более крупных приложений.

Закодируйте приложение

Наконец, пришло время написать код для нашего приложения. Когда все наши файлы на месте, давайте начнем с компонента App, поскольку он будет содержать все наши оставшиеся компоненты.

Этот конкретный App компонент будет компонентом класса, чтобы мы могли иметь доступ к состоянию React.

Я рекомендую очистить все содержимое нашего App.js файла и начать его кодирование с нуля. Однако вы можете просто изменить его на приведенный ниже код:

Хорошо, давайте объясним, что мы уже сделали. Первое изображение просто описывает то, что нам нужно импортировать. Как вы знаете, перед написанием любого функционального или классового компонента в React мы должны импортировать React. Поскольку это компонент класса, мы также должны импортировать класс компонента React.

Затем мы импортируем функцию TaskIndicator из соответствующего файла, а также файл CSS для компонента App.

После этого мы начинаем писать наши App компоненты класса, которые расширят класс Component React и будут иметь доступ к его методам (путем вызова super()). Это дает нам доступ к свойству состояния, где мы можем объявить, что мы хотим изменить.

В случае с нашим приложением мы хотим изменить свойство задач (lists) со значениями объектов, содержащими каждую задачу и соответствующий ей id.

Затем вызывается метод render, который возвращает нужные нам компоненты в формате, подобном HTML (JSX). Первое, что мы сейчас визуализируем, - это компонент TaskIndicator, в который мы передаем number реквизиты, указывающие количество задач, оставшихся в нашем списке дел.

Посмотрим, как будет выглядеть наш TaskIndicator компонент:

Мы делаем его функциональным компонентом (поскольку он не содержит никакого состояния), который просто возвращает текст с количеством задач, которые у нас есть (используя number реквизиты, которые мы ему передали).

После применения файла CSS компонента мы должны увидеть это в нашем браузере:

Как видите, это указывает на то, что у нас есть три задачи, то есть количество объектов, присутствующих в нашем массиве lists.

Это было довольно легко, не так ли? Теперь перейдем к добавлению нашего ToDoList компонента. который примет массив lists в качестве свойств, а также будет иметь метод handleDelete, который поможет удалить любую задачу, с которой мы закончили. Метод handleDelete выглядит следующим образом:

Этот метод принимает аргумент index, который поможет отфильтровать задачу из списка с id, не равным index. Затем он изменяет состояние списка на отфильтрованную форму, используя метод this.setState().

Затем мы добавляем компонент ToDoList к методу render нашего App.js файла:

Не забудьте импортировать функцию ToDoList из файла, а затем написать функцию ToDoList :

Этот функциональный компонент выполняет итерацию по массиву lists, заданному как свойства, и возвращает компонент ToDo для каждого списка. Затем мы даем каждому ToDo компоненту следующие свойства:

  • key - эквивалент id значению в объекте списка
  • index - то же, что и key, но передается в метод handleDelete для удаления каждой задачи.
  • task - представляет каждую задачу массива lists
  • onDelete - метод handleDelete, написанный в нашем компоненте приложения

Конечно, мы импортируем наш ToDo компонент и записываем функцию в наш ToDo.component.jsx файл.

Эта часть нашего приложения, наконец, возвращает div с каждой задачей и значок Font Awesome с минусом (-), которому переданы свойства onDelete. При щелчке по этому значку соответствующая задача удаляется. Затем компонент экспортируется.

Чтобы получить доступ к значку Font Awesome, мы добавляем тег скрипта ниже в конец нашего тега body в нашем index.html файле, который находится в общей папке нашего приложения.

<script src=”https://kit.fontawesome.com/8ca81c817e.js" crossorigin=”anonymous”></script>

После всего этого наше приложение выглядит так:

Теперь о заключительном этапе нашего приложения, который создает форму ввода, которая будет принимать новые задачи и добавлять их в список. Как видно из нашего эскиза, эта форма будет содержать элемент ввода (type = text) и еще один значок Font Awesome со знаком плюс (+).

Чтобы добиться этого, нам понадобятся следующие методы:

  • handleChange метод, который заботится о любом значении, передаваемом в качестве входных данных
  • handleSubmit метод, который добавляет ввод (задачу) в список, если он не пустой

Сначала мы добавляем состояние ввода в наш компонент App:

После этого переходим к написанию наших методов handleChange и handleSubmit после конструктора.

Метод handleChange, как упоминалось ранее, просто принимает во внимание типы пользователей и устанавливает для нашего ввода это значение.

С другой стороны, наш handleSubmit метод ничего не делает, если пользовательский ввод пуст. Если пользователь в конце концов что-то пишет, он создает объект со свойством task и id и добавляет этот объект в наш список дел. При добавлении задачи форма очищается или сбрасывается.

Как и в случае с предыдущими компонентами, мы импортируем компонент InputForm из его файла и визуализируем его в нашем компоненте App:

import InputForm from ‘./components/InputForm/InputForm.component.jsx’;

Помните, что мы должны передать два метода, которые мы только что написали, в качестве свойств компонента InputForm.

Вот функция InputForm:

Мы используем все необходимые реквизиты и экспортируем наш компонент.

Обновление - функциональный компонент для App

Как вы могли заметить, переключение нашего App компонента с классового на функциональный имеет несколько модификаций.

Первое и очевидное, что мы делаем, - это меняем Class на function.
Делая это, мы теряем this контекст; следовательно, мы инициализируем все функции-дескрипторы, используя const. Нам также больше не нужен constructor, и мы можем продолжить его удаление.

Наконец, мы используем ловушку useState для инициализации нашего состояния вместо объекта this.state в конструкторе. useState позволяет вам инициализировать состояние, а также передать функцию для изменения состояния позже - точно так же, как this.state и this.setState. Разница в том, что он используется вместе с функциональными компонентами и может использоваться столько раз, сколько возможно, для указания отдельных состояний, как мы это делали для списков и ввода.

Все остальное здесь довольно просто.

Заключение

Вот и все. У нас готово приложение со списком дел. Просто добавьте необходимые стили, и наше приложение вначале будет выглядеть точно так же, как готовый продукт.

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