Набросок структуры для компонентов jsx

[PrevedMed6]

Для каждого компонента создавайте отдельную директорию. В ней будут лежать JS и CSS-файлы компонента. Например, для компонента App будет такая структура: -- components/

---- App/ ------ App.js ------ App.css

В CSS-файле содержатся только стили компонента.

Примерный список компонентов, которые вам потребуются:

1. App — корневой компонент приложения, его создаёт CRA.
2. Main — компонент страницы «О проекте». Он будет содержать только презентационные компоненты и в будущем, за исключением шапки навигации. Вот так выглядит список компонентов, которые будут использоваться только на этой странице:
   • Promo — компонент с вёрсткой баннера страницы «О проекте».
   • NavTab — компонент с навигацией по странице «О проекте».
   • AboutProject — компонент с описанием дипломного проекта.
   • Techs — компонент с использованными технологиями.
   • AboutMe — компонент с информацией о студенте.
   • Portfolio — компонент со ссылками на другие проекты.
3. Movies — компонент страницы с поиском по фильмам. В нём пригодятся эти компоненты:
   • SearchForm — форма поиска, куда пользователь будет вводить запрос. Обратите внимание на фильтр с чекбоксом «Только короткометражки». Для него можно воспользоваться отдельным управляемым компонентом FilterCheckbox.
   • Preloader — отвечает за работу прелоадера.
   • MoviesCardList — компонент, который управляет отрисовкой карточек фильмов на страницу и их количеством.
   • MoviesCard — компонент одной карточки фильма.
   • SavedMovies — компонент страницы с сохранёнными карточками фильмов. Пригодятся эти компоненты:
   • MoviesCardList — компонент, который управляет отрисовкой карточек фильмов на страницу и их количеством.
   • MoviesCard — компонент одной карточки фильма.

Для работы со страницами регистрации, авторизации и редактирования профиля создайте три компонента:

1. Register — компонент страницы регистрации.
2. Login — компонент страницы авторизации.
3. Profile — компонент страницы изменения профиля.

Компоненты, которые понадобятся на каждой из основных страниц:

1. Header — компонент, который отрисовывает шапку сайта на страницу.
2. Navigation — компонент, который отвечает за меню навигации на сайте.
3. Footer — презентационный компонент, который отрисовывает подвал.
4. Компонент для вывода ошибок при работе с API — это может быть модальное окно или текстовое сообщение в соответствующих частях проекта.

[PrevedMed6]

• [ ] структура для компонентов подготовлена
• [ ] компоненты имеют черновую разметку