Программирование на JS

1. Настройка проекта. Создайте файл с расширением .html. Добавьте базовую структуру HTML-документа. Подключите библиотеки React, ReactDOM, Babel через CDN. Добавьте DOM-элемент с уникальным идентификатором. Создайте краткие имена для вызова функциональности React (слайды 4-7).

2. Рендеринг в корневой элемент. Настройка маршрутизации. Используйте ReactDOM.createRoot для создания корневого элемента React, метод render для отображения React-приложения с настроенной маршрутизацией в созданном корневом элементе. Используя React Router, настройте маршруты для каждого компонента: "/" должен отображать компонент Students. "/addStudent" должен отображать компонент AddStudent. "/editStudent/:id" должен отображать компонент LoadStudent с параметром id для редактирования конкретного студента (слайды 8-10).

3. Создание компонента высшего порядка OnLoadingData(Component), который принимает другой компонент и возвращает функциональный компонент для управления отображением. Компонент высшего порядка должен отображать сообщение об ошибке, если присутствует флаг ошибки (props.isError). Если данные находятся в процессе загрузки (props.isLoading), отображать сообщение "Подождите, данные загружаются". В противном случае, отображать переданный компонент (слайды 11-12).

4. Реализация функционального компонента StudentList({students}) для отображения списка студентов. Создайте функциональный компонент с именем StudentList. Этот компонент должен быть оформлен как функция, которая принимает в props массив студентов (props.students). Если массив студентов пуст или отсутствует, компонент должен отобразить соответствующее сообщение. Реализуйте функцию deleteStudent, которая отправляет запрос на сервер для удаления студента по его идентификатору. При успешном удалении студента, обновите отображение списка студентов. Задачи компонента: – отобразить таблицу со списком студентов, включая их номер и ФИО (чтобы динамически формировать строки таблицы на основе данных из массива студентов, воспользуйтесь методом map()); – обеспечивать удобный интерфейс для управления списком студентов, включая добавление, удаление и редактирование их данных (в каждой строке таблицы должны быть кнопки для удаления и редактирования каждого студента) (слайды 13-17).

5. Реализация функционального компонента высшего порядка LoadStudentList() для загрузки списка студентов с сервера и отображения этого списка в компоненте StudentList. Внутри компонента, создайте состояние с полями: loading: для отслеживания состояния загрузки данных, students: для хранения списка студентов, error: для отслеживания возможных ошибок при загрузке данных. Используя хуки состояния (useState) и эффекта (useEffect), реализуйте логику для загрузки списка студентов с сервера при монтировании компонента. Выполните HTTP-запрос к серверу и обновите состояние компонента в зависимости от результата запроса (слайды 18-19).

Реализация функционального компонента EditStudent({student}) для редактирования данных студента. Создайте функциональный компонент с именем EditStudent, который должен принимать в props объект student с данными редактируемого студента. Если объект student не передан в компонент, необходимо отобразить сообщение о отсутствии данных. Используйте хук useState для управления состоянием формы, инициализируя его данными из props.student. Реализуйте функцию handleChange для обновления состояния формы при изменении значения поля ввода. Создайте функцию changeStudent, которая отправляет обновленные данные студента на сервер с использованием метода PUT при отправке формы. Для реализации возможности возврата на главную страницу после успешного редактирования, используйте хук useNavigate из библиотеки ReactRouterDOM. Оформите форму с одним полем ввода для редактирования имени студента. Предусмотрите кнопки "Сохранить" для отправки формы и "Отмена" для возврата на главную страницу (слайды 20-23).