Отзывчивое приложение на React менее чем за 30 минут

В сегодняшней статье мы шаг за шагом создадим небольшое, но многофункциональное адаптивное приложение React с нуля быстрым и удобным для разработчиков способом, используя Material UI.

MUI предоставляет простую, настраиваемую и доступную библиотеку компонентов React.

В нашем приложении будут следующие функции:

Сворачиваемый контент с носителями (Home)
Сортируемая таблица данных с разбивкой по страницам (About Us)
Форма с разными категориями входных данных (Contact Us)
Адаптивная галерея изображений. (Shop)

Требования:

Очень базовые знания React, некоторое представление о хуках
Минимальный опыт работы с пользовательским интерфейсом Material UI

Material UI терминология:

App Bar — встроенный компонент, который является базовой навигацией по веб-сайту
Toolbar — структура элементов навигационной панели, т.е. строка / столбец
Material Icons — включает более 2100 официальных значков шрифтов Google Material, преобразованных в компоненты SvgIcon.
Typography — используется для оформления текстового контента на веб-сайте
Tabs — они помогают организовать и разрешить навигацию между группами контента, которые связаны и находятся на одном уровне иерархии, например: ссылки на меню
Drawer — он обеспечивает доступ к местам назначения в вашем приложении.
useMediaQuery — это CSS-хук медиа-запроса для React. Он прослушивает совпадения с медиа-запросом CSS. Это позволяет отображать компоненты в зависимости от того, соответствует запрос или нет.
useTheme — настройте MUI в соответствии с вашей темой. Вы можете изменить цвета, типографику и многое другое.

Чтобы создать новое приложение React, выполните приведённую ниже команду в вашем терминале:

$ npx create-react-app my-responsive-app

Перейдите в папку "my-responsive-app" и выполните приведённую ниже команду, чтобы запустить приложение:

$ npm start

Приложение будет отображаться в браузере по URL, http://localhost:3000 .

Далее установите зависимости пользовательского интерфейса материала. Запустите 1 из приведённой ниже команды в зависимости от того, что вы используете (NPM / YARN):

$ npm install @mui/material @emotion/react @emotion/styled #ИЛИ $ yarn add @mui/material @emotion/react @emotion/styled

Далее мы установим несколько значков пользовательского интерфейса Material UI:

$ npm install @mui/icons-material #ИЛИ $ yarn add @mui/icons-material

Пожалуйста, установите расширение React Snippets, чтобы быстрее писать код на React. Он предоставляет вам фрагменты React / Redux для VS code.Он поддерживает:JavaScript (.js) / JavaScript React (.jsx)TypeScript (.ts) / TypeScript React (.tsx)

Выполнив описанные выше действия по установке, вы можете перейти в свой редактор кода, удалить весь код по умолчанию из src/App.js файла и обновить его, как показано ниже:

function App() { return ( <div> </div> ); } export default App;

Создайте новый заголовок компонента в папке src и импортируйте его внутри компонента приложения. Компонент заголовка будет иметь Appbar по умолчанию, предоставляемый Material UI, мы также добавляем Toolbar для выравнивания элементов панели приложений в строке.

import React from 'react' import AppBar from '@mui/material/AppBar'; import { Toolbar, Typography } from '@mui/material'; //Header Component with responsive menu function Header() { return ( <React.Fragment> <AppBar> <Toolbar> <Typography> Sample Text </Typography> </Toolbar> </AppBar> </React.Fragment> ) } export default Header

Добавьте образец значка логотипа из библиотеки пользовательского интерфейса Material UI.

import AbcIcon from '@mui/icons-material/Abc'; <AbcIcon fontSize="large"></AbcIcon>

Настройте стиль компонента AppBar в соответствии с вашими потребностями:

Теперь мы создадим меню в базовом стиле с кучей ссылок, используя компонент Tabs в Material UI, как показано ниже:

//Create a state hook, to store value of selected menu item const [selectedMenuVal, setSelectedMenuVal] = useState(0) <Tabs sx={{ fontWeight: "500"}} value={selectedMenuVal} onChange={(e, value)=>{ setSelectedMenuVal(value)}} textColor="inherit" indicatorColor='primary'> <Tab label="Home" /> <Tab label="About Us" /> <Tab label="Contact Us" /> <Tab label="Shop" /> </Tabs>

Мы добавляем реквизит ‘indicatorColor’ в компонент Tabs для отображения текущей нажатой или активной ссылки с подчёркиванием, которое будет отличать её по внешнему виду от других ссылок меню. Активной ссылке по умолчанию присвоено значение "home"

Затем мы используем хук ‘useState’ для сохранения значения текущего выбранного пункта меню в переменной состояния ‘selectedMenu’. Поскольку это входная переменная, мы используем событие ‘onChange’ для отслеживания значения последней нажатой ссылки.

Давайте теперь добавим компонент панели "search", используя стилизованный ввод и значок поиска, и импортируем его в App.js:

function SearchInput() { return ( <Search> <SearchIconWrapper> <SearchIcon /> </SearchIconWrapper> <StyledInputBase placeholder="Search…" inputProps={{ 'aria-label': 'search' }} /> </Search> ) } export default SearchInput

После добавления логотипа, меню и панели поиска мы добавим кнопку "login" в наше приложение.

{/* Create a wrapper grid aligned to right */ } <Grid container justifyContent="flex-end"> {/* Search */} <SearchInput /> {/* Login Button */} <Button variant='contained' sx={{marginLeft: "1.5ch"}}>Login</Button> </Grid>

К концу вышеуказанных шагов ваше приложение будет выглядеть так, как показано на рисунке ниже:

На данный момент, если изменить размер вашего окна, то вкладки и кнопки начнут перекрываться и полностью разорвут страницу, потому что мы еще не сделали её адаптивной 😂

Адаптивный веб-дизайн (RWD) - это подход к веб-разработке, который создаёт динамические изменения внешнего вида веб-сайта в зависимости от размера экрана и ориентации устройства, используемого для его просмотра.

Более подробную информацию об адаптивном веб-дизайне можно найти здесь.

Давайте теперь сделаем наше приложение отзывчивым.

Мы создадим пользовательский компонент DrawerComp, используя функцию ‘drawer’ из Material UI.

function DrawerComp() { // Create an openDrawer state variable and set it to false by default const [openDrawer, setOpenDrawer] = useState(false) return ( <React.Fragment> <Drawer open={openDrawer} onClose={() => {setOpenDrawer(false)}}> <List> <ListItemButton> <ListItemIcon> <ListItemText>Login</ListItemText> </ListItemIcon> </ListItemButton> </List> </Drawer> <IconButton onClick={() => setOpenDrawer(!openDrawer) }> <MenuIcon></MenuIcon> </IconButton> </React.Fragment> ) }

Как мы можем видеть в приведённом выше фрагменте кода, внутри компонента DrawerComp мы храним значения открытия и закрытия drawer в переменной состояния и переключаем значение на true / false с помощью функции onClick, установленной на кнопке MenuIcon. Drawer содержит список ссылок, например, для входа в систему (login).

Теперь мы добавим useMediaQuery & useTheme hooks из Material UI, чтобы выборочно отображать содержимое страницы в соответствии с текущим размером экрана.

useTheme hook предоставляет нам объект ‘theme’, как показано на рисунке ниже. У него есть свойство с именем ‘breakpoint’, которое содержит массив ‘keys’ со всеми размерами экрана, такими как (x-small, small, medium, large, x-large).

//Boolean variable checks if screen size is smaller than medium const theme = useTheme(); const isMatch = useMediaQuery(theme.breakpoints.down('md')) //We create a turnary statement, which renders drawer component when screen size is < medium isMatch ? `hamburger menu` : `normal menu with Tabs structure`

Здесь мы создаём 2 константы массива со всеми ссылками на пункты меню и перебираем их, чтобы создать меню вкладок и компонент меню внутри ящика.

export const mainMenu = ["Home", "About Us", "Contact Us", "Shop"] export const hamburgerMenu = [...mainMenu, "Login"]

Теперь ваше приложение будет выглядеть так, как показано ниже, на экранах меньшего размера:

Home — Теперь мы добавим компонент Card, который содержит следующие подкомпоненты:

CardHeader — текстовый заголовок и подзаголовок
CardMedia — Изображения или видео (медиа), которые будут связаны с содержимым карты
CardContent — Текстовое описание
CardActions — Пользователь может выполнять такие действия, как добавление в избранное / поделиться в социальных сетях
Expandmore — Пользовательский компонент, который в основном представляет собой ссылку “узнать больше”.
Collapse — компонент пользовательского интерфейса материала для отображения/скрытия дополнительного описания

About Us — На этой вкладке мы будем создавать компонент Data-grid. Мы будем отображать данные в табличной форме,

Вам нужно будет выполнить приведенную ниже команду в терминале:

npm install @mui/x-data-grid

function AboutUs() { return ( <div style={{ height: 400, width: '80%', margin: "0 auto" }}> <DataGrid rows={rows} columns={columns} pageSize={5} rowsPerPageOptions={[5]} checkboxSelection /> </div> ) }

Таблицы данных отображают информацию в сетчатом формате строк и столбцов. Они организуют информацию таким образом, чтобы её было легко сканировать, чтобы пользователи могли искать закономерности и идеи.

Contact Us — На этой вкладке мы создаём форму с различными категориями полей ввода, такими как текст, номер, поле выбора, ввод и только для чтения.

Shop — на этой вкладке отображается галерея “image”, структура и изображения которой являются адаптивными и автоматически настраиваются в соответствии с размером экрана. Для создания этой галереи мы будем использовать “woven” вариант макета из библиотеки MUI.

<> <Typography sx={{fontSize: "1.5rem", fontWeight: "bold", margin: "20px auto", textAlign: "center"}}> Game Of Thrones Characters Image Gallery </Typography> <ImageList sx={{ width: "70%", height: 750, border: "1px solid #ddd", borderRadius: "5px", padding:"10px", margin: "10px auto", boxShadow: "0 0 10px #eee" }} cols={3} variant="woven" rowHeight={164}> {gotCharacters.map((char) => ( <ImageListItem key={char.img}> <img src={`${char.img}?w=200&h=200&fit=crop&auto=format`} srcSet={`${char.img}?w=200&h=200&fit=crop&auto=format&dpr=2 2x`} alt={char.title} loading="lazy" /> <ImageListItemBar position="below" title={char.title} sx={{ fontFamily: "Times New Roman", fontStyle: "italic", fontWeight: "bold" }} /> </ImageListItem> ))} </ImageList> </>

Полный исходный код этого приложения можно найти в этом репозитории.

Пожалуйста, обратите внимание, что это бета-версия, дальнейшие улучшения и исправления ошибок будут добавлены в следующих статьях очень скоро. Не стесняйтесь делиться, создавать, тестировать, открывать этот проект.

По мере того, как React продолжает развиваться и раздвигать границы возможностей фронтенд-разработчиков, нам также необходимо переосмыслить способы создания наших приложений. Мы должны сделать их надёжными, масштабируемыми, простыми в модификации, слабо связанными и более быстрыми в сборке.

Библиотеки, подобные MUI, помогают нам достичь скорости без ущерба для качества и доступности.

Имейте в виду, что это не единственный подход к ускорению создания приложений React, но это действительно оптимальное решение, простое, которое вы можете сделать сами, даже если у вас есть только базовые знания в области веб-разработки.

Статья была взята из этого источника:

uproger.com

Отзывчивое приложение на React менее чем за 30 минут

Отзывчивое приложение на React менее чем за 30 минут

Шаги создания

Давайте испачкаем наши руки… 🤓

Теперь мы все “оживим”! 🤩

Соберите содержимое “Tab”

Полный код

Заключение