search

tel-ran-de / FE-24-m

2 stars 0 forks source link

FE 2022-06-17 React Context useContext #34

Open Nolra opened 2 years ago

Nolra commented 2 years ago

Повторяем теорию Context https://ru.reactjs.org/docs/context.html https://ru.reactjs.org/docs/hooks-reference.html#usecontext Code: https://github.com/tel-ran-de/FE-24-m/tree/fe-06-17-react-context

Начинаем делать проект Uno Todo Макет:https://www.figma.com/file/RSatV8yVX1LdWYQFoZhy4p/Uno-To-Do-App-(Community)?node-id=4395%3A35776 Код изначальной структуры проекта: https://github.com/tel-ran-de/FE-24-m/tree/fe-06-17-uno-todo-start

Задачи: Пока игнорируем существование SideBar, работаем только с TodoList, TodoContainer.

TodoList: 1) Определиться со структурой единицы данных todo (содержимое объекта) - title,note,date,completed,important,id. 2) Задать дефолтный массив с тремя объектами todo и при определении State и рендерить их в компоненте TodoList 3) TodoList должен импортировать компонент TodoBox и рендерить todo через него. Пока только это, никаких действий в TodoBox делать не нужно, можно просто отобразить todo.title. 4) Сделать кнопку "add a task" в TodoList, никаких действий пока с ней производить не нужно - просто верстка.

TodosContainer: 1) Создать в TodosContainer компонент TodoListHeader, рендерить перед TodoList 2) В TodoListHeader cоздать State title для TodosContainer (элемент Task List в макете, c дефолтным значением "Task List"), и реализовать возможность редактирования title. (кнопку удаления не нужно реализовывать пока) Когда вы хотите отредактировать title(изначально input disabled) списка вы нажимаете на кнопку с иконкой редактирования, и редактируете, после чего вы нажимаете на enter и поле title снова disabled.

Итог. Таким образом у вас должен быть сверстан и реализован список todo, который просто будет отображать из ваших заранее созданных данных список из трех элементов, и в пропсах у каждого элемента списка (TodoBox) будут все данные из конкретного объекта todo.

У вас так же будет реализован header этого списка в отдельном компоненте с возможностью редактировать title списка.

mwalexandra commented 2 years ago

https://github.com/mwalexandra/TelRan/tree/main/FE/22.06.17_react_uno_todo/uno-todo/src

eduard-lab-front-end commented 2 years ago

https://github.com/Eduard-basic24-25/Uno-todo-17-06