Компоненты и файловая структура
Подготовьте файловую структуру проекта перед тем, как перейти к созданию компонентов. Вот несколько рекомендаций:
для «Реакт-компонентов» создайте отдельную директорию components/;
для вспомогательных функций, а также для запросов к API — директорию utils/;
для изображений — images/;
для кода или файлов сторонних разработчиков, например шрифтов, — vendor/;
После этого перейдите к созданию компонентов на «Реакте». Мы рекомендуем портировать всю вёрстку в JSX. Таким образом часть компонентов окажется презентационной.
Для каждого компонента создавайте отдельную директорию. В ней будут лежать JS и CSS-файлы компонента. Например, для компонента App будет такая структура:
-- components/
---- App/
------ App.js
------ App.css
В CSS-файле содержатся только стили компонента.
Примерный список компонентов, которые вам потребуются:
App — корневой компонент приложения, его создаёт CRA.
Main — компонент страницы «О проекте». Он будет содержать только презентационные компоненты и в будущем, за исключением шапки навигации. Вот так выглядит список компонентов, которые будут использоваться только на этой странице:
Promo — компонент с вёрсткой баннера страницы «О проекте».
NavTab — компонент с навигацией по странице «О проекте».
AboutProject — компонент с описанием дипломного проекта.
Techs — компонент с использованными технологиями.
AboutMe — компонент с информацией о студенте.
Portfolio — компонент со ссылками на другие проекты.
Movies — компонент страницы с поиском по фильмам. В нём пригодятся эти компоненты:
SearchForm — форма поиска, куда пользователь будет вводить запрос. Обратите внимание на фильтр с чекбоксом «Только короткометражки». Для него можно воспользоваться отдельным управляемым компонентом FilterCheckbox.
Preloader — отвечает за работу прелоадера.
MoviesCardList — компонент, который управляет отрисовкой карточек фильмов на страницу и их количеством.
MoviesCard — компонент одной карточки фильма.
SavedMovies — компонент страницы с сохранёнными карточками фильмов. Пригодятся эти компоненты:
MoviesCardList — компонент, который управляет отрисовкой карточек фильмов на страницу и их количеством.
MoviesCard — компонент одной карточки фильма.
Для работы со страницами регистрации, авторизации и редактирования профиля создайте три компонента:
Register — компонент страницы регистрации.
Login — компонент страницы авторизации.
Profile — компонент страницы изменения профиля.
Компоненты, которые понадобятся на каждой из основных страниц:
Header — компонент, который отрисовывает шапку сайта на страницу. Шапка на главной странице, как и на других страницах, должна менять отображение, если пользователь авторизован или не авторизован. Такое поведение нужно сразу предусмотреть в вёрстке, даже несмотря на то, что сама авторизация ещё не реализована.
Navigation — компонент, который отвечает за меню навигации на сайте.
Footer — презентационный компонент, который отрисовывает подвал.
Это базовые компоненты этого этапа. Вы можете создать дополнительные компоненты, например для элементов форм. Кроме этого, мы рекомендуем создать отдельный компонент для вывода ошибок при работе с API — это может быть модальное окно или текстовое сообщение в соответствующих частях проекта.
На следующем этапе у вас появятся новые компоненты или дополнятся существующие, которые отвечают за функциональность:
регистрации,
авторизации,
защищённых роутов.
Вы можете использовать как функциональные компоненты, так и классовые.
Компоненты и файловая структура Подготовьте файловую структуру проекта перед тем, как перейти к созданию компонентов. Вот несколько рекомендаций: для «Реакт-компонентов» создайте отдельную директорию components/; для вспомогательных функций, а также для запросов к API — директорию utils/; для изображений — images/; для кода или файлов сторонних разработчиков, например шрифтов, — vendor/; После этого перейдите к созданию компонентов на «Реакте». Мы рекомендуем портировать всю вёрстку в JSX. Таким образом часть компонентов окажется презентационной. Для каждого компонента создавайте отдельную директорию. В ней будут лежать JS и CSS-файлы компонента. Например, для компонента App будет такая структура: -- components/
---- App/ ------ App.js ------ App.css В CSS-файле содержатся только стили компонента. Примерный список компонентов, которые вам потребуются: App — корневой компонент приложения, его создаёт CRA. Main — компонент страницы «О проекте». Он будет содержать только презентационные компоненты и в будущем, за исключением шапки навигации. Вот так выглядит список компонентов, которые будут использоваться только на этой странице: Promo — компонент с вёрсткой баннера страницы «О проекте». NavTab — компонент с навигацией по странице «О проекте». AboutProject — компонент с описанием дипломного проекта. Techs — компонент с использованными технологиями. AboutMe — компонент с информацией о студенте. Portfolio — компонент со ссылками на другие проекты. Movies — компонент страницы с поиском по фильмам. В нём пригодятся эти компоненты: SearchForm — форма поиска, куда пользователь будет вводить запрос. Обратите внимание на фильтр с чекбоксом «Только короткометражки». Для него можно воспользоваться отдельным управляемым компонентом FilterCheckbox. Preloader — отвечает за работу прелоадера. MoviesCardList — компонент, который управляет отрисовкой карточек фильмов на страницу и их количеством. MoviesCard — компонент одной карточки фильма. SavedMovies — компонент страницы с сохранёнными карточками фильмов. Пригодятся эти компоненты: MoviesCardList — компонент, который управляет отрисовкой карточек фильмов на страницу и их количеством. MoviesCard — компонент одной карточки фильма. Для работы со страницами регистрации, авторизации и редактирования профиля создайте три компонента: Register — компонент страницы регистрации. Login — компонент страницы авторизации. Profile — компонент страницы изменения профиля. Компоненты, которые понадобятся на каждой из основных страниц: Header — компонент, который отрисовывает шапку сайта на страницу. Шапка на главной странице, как и на других страницах, должна менять отображение, если пользователь авторизован или не авторизован. Такое поведение нужно сразу предусмотреть в вёрстке, даже несмотря на то, что сама авторизация ещё не реализована. Navigation — компонент, который отвечает за меню навигации на сайте. Footer — презентационный компонент, который отрисовывает подвал. Это базовые компоненты этого этапа. Вы можете создать дополнительные компоненты, например для элементов форм. Кроме этого, мы рекомендуем создать отдельный компонент для вывода ошибок при работе с API — это может быть модальное окно или текстовое сообщение в соответствующих частях проекта. На следующем этапе у вас появятся новые компоненты или дополнятся существующие, которые отвечают за функциональность: регистрации, авторизации, защищённых роутов. Вы можете использовать как функциональные компоненты, так и классовые.