Добрый день уважаемые читатели, всех с наступившим 2020 годом и это моя первая статья в этом году.
Как вы уже знаете из моего блога я решил разрабатывать справочный сайт для своего мобильного приложения. Да не просто справочный сайт, а с поддержкой нескольких языков и с использованием современных технологий. В цикле этих статей я буду рассказывать, как идёт процесс и рассказывать о некоторых технических решениях. Погнали!)
Содержание цикла статей:
- Разработка мультиязычного мобильного справочного сайта на React. Часть №1
P.S. У меня появилась интересная идея, что делать с полученным сайтом, возможно удастся сделать из него небольшой бизнес, читайте до конца разработки и я обязательно расскажу о своей идее.
Стек технологий
Основной выбор пал на React.js, это специальная библиотека, позволяющая создавать одностраничные web-приложения или можно назвать их сайтами, использование которых происходит без перезагрузки страницы, что важно, когда мы говорим о мобильных устройствах и их интернете, меньше количество загружаемой информации делает сайт более скоростным.
А для создания основы (там нужно создать небольшую структуру) я использовал инструмент Create React App, создание демонстрационного приложения происходит парой команд:
npx create-react-app my-app
cd my-app
npm start
Больше никаких специализированных библиотек я использовать не планирую, а значит мне лишь потребуются знания HTML, CSS, JavaScript.
Процесс разработки
Проектировать сайт я начал до его разработки, вы можете прочитать о том, что я сделала в предыдущей статье. Взяв за основу макет, который я там спроектировал я приступил к разработке и первым делом решил реализовать верхнюю панель (в англоязычных кругах её называют App Bar). Это та самая полоска с бургером-меню, текстом и, возможно, элементами меню справа.
Весь AppBar я вынес в отдельный компонент для удобства (в этой статье я буду использовать стандартные названия для React, не заостряя внимание на том, что они из себя представляют). Внутри компонента AppBarComponent можно увидеть ещё два более маленьких — MenuDrawer (отвечает за открытие и закрытие меню, которое выезжает слева) и MenuSearchComponent (компонент отвечающий за поиск).
Постепенно буду дополнять эту схему новыми компонентами.
App — тоже компонент, корневой, который будет отвечать за весь сайт. Именно в нём будет храниться информация о выбранном языке в качестве состояния, скорее всего. И другая важная информация, которая при необходимости будет передаваться в дочерние компоненты, например, как текущий режим — FAQ или инструкции.
Drawer или левое выкатывающееся меню
Стоит отдельно поговорить про реализацию типичного для всех мобильных приложений выкатывающегося меню с левой стороны экрана при нажатии на бургер, по макету там будет возможность переключения языка, содержание раздела сайта, общая навигация по сайту.
Сам HTML элемент выглядит следующим образом:
<div>
<div className="MenuDrawer">
<p>123</p>
<p>321</p>
<p>213</p>
<p>231</p>
</div>
<div className="DrawerBackground" onClick={this.closeDrawer}></div>
</div>
Некоторые элементы здесь отличаются от классического HTML, так как сделан компонент через JSX, но узнаваемые всеми моменты есть.
А вот так выглядят стили для этого Drawer:
.MenuDrawer {
position: fixed;
height: 100%;
background: #26C6DA;
padding: 16px;
max-width: 65%;
width: 800px;
box-shadow:4px 0 6px rgba(0,0,0,0.4);
z-index: 5;
transition-duration: 0.5s;
left: -100%;
}
.DrawerBackground {
width: 100%;
height: 100%;
position: fixed;
z-index: 0;
background: rgba(0,0,0,.4);
display: none;
transition-duration: 2s;
}
Отметить стоит свойство transition-duration: 0.5s именно оно добавляет плавность выкатывания меню, далее я покажу как это происходит. Скпритовая часть этого меню при клике на бургер-иконку меняет left: -100% на left: 0 для MenuDrawer и display: none на display: block для DrawerBackground. Ловкость рук и никакой магии, анимация или плавное изменение свойств не нужно, с этим нам и помогает transition-duration.
В конце также видно переключение в режим поиска.
Следующими шагами я планирую проработать наполнение сайта — центральную часть. И подумать над тем как буду взаимодействовать с данными в БД.
А вас прошу ставить лайки, писать комментарии, делиться статьей со своими друзьями в социальных сетях, подписывайтесь на мою группу вконтакте. Ваша активность подбадривает меня писать новые статьи.