search

tel-ran-de / FE-24-m

2 stars 0 forks source link

FE 2022-06-10 React Life-cycle useEffect #31

Open Nolra opened 2 years ago

Nolra commented 2 years ago

Итог разработки Form - https://github.com/tel-ran-de/FE-24-m/tree/react-form-finish Код теоретического занятия по useEffect - https://github.com/tel-ran-de/FE-24-m/tree/fe-06-10-react-useEffect

Домашнее задание: Повторяем useEffect - https://ru.reactjs.org/docs/hooks-effect.html

Начинаем писать Todos, используя знания, которые мы уже получили. начальная архитектура - https://github.com/tel-ran-de/FE-24-m/tree/react-todos образец - https://todomvc.com/examples/react/#/

  1. создать module.css для Todos и использовать его
  2. input field, который будет принимать ввод от пользователя и событие onKeyPress (погуглить и найти использование этого события в react) 1.2 Вынести input field в отдельный компонент (useState - поднятие состояний). Хранить состояние input field в Todos.
  3. Сделать TodosList компонентом и рендерить(мапить) в него state. Хранить состояние TodosList в Todos (массив объектов).

дополнительно

  1. Как обновить state TodoList? Можно использовать useEffect c слежением за состоянием введенного (enter event) input field.
mwalexandra commented 2 years ago

https://github.com/mwalexandra/TelRan/tree/main/FE/22.06.11_react_todos/todos/src

eduard-lab-front-end commented 2 years ago

https://github.com/Eduard-basic24-25/react-todos