Адаптивные веб-страницы с помощью React-Response и TypeScript
В этом руководстве мы узнаем о react-responsive библиотеке и о том, как использовать ее с TypeScript в наших проектах. Мы также применим знания из этого руководства для создания простого адаптивного приложения-портфолио. Позвольте кратко объяснить некоторые знания о реальном значении реализации адаптивных веб-приложений.
Что такое адаптивный веб-дизайн?
Содержание статьи:
Согласно MDN, отзывчивый веб-дизайн (RWD) — это подход к веб-дизайну, который позволяет веб-страницам хорошо отображаться на различных устройствах и размерах окон или экранов от минимального до максимального размера отображения. Последние исследования также рассматривают близость зрителя к части контекста просмотра как расширение для RWD. Контент, дизайн и производительность необходимы на всех устройствах, чтобы обеспечить удобство использования.
Реализация RWD в веб-приложениях дает таким приложениям возможность легко настраиваться и адаптироваться к постоянному изменению размеров экрана на устройствах. Создание приложений, которые являются адгезивными RWD, означает, что это веб-приложение имеет плавные и пропорциональные сетки, гибкие изображения и медиа-запросы CSS3, являющиеся расширением правила @media. В этом руководстве мы сосредоточимся на части медиа-запросов при реализации RWD в веб-приложении.
Что такое React-response?
React-responsive — это модуль медиа-запросов, который предоставляет медиа-запросы CSS в качестве компонента или хука для адаптивного веб-дизайна. Это очень полезно для рендеринга или удаления определенных стилизованных элементов в DOM — реструктуризировать DOM с точки зрения стилей CSS / Sass, в зависимости от разрешения / размера экрана.
React JS. Основы
Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения
Получить курс сейчас!
Использование react-responseive в наших проектах означает, что мы можем легко разделить контент, который хотим отображать, без написания для него каких-либо дополнительных стилей. Эти стили обрабатываются под капотом, предоставляя нам компонент или интерфейс хука, который мы можем использовать для установки значений max-width или min-width. Эти значения определяют, на каких размерах экрана содержимое будет отображаться или скрываться.
React-response или стилизованные компоненты
Прежде чем мы проведем сравнение между этими инструментами, стоит отметить, что в то время как react-responsive был сделан для брейкпоинтов с помощью пользовательских компонентов, стилизованные компоненты были сосредоточены на создании компонентов с пользовательскими стилями CSS. Это означает, что эти два инструмента можно объединить вместе, чтобы добавить на веб-страницу больше возможностей CSS. В то время как react-responsive больше фокусируются на инкапсуляции в качестве брейкпоинтов, стилизованные компоненты сосредоточены на добавлении большего количества стилей CSS через пользовательские компоненты.
Повышение качества ваших стилизованных компонентов потребует обработки медиа-запросов с помощью react-responsive, как показано ниже:
JavaScript … const SampleComponent = (props) => { … return( <div> <ReactResponsive breakpoint={1040}> <StyledComponents {…props}> </ReactResponsive> <ReactResponsive breakpoint={786}> <StyledComponents {…props}> </ReactResponsive> </div> ) } …
| 12345678910111213141516 | …const SampleComponent = (props) => { … return( <div> <ReactResponsive breakpoint={1040}> <StyledComponents {…props}> </ReactResponsive> <ReactResponsive breakpoint={786}> <StyledComponents {…props}> </ReactResponsive> </div> )}… |
Выше представлен возможный код объединения двух библиотек для создания более отзывчивых веб-приложений. При размерах экрана в пределах минимальной ширины 1040 пикселей дочерние компоненты, то есть <StyledComponents {… props}>, будут отображаться на экране. Та же концепция применяется и ко второму компоненту <ReactResponsive breakpoint = {786}>.
Реализация React-responsive
В следующих частях этого руководства мы обсудим и исследуем реализацию React-responseive как в качестве хука, так и в качестве компонента. Мы также объединим эти два подхода вместе, таким образом, рассмотрим любую возможную реализацию react-responsive, которую вам необходимо знать, прежде чем создавать хорошо адаптивное приложение. Давайте начнем с настройки react-responsive в качестве хука в проекте React:
JavaScript import { useMediaQuery } from “react-responsive”; const App = () => { const isDesktop = useMediaQuery({ query: “(min-width: 1224px)” }); const isTablet = useMediaQuery({ query: “(max-width: 1224px)” }); const isMobile = useMediaQuery({ query: “(max-width: 786px)” }); const isPortrait = useMediaQuery({ query: “(orientation: portrait)” }); const isRetina = useMediaQuery({ query: “(max-resolution: 300dpi)” }); return ( <Wrapper> { isDesktop ? <DesktopView /> : <MobileView /> } {isTablet && <Tablet />} <p>This is {isPortrait ? ‘portrait’ : ‘landscape’} orientation</p> {isRetina && <p>You are testig retina</p>} </div> </Wrapper> ) }
| 1234567891011121314151617181920212223242526272829303132333435 | import { useMediaQuery } from “react-responsive”; const App = () => { const isDesktop = useMediaQuery({ query: “(min-width: 1224px)” }); const isTablet = useMediaQuery({ query: “(max-width: 1224px)” }); const isMobile = useMediaQuery({ query: “(max-width: 786px)” }); const isPortrait = useMediaQuery({ query: “(orientation: portrait)” }); const isRetina = useMediaQuery({ query: “(max-resolution: 300dpi)” }); return ( <Wrapper> { isDesktop ? <DesktopView /> : <MobileView /> } {isTablet && <Tablet />} <p>This is {isPortrait ? ‘portrait’ : ‘landscape’} orientation</p> {isRetina && <p>You are testig retina</p>} </div> </Wrapper> )} |
Используя хук useMediaQuery, предоставляемый react-responsive, мы смогли создать логику брейкпоинта в нашем коде. Компоненты, прошедшие валидацию isDesktop, будут отображаться только на экранах с областью просмотра больше 1224 пикселей. В то время как isTablet и isMobile будут отображать компоненты на экранах с областью просмотра до 1224 пикселей и 786 пикселей соответственно.
Далее, настроим react-responsive как компонентный интерфейс:
JavaScript import MediaQuery from “react-responsive”; const App = () => ( <Wrapper> <MediaQuery minWidth={1224}> <DeskTopView>This will display in desktop screen</DeskTopView> <MediaQuery minWidth={1824}> <Banner text=”this will dsiplay on larger screen size” /> </MediaQuery> </MediaQuery> <MediaQuery minResolution=”2dppx”> {(matches) => matches ? <Retina>This is a retina view</Retina> : <div>This isn’t a retina</div> } </MediaQuery> </Wrapper> )
| 12345678910111213141516171819 | import MediaQuery from “react-responsive”; const App = () => ( <Wrapper> <MediaQuery minWidth={1224}> <DeskTopView>This will display in desktop screen</DeskTopView> <MediaQuery minWidth={1824}> <Banner text=”this will dsiplay on larger screen size” /> </MediaQuery> </MediaQuery> <MediaQuery minResolution=”2dppx”> {(matches) => matches ? <Retina>This is a retina view</Retina> : <div>This isn’t a retina</div> } </MediaQuery> </Wrapper>) |
Приведенный выше фрагмент кода дает нам представление о том, как мы можем использовать компонент MediaQuery, а затем передать брейкпоинт в качестве props в компонент. Также в <MediaQuery minResolution = «2dppx»> мы использовали функцию (render prop) в качестве дочернего элемента для программного выбора дочерних свойств компонента.
Последняя концепция перед тем, как мы реализуем React-responseive в нашем проекте портфолио, заключается в том, как инициировать событие с помощью свойства onChange в компоненте MediaQuery или в качестве обратного вызова в нашем хуке useMediaQuery.
JavaScript import MediaQuery, { useMediaQuery } from “react-responsive”; const App = () => { const handleMediaQueryChange = (matches) => { if(matches) { // do something if true } else { // do something if false } }; const isDesktop = useMediaQuery( { minWidth: 1224 }, undefined, handleMediaQueryChange ); return ( <Wrapper> <MediaQuery minWidth={1224} onChange={handleMediaQueryChange}> … </MediaQuery> {“or”} {isDesktop && <div>Welcome to desktop view…</div>} </Wrapper> ) }
| 123456789101112131415161718192021222324 | import MediaQuery, { useMediaQuery } from “react-responsive”; const App = () => { const handleMediaQueryChange = (matches) => { if(matches) { // do something if true } else { // do something if false } }; const isDesktop = useMediaQuery( { minWidth: 1224 }, undefined, handleMediaQueryChange ); return ( <Wrapper> <MediaQuery minWidth={1224} onChange={handleMediaQueryChange}> … </MediaQuery> {“or”} {isDesktop && <div>Welcome to desktop view…</div>} </Wrapper> )} |
В приведенном выше коде мы присоединяем функцию обратного вызова handleMediaQueryChange к хуку useMediaQuery для обработки события onChange, которое возникает при изменении ширины окна просмотра браузера на 1224 пикселей. Это также относится к компоненту MediaQuery, где функция handleMediaQueryChange выполняется свойством onChange компонента.
React JS. Основы
Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения
Получить курс сейчас!
Реализация React-responsive с TypeScript
В этом проекте мы будем использовать Styled-components библиотеку для применения основных стилей к пользовательским компонентам. Затем мы воспользуемся React-responseive библиотекой, чтобы добавить медиа-запросы для брейкпоинтов. Давайте клонируем наш проект из GitHub в папку портфолио с помощью следующей команды, затем переместим каталог в эту папку и установим все необходимые зависимости.
JavaScript git clone https://github.com/IkehAkinyemi/react-responsive-portfolio portfolio cd portfolio yarn install
| 123 | git clone https://github.com/IkehAkinyemi/react-responsive-portfolio portfoliocd portfolioyarn install |
Запустим проект с помощью команды yarn start в терминале, а в браузере перейдем по адресу localhost:3000 /experience, чтобы познакомится с текущим интерфейсом перед реализацией нашего медиа-запроса.
Теперь давайте начнем с простейшей реализации react-responsive, определив, какой контент отображается в окнах просмотра на десктопе и на мобильных устройствах.
JavaScript import Projects from “./Projects”; import MediaQuery from “react-responsive”; … const Experience = () => { … return ( <div className=”container max-w-screen-lg mx-auto”> <div className=”mt-8″> <MediaQuery maxWidth={786}> <h1 className=”text-3xl text-center mb-6 z-50″> For desktop view only </h1> </MediaQuery> <MediaQuery minWidth={1224}> <Projects /> </MediaQuery> </div> </div> ); }; export default Experience;
| 12345678910111213141516171819202122 | import Projects from “./Projects”;import MediaQuery from “react-responsive”;…const Experience = () => { … return ( <div className=”container max-w-screen-lg mx-auto”> <div className=”mt-8″> <MediaQuery maxWidth={786}> <h1 className=”text-3xl text-center mb-6 z-50″> For desktop view only </h1> </MediaQuery> <MediaQuery minWidth={1224}> <Projects /> </MediaQuery> </div> </div> );};export default Experience; |
Мы обновили наше приложение, чтобы отображать элемент h1 только в мобильном представлении, в то время как список карточек для проектов, то есть компонент <Project />, отображается только в области просмотра больше 1224 пикселей.
Затем давайте обновим компонент Card в файле src/experience/Project.tsx. Сделаем содержимое пользовательского компонента Glass видимым только в области просмотра десктопа.
JavaScript import { useMediaQuery } from “react-responsive”; … const Card = ({ img, name, description }: CProps) => { const isDesktop = useMediaQuery({ query: “(min-width: 1224px)” }); return ( <Wrapper bg={img} className=”SpinWhot project”> <div className=”project-name-holder”> <p className=”project-name-holder-SpinWhot project-title”>{name}</p> </div> <Glass className=””>{isDesktop && description}</Glass> </Wrapper> ); }; …
| 1234567891011121314151617 | import { useMediaQuery } from “react-responsive”;…const Card = ({ img, name, description }: CProps) => { const isDesktop = useMediaQuery({ query: “(min-width: 1224px)” }); return ( <Wrapper bg={img} className=”SpinWhot project”> <div className=”project-name-holder”> <p className=”project-name-holder-SpinWhot project-title”>{name}</p> </div> <Glass className=””>{isDesktop && description}</Glass> </Wrapper> );};… |
Наш обновленный интерфейс при просмотре на экране десктопа будет выглядеть так, как показано ниже:
Теперь давайте реализуем событие onChange в нашем приложении, чтобы оно всегда срабатывало при входе в отдельное окно просмотра.
JavaScript import { useMediaQuery } from “react-responsive”; … const Card = ({ img, name, description }: CProps) => { const handleMediaQueryChange = (matches: boolean) => { if(matches) { window.alert(“Trigger a window’s alert at viewport of 1244px”) } }; const isDesktop = useMediaQuery( { minWidth: 1224 }, undefined, handleMediaQueryChange ); return ( <Wrapper bg={img} className=”SpinWhot project”> <div className=”project-name-holder”> <p className=”project-name-holder-SpinWhot project-title”>{name}</p> </div> <Glass className=””>{isDesktop && description}</Glass> </Wrapper> ); }; …
| 123456789101112131415161718192021222324 | import { useMediaQuery } from “react-responsive”;…const Card = ({ img, name, description }: CProps) => { const handleMediaQueryChange = (matches: boolean) => { if(matches) { window.alert(“Trigger a window’s alert at viewport of 1244px”) } }; const isDesktop = useMediaQuery( { minWidth: 1224 }, undefined, handleMediaQueryChange ); return ( <Wrapper bg={img} className=”SpinWhot project”> <div className=”project-name-holder”> <p className=”project-name-holder-SpinWhot project-title”>{name}</p> </div> <Glass className=””>{isDesktop && description}</Glass> </Wrapper> );};… |
Приведенный выше фрагмент вызовет функцию window.alert для отображения предупреждения в браузере всякий раз, когда мы изменяем ширину нашего браузера до 1224 пикселей.
Заключение
Построение с помощью React-responseive дает возможность использовать его вместе с другими библиотеками, ориентированными на CSS, для создания адаптивных веб-страниц. Мы можем расширить знания из этого руководства, чтобы быстро построить сетку для экранов разных размеров. Также мы можем разделить компоненты нашего приложения на модули для отображения в зависимости от того, в каком окне просмотра мы их установили. Кроме того, различные интерфейсы поддержки, предоставляемые React-responseive, варьируются от сверхбольших экранов до экранов умных часов, что делает React-responseive хорошей библиотекой для создания дизайна пользовательского интерфейса для небольших экранов от начала и до конца без написания каких-либо медиа-запросов CSS. Вот ссылка на GitHub для загрузки кода, используемого для нашего проекта.
Автор: Ikeh Akinyemi
Источник: webformyself.com