Planets

planets

Одностраничное веб-приложение на React.

Чтобы запустить проект

1. После клонирования репозитория установите зависимости npm install.
2. Запуск проекта npm start, порт localhost/3000.

Применение пунктов из ТЗ

Отзывчивая верстка

Для элементов, стили которых нужно переписать я использую mixin, принимающий максимальную или минимальную ширину экрана. В блоках с текстом и изображением на маленьких экранах меняется направление главной оси flex-контейнера на column, меняются ширины блоков текста и изображения.

Кроссбраузерная совместимость

Проверила работу сайта на Chrome, Firefox, Edge. Для некоторых элементов прописаны отдельные стили для IE, например для параграфов width: 100% и некоторых блоков div.

Семантическая верстка

Сайт состоит из блоков header, main, footer. Блок main включает в себя 4 меньших блока section: MainBlock, SolarSystem, AboutPlanets, AboutPluto. Названия классов элементов я стараюсь давать по БЭМ-методолгии.

Интерактивные элементы

Блок AboutPlanets по нажатию на таб с планетой выводит информацию о ней. Компонент AboutPlanets возвращает компоненты TabsBlock(табы) и PlanetBlock(текст про планету). По нажатию на таб, id планеты передается в родительский компонент, переписывается state и переменная chosenPlanetId передается в PlanetBlock. По id планеты дальше записывается информация о ней из файла Planets.json. Изначально переменная chosenPlanetId=null и блок PlanetBlock не возвращается.

Переиспользование кода

Компонент TextBlock переиспользуется в приложении меняя свое содержимое в блоках SolarSystem и AboutPluto. Компонент PlanetBlock так же переиспользуется для каждой выбранной планеты.