Chakra UI React — Кодирование простой посадочной страницы

Здравствуйте, кодеры!

Эта статья объясняет, как использовать библиотеку Chakra UI React и создать простую, отзывчивую целевую страницу. Страница будет построена только с помощью компонентов Chakra, ни один элемент HTML не будет использован. Для новичков: Chakra UI — это библиотека, которая позволяет создавать потрясающие и современные веб-приложения, используя различные компоненты верстки. Она отличается от других UI-фреймворков тем, что по умолчанию предлагает доступность и поддержку темного режима.

Спасибо за прочтение!

👉 Chakra UI Landing Page — образец LIVE Demo
👉 Chakra UI Landing Page — Исходный код (все компоненты)
🎁 Больше шаблонов Chakra UI (все бесплатно и с открытым исходным кодом)

Содержание

✨ Темы
✨ Chakra UI, ключевые особенности
✨ Настройка Chakra UI с помощью CRA.
✨ Как стилизовать компоненты Chakra
✨ Кодирование компонента Nav
✨ Создание компонента Hero Component.
✨ Кодирование компонента «О нас
✨ Компонент услуг
✨ Кодирование компонента нижнего колонтитула
✨ Включить темный режим
✨ Переключение темного / светлого режима
✨ Выводы и ресурсы

✨ Темы

В этой статье вы узнаете о различных компонентах Chakra UI и о том, как их использовать при создании полностью отзывчивой веб-страницы с помощью React.js.

Без лишних слов, давайте посмотрим обзор того, что вы узнаете в этой статье.

👉 5 ключевых особенностей Chakra UI
👉 Как настроить Chakra UI в Create-React-App
👉 Как стилизовать компоненты Chakra UI
👉 Кодирование компонента Nav
👉 Кодирование компонента Hero
👉 Кодирование компонента About Us
👉 Кодирование компонента Services
👉 Кодирование компонента Footer
👉 Как включить Chakra UI Dark Mode
🎁 Выводы и примеры; Бесплатные ресурсы

✨ Chakra UI, ключевые особенности

Компоненты макета, предоставляемые Chakra UI, являются современными и доступными. Это означает, что пользователи с ограниченными возможностями могут получить доступ к вашему сайту без каких-либо ограничений, независимо от их инвалидности. С Chakra UI инвалидность не является помехой для отличного пользовательского опыта.

🚀 Высокая настраиваемость

Каждый веб-компонент, предоставляемый Chakra UI, является очень настраиваемым. Вы имеете полный контроль над их внешним видом и поведением. Chakra UI позволяет вам редактировать и расширять компоненты пользовательского интерфейса в соответствии с вашими потребностями. Например, в Chakra UI есть всего несколько иконок, но вы можете легко расширить библиотеку иконок.

🚀 Поддержка тем и темного режима

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

Вы также можете создавать собственные темы или редактировать темы по умолчанию, предоставляемые Chakra UI.

🚀 Простая кривая обучения

Chakra UI имеет короткую кривую обучения. Вам не придется тратить много времени на изучение того, как использовать веб-компоненты. Если вы знакомы с CSS или другими библиотеками пользовательского интерфейса, такими как Tailwind CSS, вы освоите Chakra UI в течение нескольких минут после прочтения документации.

🚀 Отличная документация

Chakra UI имеет отличную документацию, в которой легко ориентироваться новым и существующим пользователям и быстро изучить ее возможности. Документация Chakra UI удобна для разработчиков и пользователей. Используя Chakra UI, вы, скорее всего, не столкнетесь с ошибками, связанными с пользовательским интерфейсом.

✨ Настройка Chakra UI с помощью `CRA`.

Как было сказано ранее, я проведу вас через создание полностью отзывчивого и современного сайта с помощью Chakra UI. Перед этим давайте установим необходимые инструменты.

Откройте терминал
Выполните приведенный ниже код, чтобы установить Chakra UI автоматически с помощью create-react-app (CRA).

$ npx create-react-app my-app --template @chakra-ui

Войдите в полноэкранный режим Выйти из полноэкранного режима

В противном случае вы можете установить CRA и Chakra UI вручную:

$ npx create-react-app react-chakra
$ npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Войти в полноэкранный режим Выйти из полноэкранного режима

Откройте файл index.js в вашем проекте CRA и добавьте ChakraProvider:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { ChakraProvider } from '@chakra-ui/react';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ChakraProvider>
    <App />
  </ChakraProvider>
);

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

Откройте файл App.js и скопируйте следующий код:

import AboutUs from './components/AboutUs';
import ContactUs from './components/ContactUs';
import Footer from './components/Footer';
import Hero from './components/Hero';
import Nav from './components/Nav';
import Services from './components/Services';
import Testimonials from './components/Testimonials';

function App() {
  return (
    <div>
      <Nav />
      <Hero />
      <AboutUs />
      <Services />
      <Testimonials />
      <ContactUs />
      <Footer />
    </div>
  );
}

export default App

Войти в полноэкранный режим Выйти из полноэкранного режима

Из приведенного выше фрагмента кода:

Я создал структуру веб-страницы, разделив ее на 7 различных компонентов — Nav, Hero, About Us и т.д.
Создайте эти компоненты в папке src/components.

После того как вы успешно настроили свой проект CRA с Chakra UI, давайте узнаем, как стилизовать компоненты Chakra UI.

✨ Как стилизовать компоненты Chakra

В отличие от других библиотек пользовательского интерфейса, компоненты Chakra UI стилизуются путем передачи атрибутов CSS в качестве реквизитов веб-компонентам. Это облегчает редактирование макета различных веб-компонентов и сокращает количество стилей, которые необходимо написать.

Давайте рассмотрим пример:

import React from 'react';
import { Text, Box, Flex } from '@chakra-ui/react';

const Example = () => {
  return (
    <Box>
      <Flex
        alignItems="center"
        height="100vh"
        bg="red.400"
        justifyContent="space-between"
        p="16"
      >
        <Text fontSize="3xl" color="green.700">
          Hello World
        </Text>
        <Text>Welcome to Chakra UI</Text>
      </Flex>
    </Box>
  );
};

export default Example;

Вход в полноэкранный режим Выход из полноэкранного режима

Из приведенного выше фрагмента кода:

Я импортировал три компонента из Chakra UI.
Text отображает текст на наших веб-страницах. Он принимает различные реквизиты, такие как fontSize, color и другие атрибуты, связанные с текстом.

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

✨ Кодирование компонента Nav

Этот компонент содержит панель навигации — логотип и строку меню веб-страницы.

Рассмотрим приведенный ниже код:

import React, { useState } from 'react';
import { Text, Flex, Spacer } from '@chakra-ui/react';

const Nav = () => {
  const [scroll, setScroll] = useState(false);

  const changeScroll = () =>
    document.body.scrollTop > 80 || document.documentElement.scrollTop > 80
      ? setScroll(true)
      : setScroll(false);

  window.addEventListener('scroll', changeScroll);

  return (
    <Flex
      h="10vh"
      alignItems="center"
      p="6"
      boxShadow={scroll ? 'base' : 'none'}
      position="sticky"
      top="0"
      zIndex="sticky"
      w="full"
    >
      <Text fontSize="xl" fontWeight="bold">
        Chakra Sample
      </Text>

      <Spacer />

      <Flex alignItems="center">
        <Text fontSize="md" mr="10">
          About
        </Text>
        <Text fontSize="md">More Apps</Text>
      </Flex>
    </Flex>
  );
};

export default Nav;

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

Из приведенного выше фрагмента кода:

Я импортировал компоненты Text, Flex и Spacer из Chakra UI.
Компонент Spacer создает пространство между гибкими элементами, аналогично свойству justify-content: space-between CSS.
Функция changeScroll() поднимает панель навигации, когда пользователь прокручивает веб-страницу вниз.
Функция scroll state используется для переключения свойства boxShadow, когда пользователь прокручивает веб-страницу.

✨ Создание компонента `Hero Component`.

Здесь вы узнаете о хуке useMediaQuery, различных точках останова и о том, как экран реагирует на различные размеры экрана в Chakra UI.

import {
  Box,
  Button,
  Flex,
  Image,
  Spacer,
  Text,
  useMediaQuery,
} from '@chakra-ui/react';
import React from 'react';
import chakraHero from '../assets/chakraHero.jpg';

const Hero = () => {
  const [isLargerThan62] = useMediaQuery('(min-width: 62em)');

  return (
    <Flex
      alignItems="center"
      w="full"
      px={isLargerThan62 ? '16' : '6'}
      py="16"
      minHeight="90vh"
      justifyContent="space-between"
      flexDirection={isLargerThan62 ? 'row' : 'column'}
    >
      <Box mr={isLargerThan62 ? '6' : '0'} w={isLargerThan62 ? '60%' : 'full'}>
        <Text
          fontSize={isLargerThan62 ? '5xl' : '4xl'}
          fontWeight="bold"
          mb="4"
        >
          {' '}
          Let's scale your business
        </Text>

        <Text mb="6" fontSize={isLargerThan62 ? 'lg' : 'base'} opacity={0.7}>
          Hire professionals who will help your business make 10X
        </Text>

        <Button
          w="200px"
          colorScheme="blue"
          variant="solid"
          h="50px"
          size={isLargerThan62 ? 'lg' : 'md'}
          mb={isLargerThan62 ? '0' : '10'}
        >
          HIRE US
        </Button>
      </Box>

      <Spacer />

      <Flex
        w={isLargerThan62 ? '40%' : 'full'}
        alignItems="center"
        justifyContent="center"
      >
        <Image src={chakraHero} alt="Chakra UI" />
      </Flex>
    </Flex>
  );
};

export default Hero;

Вход в полноэкранный режим Выход из полноэкранного режима

Из приведенного выше фрагмента кода:

Компонент Hero возвращает родительский компонент Flex, который содержит Box и еще один компонент Flex.
Компонент Box содержит компоненты Text и Button, а дочерний компонент Flex содержит изображение.
Я также импортировал хук useMediaQuery, который проверяет, соответствует ли размер экрана пользователя заданной точке останова. Он возвращает массив булевых значений, представляющих каждую точку останова.
Переменная isLargerThan62 имеет значение false, если размер экрана меньше 62em, и true в противном случае.

✨ Кодирование компонента «О нас

В этом разделе вы узнаете, как использовать стороннюю библиотеку иконок в Chakra UI при создании компонента AboutUs.

Давайте рассмотрим приведенный ниже код:

import React from 'react';
import { Flex, Spacer, Text, useMediaQuery, Icon } from '@chakra-ui/react';
import { FaTools, FaHandshake, FaStar } from 'react-icons/fa';

const AboutUs = () => {
  const [isLargerThan48] = useMediaQuery('(min-width: 48em)');

  const array = [
    {
      id: 1,
      text: ' Solving world ... [truncated]',
      icon: FaTools,
    },
    {
      id: 2,
      text: 'Through team work, ... [truncated]',
      icon: FaHandshake,
    },
    {
      id: 3,
      text: 'Five star service with ... [truncated]',
      icon: FaStar,
    },
  ];

  return (
    <Flex
      minH="70vh"
      alignItems="center"
      justifyContent="space-between"
      w="full"
      py="16"
      px={isLargerThan48 ? '16' : '6'}
      flexWrap="wrap"
      flexDirection={isLargerThan48 ? 'row' : 'column'}
    >
      {array.map((arr) => (
        <>
          <Flex
            height="300px"
            bg="blackAlpha.200"
            width={isLargerThan48 ? '32%' : 'full'}
            shadow="md"
            p="6"
            alignItems="center"
            justifyContent="center"
            borderRadius="md"
            flexDirection="column"
            textAlign="center"
            mb={isLargerThan48 ? '0' : '4'}
            border="1px solid #C4DDFF"
          >
            <Icon as={arr.icon} boxSize={14} color="blue.600" mb="5" />
            <Text>{arr.text}</Text>
          </Flex>

          <Spacer />
        </>
      ))}
    </Flex>
  );
};

export default AboutUs;

Вход в полноэкранный режим Выход из полноэкранного режима

Из приведенного выше фрагмента кода:

Я установил пакет react-icons и импортировал FaTools, FaHandshake и FaStar.
Массив хранит содержимое для отображения на экране, а затем отображает содержимое на экране.

✨ Компонент услуг

Этот компонент использует изображение слева, которое может быть использовано для представления команды, стоящей за вашим проектом.

Давайте проанализируем приведенный ниже код:

import {
  Flex,
  Spacer,
  Image,
  Text,
  Button,
  useMediaQuery,
} from '@chakra-ui/react';
import React from 'react';
import teamImage from '../assets/teamImage.jpg';

const Services = () => {
  const [isLargerThan62] = useMediaQuery('(min-width: 62em)');

  return (
    <Flex
      width="full"
      minHeight="70vh"
      alignItems="center"
      px={isLargerThan62 ? '16' : '6'}
      py="16"
      justifyContent="center"
      flexDirection={isLargerThan62 ? 'row' : 'column'}
    >
      <Flex
        w={isLargerThan62 ? '40%' : 'full'}
        mb={isLargerThan62 ? '0' : '6'}
        alignItems="center"
        justifyContent="center"
      >
        <Image src={teamImage} alt="Chakra Team" w="full" />
      </Flex>

      <Spacer />

      <Flex
        w={isLargerThan62 ? '60%' : 'full'}
        flexDirection="column"
        ml={isLargerThan62 ? '7' : '0'}
      >
        <Text fontSize={isLargerThan62 ? '5xl' : '4xl'} fontWeight="bold">
          We build, We revive
        </Text>

        <Text mb="6" opacity="0.8">
          Your business needs to be .. [truncated]
        </Text>

        <Button width="200px" size="lg" colorScheme="blue">
          CONTACT US
        </Button>
      </Flex>
    </Flex>
  );
};

export default Services;

Вход в полноэкранный режим Выход из полноэкранного режима

Из приведенного выше кода видно, что Chakra UI предоставляет компонент Image, который используется для отображения изображений. Он также принимает те же реквизиты, что и тег IMG в HTML.

✨ Кодирование компонента нижнего колонтитула

В этом разделе мы создадим нижний колонтитул веб-страницы и познакомимся с компонентом Link в Chakra UI.

import { Flex, Text, Link } from '@chakra-ui/react';
import React from 'react';

const Footer = () => {
  return (
    <Flex
      w="full"
      bg="blackAlpha.50"
      minHeight="20vh"
      flexDirection="column"
      alignItems="center"
      textAlign="center"
      justifyContent="center"
    >
      <Text mb="3">
        Provided by{' '}
        <Link href="https://appseed.us" isExternal color="blue.500">
          AppSeed
        </Link>
      </Text>
      <Text opacity="0.5">Open-Source Sample - Buit with Chakra UI</Text>
    </Flex>
  );
};

export default Footer;

Вход в полноэкранный режим Выход из полноэкранного режима

Из приведенного выше фрагмента кода:

✨ Включить темный режим

В этом разделе объясняется, как включить темный режим и добавить пользовательские цветовые схемы с помощью useColorModeValue. Вот шаги:

👉 #1 — Создайте файл theme.js в папке src и импортируйте extendTheme.

//in theme.js

import { extendTheme } from '@chakra-ui/react';

Вход в полноэкранный режим Выход из полноэкранного режима

👉 #2 — Создайте объект config, содержащий два свойства — initialColorMode и useSystemColorMode.

import { extendTheme } from '@chakra-ui/react';
const config = {
  initialColorMode: 'light',
  useSystemColorMode: false,
};

Вход в полноэкранный режим Выход из полноэкранного режима

Из приведенного выше фрагмента кода:

👉 #3 — Создайте переменную темы и экспортируйте конфиг с помощью extendTheme.

import { extendTheme } from '@chakra-ui/react';
const config = {
  initialColorMode: 'light',
  useSystemColorMode: false,
};
const theme = extendTheme({ config });

export default theme;

Вход в полноэкранный режим Выход из полноэкранного режима

👉 #4 — Отредактируйте файл index.js, чтобы использовать ChakraProvider.

Импортируйте ChakraProvider и ColorModeScript из Chakra UI и тему из theme.js.

import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
import theme from './theme'

Вход в полноэкранный режим Выход из полноэкранного режима

👉 #5 — Включить доступ к настройкам темы (все компоненты)

import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
import theme from './theme';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ChakraProvider>
    <ColorModeScript initialColorMode={theme.config.initialColorMode} />
    <App />
  </ChakraProvider>
);

Войти в полноэкранный режим Выйти из полноэкранного режима

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

✨ Переключение `темного` / `светлого` режима

В этом разделе мы создадим переключатель, который можно использовать для переключения между светлым и темным режимами.

👉 1# — Откройте src/components/Nav.js и импортируйте следующее:

import { useColorMode, useColorModeValue } from '@chakra-ui/react';

/* 
  useColorMode is a hook that selects and toggles between different colour modes.
  useColorModeValue is a hook that allows you to select the colour you want a Chakra UI component to change to.
*/

Вход в полноэкранный режим Выход из полноэкранного режима

👉 2# — Объявите хуки в компоненте

import { useColorMode, useColorModeValue } from '@chakra-ui/react';

const Nav = () => {
  const { colorMode, toggleColorMode } = useColorMode();
  const navBg = useColorModeValue('white', 'blackAlpha.200');
  ....
  ....
    return (
    <Flex
      bg={navBg}
    >
    ....
    ....
    </Flex>
  )
}

export default Nav;

Вход в полноэкранный режим Выход из полноэкранного режима

Из приведенного выше фрагмента кода

👉 3# — Добавьте иконку, которая переключает цветовой режим при нажатии на нее

import { useColorMode, useColorModeValue, Icon } from '@chakra-ui/react';
import { MoonIcon, SunIcon } from '@chakra-ui/icons';

const Nav = () => {
  const { colorMode, toggleColorMode } = useColorMode();
  const navBg = useColorModeValue('white', 'blackAlpha.200');
  ....
  ....
    return (
    <Flex
      bg={navBg}
    >
    <IconButton onClick={toggleColorMode}>
      {colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
    </IconButton>
  ....
    ....
    </Flex>
  )
}

export default Nav;

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

Из приведенного выше фрагмента кода:

Если colorMode светлый, то отображается иконка Луны, в противном случае отображается иконка Солнца.
При нажатии на иконку вызывается функция toggleColorMode.

✨ Выводы и ресурсы

В этой статье мы смогли создать полноценную и полностью отзывчивую веб-страницу с помощью Chakra UI. Вы также узнали о различных компонентах верстки, доступных в Chakra UI.

Chakra UI позволяет создавать современные веб-сайты с меньшим количеством кода. Благодаря удобной для навигации документации вы можете узнать о различных компонентах макета и возможностях Chakra UI.

Он обеспечивает чистый и эффективный способ изменения цветовых режимов с использованием локального хранилища. Если вы хотите создать сайт, который позволит пользователям выбирать различные цветовые схемы, Chakra UI — отличный выбор.

Спасибо за чтение! Для получения дополнительных ресурсов, не стесняйтесь зайти на сайт Бесплатные шаблоны Chakra UI (подробный список)

Chakra UI React — Кодирование простой посадочной страницы

✨ Темы

✨ Chakra UI, ключевые особенности

✨ Настройка Chakra UI с помощью CRA.

✨ Как стилизовать компоненты Chakra

✨ Кодирование компонента Nav

✨ Создание компонента Hero Component.

✨ Кодирование компонента «О нас

✨ Компонент услуг

✨ Кодирование компонента нижнего колонтитула

✨ Включить темный режим

✨ Переключение темного / светлого режима

✨ Выводы и ресурсы

Рекомендуем почитать:

✨ Настройка Chakra UI с помощью `CRA`.

✨ Создание компонента `Hero Component`.

✨ Переключение `темного` / `светлого` режима