Рассмотрим, как с нуля создать приложение Todo (список дел) с помощью React, библиотеки JavaScript для разработки пользовательских интерфейсов, используя синтаксис ES6 и хуки React. Это будет базовое приложение с полем для ввода элемента Todo и кнопкой рядом с каждым элементом, предназначенной для его удаления.
Кроме того, мы будем использовать хук useState из React для сохранения состояния приложения и некоторые продвинутые функции JavaScript, такие как map() , массив spread , ternary operator и метод filter() . Цель этого руководства — помочь новичкам начать работу с React.
Полный код проекта можно найти здесь.
Необходимые условия
Установите следующие программы.
NodeJS и NPM (загрузить здесь).
Create React App (руководство по установке).
Установка
Для начала создадим новое приложение React с помощью инструмента командной строки create-react-app . Мы создадим новый каталог, а затем — приложение React внутри него. Для выполнения задачи можно использовать следующие команды:
Чтобы начать работу с нуля, удалим все из папки src , кроме файлов App.js и index.js . Внутри App.js удалите все, кроме родительского заголовка, и добавьте к нему h1 -элемент (
React Todo App
). Чтобы увидеть приложение в действии, запустите команду npm start в окне терминала в корне проекта.
Этот коммит на GitHub показывает изменения до настоящего момента.
CSS и стиль
Мы создали простое приложение, содержащее только один элемент h1 . Прежде чем двигаться дальше, добавим в него несколько основных стилей. Создайте файл App.css в каталоге src и импортируйте его в файл App.js . Добавьте стили из этой ссылки в файл App.css .
Можете сравнить свой проект с этим коммитом на GitHub.
Создание начального макета
Начнем с простого макета, содержащего поле input и button для добавления нового элемента Todo. В файле App.js создайте новый div с классом input-wrapper внутри родительского div .
Создание и отображение элементов Todo
1. Создание нового элемента Todo
Чтобы отслеживать состояние внутри компонента React, мы будем использовать хук useState . Он принимает начальное значение состояния и возвращает массив с двумя значениями:
функция getter , которая отображает текущее значение определенного состояния;
функция setter , обновляющая состояние.
Мы будем использовать useState в этом приложении для отслеживания каждого нового элемента Todo и списка Todo. Но сначала мы импортируем хук useState в файл App.js следующим образом:
import < useState >from "react";
Для начала создадим состояние todo (функция getter ) со значением undefined и метод setTodo (функция setter ) для установки значения текущего элемента todo .
const [todo, setTodo] = useState("");
Поля ввода снабжены обработчиком событий onChange , который срабатывает каждый раз, когда значение поля изменяется. Этот обработчик событий предоставляет не само значение, а объект event , который можно использовать для получения значения с помощью event.target.value .
Setter -функция setTodo будет присоединена к обработчику событий onChange , который передает значение входа в setter -функцию через event.target.value . Значение из входа впоследствии используется методом setter для обновления состояния todo .
Проект можно сравнить с этим коммитом на Github.
2. Добавление элемента Todo в список
После создания нового Todo нужно добавить его в список. Мы будем действовать так же, как и при создании нового элемента Todo. Нам нужно создать новый хук useState для отслеживания состояния массива Todos и добавить в него новые элементы.
const [todos, setTodos] = useState([]);
Далее создадим onClick -функцию addTodo для добавления элемента todo в массив Todos . Эта функция будет срабатывать при нажатии на кнопку Add .
Важно помнить, что состояние не должно изменяться напрямую. Поэтому необходимо сделать копию массива Todos , прежде чем добавлять в него элементы todo . Чтобы скопировать массив Todos и добавить в него элемент todo , воспользуемся оператором массивов spread .
При добавлении нового элемента Todo в список нужно убедиться в том, что значение не будет пустым . Это можно сделать с помощью оператора if в функции addTodo , который проверяет наличие пустого значения. После того, как значение входа добавляется в список Todos , нужно очистить поле ввода.
Наконец, мы передаем эту функцию в обработчик onClick кнопки Add .
className="add-button" onClick=>
Этот коммит на GitHub отражает полный код до настоящего момента.
3. Отображение элементов Todo
Мы создадим ul с классом todo-list для отображения записей из списка Todos . Будем перебирать элементы в массиве методом map() и затем отображать их как li в элементе ul . Вызовем метод map() с двумя аргументами: значением текущего обрабатываемого элемента в массиве и его индексом. В данном случае index будет использоваться в качестве ключа li .
Для каждого элемента списка Todos создадим новый div с классом todo . Этот div будет содержать элемент li и кнопку delete для его удаления.
Прежде чем отображать список, нужно убедиться в том, что он не пуст. Для отображения элементов списка будет использоваться тернарный оператор. Если список окажется пустым, мы получим соответствующее сообщение.
Проект на данном этапе можно сверить с этим коммитом на GitHub.
Удаление элементов Todo
Начнем с создания функции onClick , которая срабатывает при нажатии на кнопку удаления. В этой функции удаления будет использоваться метод filter() , который создает новый массив со всеми записями, удовлетворяющими заданным критериям. В данном примере мы создадим новый массив Todos , содержащий все элементы, кроме удаляемого. В конце нужно будет обновить состояние с помощью вновь созданных Todos .
Передаем метод deleteTodo в обработчик onClick кнопки delete .
С кодом до этого момента можно свериться здесь.
Рефакторинг кода
Чтобы собирать введенные данные и показывать элементы Todos , можно перестроить приложение, создав два независимых компонента — TodoInput и TodoList . В каталоге src создайте два файла: TodoInput.js и TodoList.js . Наполните каждый из них содержимым, указанным в приведенных ниже фрагментах кода:
Затем импортируйте эти два компонента в App.js :
Ознакомившись с основами, вы можете начать создавать свое первое приложение на React.
React: основные ошибки мидл-разработчиков
Как начать работать программистом почти без опыта
React hooks: никакой магии, только массивы
Как сделать to do list
06.02.2023
0
1 254
Приложение списка дел на JavaScript с простым интерфейсом. Эта программа создает пользовательский интерфейс HTML с текстовым вводом и кнопкой «Add task». При нажатии кнопки «Add task» текст входных данных добавляется как новая задача в элемент taskList на странице. У каждой задачи есть кнопка удаления, при нажатии которой задача удаляется из списка. Задачи хранятся в элементах HTML на странице, поэтому они не сохраняются после обновления страницы. Если вы хотите сохранить данные, вы можете использовать локальное хранилище или решение на стороне сервера.
Создание Простого Списка Дел (To-Do List) на HTML, CSS и JavaScript
В этой статье мы рассмотрим, как создать простое веб-приложение To-Do List с использованием HTML, CSS и JavaScript, включив весь код в одном файле для удобства. Список дел (To-Do List) — это популярное приложение, которое позволяет пользователям вести записи о задачах, которые им нужно выполнить. Мы создадим интерфейс, который позволит пользователям добавлять новые задачи и удалять их из списка.
listItem.querySelector(«.delete»).addEventListener(«click», function () taskList.removeChild(listItem); >);
Создание простого списка дел с использованием HTML, CSS и JavaScript — это отличный способ начать изучение веб-разработки. Этот пример показывает, как можно включить весь код в одном файле для создания простого, но полезного веб-приложения To-Do List. Вы можете дорабатывать его и добавлять новые функции, чтобы сделать его более удобным, исходя из ваших потребностей.
Создано 02.11.2023 13:03:38
Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov. Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте, то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Кнопка: Она выглядит вот так:
Текстовая ссылка: Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему. Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
// Создайте кнопку «Закрыть» и добавьте ее к каждому элементу списка var myNodelist = document.getElementsByTagName(«LI»); var i; for (i = 0; i < myNodelist.length; i++) var span = document.createElement("SPAN"); var txt = document.createTextNode(«\u00D7»); span.className = «close»; span.appendChild(txt); myNodelist[i].appendChild(span); >
// Нажмите на кнопку «Закрыть», чтобы скрыть текущий элемент списка var close = document.getElementsByClassName(«close»); var i; for (i = 0; i < close.length; i++) close[i].onclick = function() var div = this.parentElement; div.style.display = «none»; > >
// Добавить «checked» символ при нажатии на элемент списка var list = document.querySelector(‘ul’); list.addEventListener(‘click’, function(ev) if (ev.target.tagName === ‘LI’) ev.target.classList.toggle(‘checked’); > >, false);
// Создайте новый элемент списка при нажатии на кнопку «Добавить» function newElement() var li = document.createElement(«li»); var inputValue = document.getElementById(«myInput»).value; var t = document.createTextNode(inputValue); li.appendChild(t); if (inputValue === ») alert(«Вы должны что-то написать!»); > else document.getElementById(«myUL»).appendChild(li); > document.getElementById(«myInput»).value = «»;
var span = document.createElement(«SPAN»); var txt = document.createTextNode(«\u00D7»); span.className = «close»; span.appendChild(txt); li.appendChild(span);
for (i = 0; i < close.length; i++) close[i].onclick = function() var div = this.parentElement; div.style.display = «none»; > > >
