Адаптивные веб-страницы с помощью React-Response и TypeScript

0 246

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

Что такое адаптивный веб-дизайн?

Согласно MDN, отзывчивый веб-дизайн (RWD) — это подход к веб-дизайну, который позволяет веб-страницам хорошо отображаться на различных устройствах и размерах окон или экранов от минимального до максимального размера отображения. Последние исследования также рассматривают близость зрителя к части контекста просмотра как расширение для RWD. Контент, дизайн и производительность необходимы на всех устройствах, чтобы обеспечить удобство использования.

Реализация RWD в веб-приложениях дает таким приложениям возможность легко настраиваться и адаптироваться к постоянному изменению размеров экрана на устройствах. Создание приложений, которые являются адгезивными RWD, означает, что это веб-приложение имеет плавные и пропорциональные сетки, гибкие изображения и медиа-запросы CSS3, являющиеся расширением правила @media. В этом руководстве мы сосредоточимся на части медиа-запросов при реализации RWD в веб-приложении.

Что такое React-response?

React-responsive — это модуль медиа-запросов, который предоставляет медиа-запросы CSS в качестве компонента или хука для адаптивного веб-дизайна. Это очень полезно для рендеринга или удаления определенных стилизованных элементов в DOM — реструктуризировать DOM с точки зрения стилей CSS / Sass, в зависимости от разрешения / размера экрана.

Адаптивные веб-страницы с помощью React-Response и TypeScript

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-Response и TypeScript

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-Response и TypeScript

Теперь давайте начнем с простейшей реализации 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>  );};…

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

Адаптивные веб-страницы с помощью React-Response и TypeScript

Теперь давайте реализуем событие 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

Оставьте ответ

Ваш электронный адрес не будет опубликован.