Приложение My Todo List с использованием React Js

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

Пс. Нажмите здесь 🚀, чтобы открыть приложение, и нажмите здесь, чтобы просмотреть репозиторий GitHub.

Государственное управление

React — это библиотека, управляемая состоянием, это означает, что состояние приложения todo выше хранится в переменных, и изменения в этих переменных приводят к соответствующим изменениям в пользовательском интерфейсе. В этом приложении Todo состояние управляется с помощью хука useState.

Реагировать на крючок

React Hook — это новая функция в React, которая позволяет разработчикам добавлять состояние и другие функции React к функциональным компонентам. До React Hooks только компоненты класса могли иметь методы состояния и жизненного цикла, с тех пор это изменилось с введением React Hooks, состояние и другие встроенные крючки могут быть добавлены к функциональным компонентам, что делает их гораздо более универсальными и полезными.

React Hooks включает в себя встроенные хуки, такие как useState, useEffect, useContext и другие, а также возможность создавать собственные пользовательские хуки для совместного использования логики между компонентами. Они были представлены в React 16.8 и с тех пор стали популярным способом написания чистых и многократно используемых компонентов.

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

Анализ нашего приложения Todo

В приложении Todo хук useState принимает в качестве аргумента начальное значение, указанное ниже, и возвращает массив, содержащий текущее значение состояния, и приведенную ниже функцию для его обновления.

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

const [todos, setTodos] = useState([]);

а второй вызов создает переменную newTodo, которая используется для хранения значения поля ввода, в которое вводятся новые задачи.

const [newTodo, setNewTodo] = useState('');

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

Обработка событий

Компоненты React могут реагировать на события, такие как клики, отправка форм и ввод с клавиатуры, путем определения обработчиков событий. В приложении списка задач мы определяем несколько обработчиков событий для обработки различных типов событий.

Обработчик события handleChange вызывается всякий раз, когда пользователь вводит что-либо в поле ввода. Он обновляет переменную newTodo новым значением, что, в свою очередь, запускает повторную визуализацию компонента TodoList.

const handleChange = event => {
    setNewTodo(event.target.value);
  };

Обработчик события handleSubmit вызывается при отправке формы. Он добавляет новую задачу в массив задач, сбрасывает переменную newTodo и предотвращает отправку формы на сервер.

const handleSubmit = event => {
    event.preventDefault();
    setTodos([...todos, newTodo]);
    setNewTodo('');
  };
const handleDelete = index => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

Обработчик события handleDelete вызывается, когда пользователь нажимает кнопку «Удалить» рядом с задачей. Он удаляет задачу из массива задач, что вызывает повторную визуализацию компонента TodoList.

Визуализация компонентов

Компоненты React отвечают за отрисовку пользовательского интерфейса. В приложении списка задач определен один компонент — компонент TodoList, который отвечает за отображение всего списка задач.

Компонент TodoList определен как функциональный компонент, что означает, что это функция, которая возвращает элемент React (пользовательский интерфейс компонента). Он использует метод карты, чтобы перебирать массив задач и отображать каждую задачу как элемент списка.

{todos.map((todo, index) => (
            <li key={todo} className="todo-item">
              {todo}
              <button type="button" onClick={() => handleDelete(index)}>
                Delete
              </button>
            </li>
          ))}

Наконец, компонент TodoList экспортируется как экспорт модуля по умолчанию, что означает, что его можно импортировать и использовать в других частях списка дел application.export по умолчанию;

export default TodoList;

Заключение

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

Спасибо за прочтение!

Теперь иди строй 🚀🚀🚀