Всем привет! В этой статье мы сделаем простой проект-список дел на react. Данная статья поможет новичкам разобраться с реакт хуками, понять компонентный подход и закрепить свои знания на практике. Начнем!
Создание react-проекта.
Создайте папку для вашего проекта и откройте ее в редакторе кода. Мы будем использовать visual studio code. В терминале напишите
npx create-react-app my-app
my-app - название вашего проекта. Если вы хотите развернуть проект в уже открытой папке, то просто напишите точку.
npx create-react-app .
После создания проекта, нужно удалить лишние файлы. У нас останутся app.js, app.css, index.js, index.css и в папке public index.html. В index.html убираем лишнее и запускаем проект через терминал:
npm start
Теперь приступим к разработке !
Создание компонентов.
Создаем папку components, в ней будут храниться наши компоненты. В папке components создаем папку todoTitle, а в ней index.js и style.module.css. Это будет компонент для создания названия списка.
Наш компонент принимает название и возвращает стилизованный заголовок. В стилях указываем размер шрифта и расположение по центру. Подключаем наш компонент в app.js и передаем ему название:
Далее нам нужно создать компонент формы для добавления новой задачи. В нем будет инпут и кнопка:
Создаем новую папку todoForm, в ней так же index.js и style.module.css. В TodoForm мы возвращаем форму с инпутом и кнопкой, добавляем для них классы. Для инпута указываем placeholder. Теперь чтобы мы могли видеть то, что мы вводим и могли использовать это значение , мы создаем локальное состояние при помощи хука useState. В инпут добавляем value, которое равно нашему состоянию и добавляем onChange, который будет наше состояние менять. Теперь при каждой введенной букве в инпут, будет меняться наше состояние.
При нажатии на кнопку ничего не будет происходить, нужно это исправить. Создаем новую папку с названием hooks и добавляем туда файл useTodo.js
Сейчас мы создадим свой хук для работы с состоянием списка дел:
Наш хук использует внутри себя хук useState для создания состояния дел. Также мы создаем функции для удаления и сохранения. То есть, мы вынесли логику по работе с состоянием списка дел в отдельный хук. Теперь в app.js воспользуемся нашим хуком:
Передаем функцию по сохранению дел в компонент TodoForm.
Теперь обновим наш компонент:
В форме добавляем onSubmit, при срабатывании будет сохраняться дело и очищаться инпут. Чтобы не было перезагрузки страницы мы используем preventDefault(). На кнопку добавляем type='submit'. Теперь мы можем сохранить дело в наш массив дел, но они все еще не отображаются. Давайте сделаем отображение нашего списка!
Отображение списка дел.
Создаем новый компонент todoList, который принимает список и с помощью map для каждого элемента будет возвращать компонент todoItem, в который передаем функцию для удаления дела, само дело, и index элемента в массиве для удаления.
Компонент todoItem.
В компоненте todoItem отображаем название дела и кнопку для удаления.
Теперь нужно подключить все к app.js:
Итог:
Вот такое просто приложение у нас получилось. В следующей части мы добавим возможность создавать разные списки, отмечать выполненные и добавлять описание для дела.
Подписывайтесь на нашу группу и ставьте лайки, чтобы не пропустить новую часть!