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

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

Предпосылки для создания списка дел

Прежде чем приступить к этому проекту, необходимо выполнить несколько требований. Вам необходимо иметь базовое понимание следующих элементов: HTML, CSS, JavaScript, ES6и Реакт. Вам нужно иметь Node.js и npm, менеджер пакетов JavaScript. Вам также понадобится редактор кода, например Visual Studio Code.

Вот CSS, который будет использовать этот проект:

/* стили.css */
.Приложение {
семейство шрифтов: без засечек;
отображать: сгибаться;
выравнивание содержания: центр;
выравнивание элементов: центр;
высота: 100вх;
}
.Делать {
фоновый цвет: пшеница;
выравнивание текста





instagram viewer
: центр;
ширина: 50%;
набивка: 20пикс.;
коробка-тень: RGBA(0, 0, 0, 0.24) 0пикс. 3пикс. 8пикс.;
допуск: авто;
}

ул {
список стилей: никто;
набивка: 10пикс.;
допуск: 0;
}
кнопка {
ширина: 70пикс.;
высота: 35пикс.;
фоновый цвет: песочно-коричневый;
граница: никто;
размер шрифта: 15пикс.;
вес шрифта: 800;
радиус границы: 4пикс.;
коробка-тень: RGBA(0, 0, 0, 0.24) 0пикс. 3пикс. 8пикс.;
}
.вход {
граница: никто;
ширина: 340пикс.;
высота: 35пикс.;
радиус границы: 9пикс.;
выравнивание текста: центр;
коробка-тень: RGBA(0, 0, 0, 0.24) 0пикс. 3пикс. 8пикс.;
}
.Вершина {
отображать: сгибаться;
выравнивание содержания: центр;
зазор: 12пикс.;
}
ли {
отображать: сгибаться;
выравнивание содержания: пространственно-равномерно;
выравнивание элементов: центр;
набивка: 10пикс.;
}
ли:до {
содержание: "*";
край справа: 5пикс.;
}

1. Настройка среды проекта

Этот этап включает в себя все команды и файлы, необходимые для настройки проекта. Для начала создайте новый проект React. Откройте терминал и выполните эту команду:

список дел приложения npx create-реагировать

Установка всех необходимых файлов и пакетов занимает несколько минут. Он создает новое приложение React с именем todo-list. Как только вы увидите что-то подобное, вы на правильном пути:

Перейдите в каталог только что созданного проекта с помощью этой команды:

компакт-диск список дел

Запустите свой проект локально с помощью этой команды:

запуск нпм

А затем просмотрите проект в своем браузере по адресу http://localhost: 3000/.

В папке src вашего проекта есть пара файлов, которые вам не нужны. Удалите эти файлы: App.css, Приложение.test.js, логотип.svg, отчетWebVitals.js, setupTests.js.

Обязательно ищите операторы импорта в доступных файлах и удаляйте все ссылки на удаленные файлы.

2. Создайте компонент TodoList

Это компонент, в котором мы будем реализовывать все коды, необходимые для списка дел. Создайте файл с именем «TodoList.js» в папке src. Затем, чтобы проверить, что все работает как надо, добавьте следующий код:

Импортировать Реагировать от«реагировать»;
константа Список дел = () => {
возвращаться (



Привет, мир </h2>
 </div>
 );
};
экспортпо умолчанию Список дел; 

Откройте файл App.js, импортируйте компонент TodoList и визуализируйте его внутри компонента App. Это будет выглядеть примерно так:

Импортировать Реагировать от«реагировать»;
Импортировать'./styles.css'
Импортировать Список дел от'./Список дел';
константа Приложение = () => {
возвращаться (




 </div>
 );
};
экспортпо умолчанию Приложение;

Перейдите в свой локальный браузер с запущенным localhost: 3000 и убедитесь, что написано жирным шрифтом «Hello World». Все хорошо? К следующему шагу.

3. Обработка ввода и изменения ввода

Этот шаг позволяет инициировать событие при вводе задачи в поле ввода. Импортируйте хук useState из вашего пакета React. useState — это хук React, который позволяет вам эффективно управлять состоянием.

Импортировать Реагировать, {useState} от«реагировать»;

Используйте хук useState для создания переменной состояния с именем «inputTask» с начальным значением пустой строки. Кроме того, назначьте функцию «setInputTask» для обновления значения «inputTask» на основе пользовательского ввода.

константа [inputTask, setInputTask] = useState("");

Создайте функцию с именем «handleInputChange», принимая параметр события. Он должен обновить состояние inputTask с помощью функции setInputTask. Получите доступ к значению цели события с помощью event.target.value. Это будет выполняться всякий раз, когда значение поля ввода изменяется.

константа дескрипторInputChange = (событие) => {
 setInputTask (событие.цель.значение);
}; 

Верните пару элементов JSX. Первый — это заголовок, который гласит «Мой список дел», вы можете выбрать любой заголовок, который вам нравится. Включите пару атрибутов в ваши элементы ввода. тип = «текст»: это указывает ваш тип ввода как текст, значение = {inputTask}: это связывает значение поля ввода с переменной состояния inputTask, гарантируя, что оно отражает текущее значение.onChange={handleInputChange}: вызывает функцию handleInputChange при изменении значения поля ввода, обновляя состояние inputTask.

"Делать">
Мой список дел</h1>
"Вершина">
"вход" тип="текст" значение = {inputTask}
 onChange={handleInputChange} заполнитель="Введите задачу" />

Двигаясь дальше, создайте кнопку, которая добавит введенную задачу в список.

"кнопка">ДОБАВИТЬ</button>
 </div>
</div>

На этом этапе так будет выглядеть вывод вашего браузера.

4. Добавьте функционал к кнопке «ДОБАВИТЬ»

Использовать использование состояния ловушка для создания переменной состояния с именем «список» с начальным значением пустого массива. Переменная setList хранит массив задач на основе пользовательского ввода.

константа [список, setList] = useState([]);

Создайте функцию handleAddTodo, которая будет запускаться, когда пользователь нажимает кнопку «ДОБАВИТЬ», чтобы добавить новую задачу. Он принимает параметр todo, который представляет новую задачу, введенную пользователем. Затем создайте объект newTask с уникальным идентификатором, сгенерированным с помощью Math.random(), и свойством todo, которое содержит входной текст.

Двигаясь дальше, обновите состояние списка, используя оператор распространения […list], чтобы создать новый массив с существующими задачами в списке. Добавьте newTask в конец массива. Это гарантирует, что мы не изменим исходный массив состояний. Наконец, сбросьте состояние inputTask до пустой строки, очищая поле ввода, когда пользователь нажимает кнопку.

константа обработатьAddTodo = (делать) => {
константа новая задача = {
 идентификатор: Математика.случайный(),
 дело: дело
 };
 УстановитьСписок([...список, новаяЗадача]);
 установитьInputTask('');
}; 

Включить по щелчку атрибут элемента кнопки с текстом «ДОБАВИТЬ». При нажатии вызывается обработатьAddTodo функция, которая добавляет новую задачу в состояние списка

 handleAddTodo (inputTask)}> ДОБАВИТЬ</button> 

На этом этапе вывод вашего браузера будет выглядеть так же, но если вы нажмете кнопку «ДОБАВИТЬ» после ввода задачи, поле ввода будет пустым. Если все работает нормально, переходим к следующему шагу.

5. Добавьте кнопку «Удалить»

Это последний шаг, позволяющий пользователям удалить свою задачу, если они допустили ошибку или выполнили задачу. Создайте функцию handleDeleteTodo, которая действует как обработчик событий, когда пользователь нажимает кнопку «Удалить» для определенной задачи. В качестве параметра принимает идентификатор задачи.

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

константа обработатьDeleteTodo = (идентификатор) => {
константа новыйСписок = список.фильтр((делать) =>
 todo.id !== идентификатор
 );
 установить список (новый список); 
};

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

Получите доступ к свойству todo каждого объекта todo. наконец, создайте кнопку, которая при нажатии запускает функцию handleDeleteTodo с идентификатором соответствующей задачи в качестве параметра, что позволяет нам удалить задачу из списка.

<ул>
{ список.карта((делать) => (
<лиclassName="задача"ключ={todo.id}>
 {todo.todo}
<кнопкапо щелчку={() => handleDeleteTodo (todo.id)}> Удалитькнопка>
ли>
))}
ул>

Вот как должен выглядеть ваш окончательный код:

Импортировать Реагировать, {useState} от«реагировать»;
константа Список дел = () => {
константа [inputTask, setInputTask] = useState('');
константа [список, setList] = useState([]);
константа обработатьAddTodo = () => {
константа новая задача = {
 идентификатор: Математика.случайный(),
 задача: inputTask
 };
 Сет-лист([...список, новое задание]);
 установитьInputTask('');
 };
константа обработатьDeleteTodo = (идентификатор) => {
константа новыйСписок = список.фильтр((делать) => todo.id !== id);
 установить список (новый список);
 };
константа дескрипторInputChange = (событие) => {
setInputTask(событие.цель.ценить);
 };
возвращаться (
<дивclassName="Делать">

Мой То-ДелатьСписок

<дивclassName="Вершина">
<входclassName="вход"тип="текст"ценить={inputTask}
 onChange={handleInputChange} заполнитель="Введите задачу" />
<кнопкаclassName="кнопка"по щелчку={handleAddTodo}>ДОБАВЛЯТЬкнопка>
див>
<ул>
 { список.карта((делать) => (
<лиclassName="задача"ключ={todo.id}>
 {todo.todo}
<кнопкапо щелчку={() => handleDeleteTodo (todo.id)}>
Удалить
кнопка>
ли>
 ))}
ул>
див>
 );
};
экспортпо умолчанию Список дел; 

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

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

Используйте проекты реального мира, чтобы изучить React

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