Учебное пособие по приложению React Todo

СОЗДАНИЕ ПРИЛОЖЕНИЯ TODO С REACT

Учебное пособие по приложению React Todo

Учебник ReactJS по созданию потрясающего приложения Todo

В этом посте я объясню, как создать приложение Todo с помощью React (библиотека JavaScript для создания пользовательских интерфейсов) с синтаксисом ES6 и хуками React с нуля. Это будет очень простое приложение с полем ввода для ввода элемента Todo и кнопкой удаления рядом с каждым элементом для удаления элемента. Кроме того, мы будем использовать хук useState из React, чтобы сохранить состояние нашего приложения и некоторые расширенные функции JavaScript, такие как map(), массивspread, ternary operator и filter()методы. Цель этого руководства — помочь вам начать работу с React.

Полный код проекта можно найти здесь.

Предпосылки

Убедитесь, что установлено следующее:

NodeJS и NPM — Страница загрузки
Создать приложение React — Руководство по установке

Настраивать

Первый шаг — создать новое приложение React с помощью инструмента командной строки create-react-app. Мы создадим новый каталог, а затем создадим приложение React внутри только что созданного каталога. Вы можете использовать следующие команды для выполнения этой задачи.

1 $ mkdir react-todo-app
2 $ cd react-todo-app
3 $ create-react-app ./

Чтобы начать с нуля, давайте удалим из папки src все, кроме файлов App.js и index.js. Внутри App.js удалите все, кроме родительского заголовка, и добавьте к нему элемент h1element <h1> React Todo App </h1> . Чтобы увидеть свое приложение в действии, запустите npm start в окне терминала в корне вашего проекта.

Этот коммит GitHub отражает изменения до этого момента.

CSS и стиль

На данный момент мы создали очень простое приложение, содержащее только один элемент h1. Но прежде чем двигаться дальше, давайте добавим нашему приложению несколько основных стилей, чтобы оно выглядело великолепно. Создайте файлApp.css в каталоге src и импортируйте его в файл App.js. Добавьте стили из этого списка в файл App.css.

Вы можете сравнить свой проект с этим коммитом GitHub.

Создание начального макета

Мы начнем с простого макета с полем input и полем button для добавления нового элемента Todo. В файле App.js создайте новый div с классом input-wrapper в родительском div.

Создание и отображение задач

Этот раздел состоит из следующих шагов:

1. Создайте новый элемент Todo

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

Мы будем использовать useStateв этом приложении, чтобы отслеживать каждый новый элемент Todo и список Todo. Но сначала внутри App.jsfile мы импортируем useStatehook следующим образом:

import { useState } from "react";

Для начала мы создадим todostate (геттер) с undefinedvalue и метод setTodo(сеттер) для установки текущего значения todoitem:

const [todo, setTodo] = useState("");

Поля ввода имеют обработчик onChangeevent, который срабатывает каждый раз, когда изменяется значение этого поля. Этот обработчик событий не предоставляет значение напрямую, а вместо этого предоставляет объект event, который можно использовать для получения значения с помощью event.target.value.

Функция setTodosetter будет прикреплена к обработчику событий onChange, который будет передавать значение ввода в функцию установки через event.target.value. Значение из ввода впоследствии используется методом установки для обновления состояния todo.

Вы можете сравнить свой проект с этим коммитом GitHub.

2. Добавить элемент Todo в список Todos

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

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

Далее создадим onClickфункциюaddTodo, чтобы добавить todo элемент в массив Todos. Эта функция будет запущена при нажатии кнопки Add. Важно помнить, что состояние никогда не должно изменяться напрямую. Поэтому нам нужно будет сделать копию массива Todos, прежде чем добавлять в него элементы todo. Чтобы скопировать массив Todos и добавить в него элемент todo, мы будем использовать оператор Array spread.

const addTodo = () => {
    setTodos([...todos, todo]);
};

Мы хотим убедиться, что значение не пустое при добавлении нового элемента Todo в список. Это можно сделать с помощью оператора if в нашей функции addTodo, которая проверяет наличие пустого значения. Кроме того, после добавления значения ввода в список задач мы хотим очистить поле ввода.

Наконец, мы передадим эту функцию обработчику onClickкнопки Add.

<button className="add-button" onClick={addTodo}>

Этот коммит GitHub отражает полный код до этого момента.

3. Отображение задач

Мы создадим ulс классом todo-list для отображения записей из списка Todos. Мы пройдемся по элементам массива с помощью метода map(), а затем покажем их как liвнутри ulэлемента. Мы будем вызывать метод map() с двумя аргументами: значением текущего обрабатываемого элемента в массиве и его индексом. Для нашей цели indexбудет использоваться как ключ li.

Мы создадим новый divс классом todoдля каждого элемента в списке Todos. У этого divбудет liэлемент и deleteкнопка для его удаления.

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

Вы можете сравнить свой проект с этим коммитом GitHub до этого момента.

Удаление элементов Todo

Начнем с создания функции onClick, которая срабатывает при нажатии кнопки удаления. В этой функции удаления будет использоваться метод filter(), который создаст новый массив со всеми элементами, соответствующими установленным критериям. В нашем примере мы хотим создать новый массив Todos, содержащий все элементы, кроме удаляемого. Наконец, обновите состояние с помощью вновь созданных задач.

Передайте метод deleteTodo обработчику onClick кнопки delete.

Код к этому пункту вы можете найти здесь.

Рефакторинг кода

Чтобы собрать пользовательский ввод и показать элементы Todos, мы можем перестроить наше приложение, создав два независимых компонента, TodoInputи TodoList. В каталоге src создайте два файла: TodoInput.jsи TodoList.js. Заполните каждый файл содержимым, указанным в фрагментах кода ниже:

Наконец, импортируйте эти два компонента в компонент App.js:

Теперь, когда вы знакомы с основами, пришло время запачкать руки и начать создавать свое первое приложение React. Удачи и счастливого кодирования🎉🎉🎉

Учебное пособие по приложению React Todo

СОЗДАНИЕ ПРИЛОЖЕНИЯ TODO С REACT