Chakra UI를 사용한 로그인 페이지 구축 - 섹션 1

65314 단어 webdev react frontend css

이 게시물은 최초로 제 blog에 게재되었습니다.
제 댓글 here을 구독하고 더 많이 보실 수 있습니다.
TL;박사 01 명
Chakra UI 디자인 시스템을 사용하여 React에서 응답 로그인 페이지를 구축하는 방법을 알려 드리겠습니다.이것은 첫 번째 부분입니다. 우리는 우리의 로그인 페이지를 구축하고 영웅적인 부분을 세울 것입니다.

짐 라프티스💥

🆕 Chakra UI 라이브러리만으로 0부터 기본 로그인 페이지를 구축하는 방법을 소개하는 블로그 시리즈를 준비하고 있습니다👇 나의 시사 통신을 구독하여 너에게 통지하다👇 raptis.wtf
2020년 7월 31일 오전 8:55

장치

create-react-app을 사용하여 새 프로젝트를 만들고 이를 로그인 페이지로 명명할 것입니다.

npx create-react-app landing-page
cd demo-app

그런 다음 Chakra의 UI 라이브러리와 종속 항목을 설치합니다.

yarn add @chakra-ui/core @emotion/core @emotion/styled emotion-theming

React를 사용하여 맥박 사용자 인터페이스를 설정하려면 ThemeProvider와 선택할 수 있는 사용자 정의 테마가 필요합니다.너는 my previous article about the installation을 조사할 수 있다.

폴더 구조 정의

이상적인 폴더 구조에 대해 대량의 토론이 있다.나는 완벽한 폴더 구조가 없다고 믿는다. 목표에 맞는 명확한 구조를 선택하면 이해할 수 있다.
폴더 구조에 KISS principle ("간단하고 어리석게 유지") 을 적용합니다.그것은 세 개의 핵심 디렉터리로 구성되어 있는데 그것이 바로 페이지, 구성 요소 및 UTIL이다.

├─ public
├─ src
    └─ components
        └─ layouts
        └─ sections
        └─ ui
    └─ utils
    └─ App.js
    └─ index.js

구성 요소 폴더

components 폴더에는 세 개의 하위 디렉토리가 있습니다.

모든 섹션(예: 영웅, 머리글, 바닥글)이 포함된 sections 폴더

홈 페이지 레이아웃이 포함된 layouts 폴더(예: LandingLayout, AuthLayout)

에는 비즈니스 논리나 부작용(예: 로고, 버튼)이 없는 모든 작은 구성 요소가 포함된 ui 폴더가 있습니다.

페이지 폴더

pages 폴더에서는 홈 페이지, 정보, 등록, 로그인 등과 같은 로그인 페이지의 모든 페이지를 배치할 수 있습니다.
모든 페이지는 여러 부분으로 구성된 레이아웃을 보여 줍니다.각 구성 요소는 주요 변수(텍스트, 이미지, 링크)를 도구로 사용하기 때문에 맞춤형 페이지를 쉽게 만들 수 있습니다.

Utils 폴더

utils 폴더에는 모든 함수 지원(예: 사용자 정의 테마)이 포함되어 있습니다.
경험법은 여러 곳에서 특정 기능이 필요할 때 조수 기능을 만드는 것이다.

애플리케이션 구성 요소 설치

Routing is optional for our tutorial since it will be a single page landing page. However most real-life landing pages have multiple pages, so I set up it here to save you some time.

App 구성 요소가 우리 프로그램의 경로를 처리할 것입니다.물론 우리는 가장 선진적인 react-router-dom 도서관을 사용할 것이다.
다음 명령을 입력하여 설치할 수 있습니다.

yarn add react-router-dom

우리의 강좌에 있어서, 루트는 선택할 수 있습니다. 왜냐하면 그것은 한 페이지의 로그인 페이지이기 때문입니다.그러나 대부분의 현실 생활의 로그인 페이지는 여러 페이지가 있기 때문에, 내가 여기에 설정하는 것은 당신의 생활을 더욱 가볍게 하기 위해서이다.
우리의 설정은 매우 간단할 것이다.자세한 내용은 official docs을 참조하십시오.
UI와 URL이 동기화되도록 애플리케이션을 BrowserRouter 구성 요소로 포장해야 합니다.BrowserRouter는 내부에서 Router 객체를 처리하므로 일반 history에서 사용하는 것이 좋습니다.
그리고 우리는 우리의 Route 구성 요소(우리의 예시에서 /)를 정의하고 Switch 구성 요소로 포장했다.
스위치 구성 요소는 현재 위치와 일치하는 라우트를 선택하고 하나의 구성 요소만 반환합니다.

import React from "react"
import { BrowserRouter, Switch, Route } from "react-router-dom"

import Landing from "./pages/Landing"

export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/">
          <Landing />
        </Route>
      </Switch>
    </BrowserRouter>
  )
}

레이아웃 생성하기

지금은 LandingLayout.js 파일을 만들어 /components/layouts 폴더에 넣을 때입니다.
이 구성 요소는 항상 꼬리표, 꼬리표, 그리고 하위 단계로 전달되는 모든 구성 요소를 보여 줍니다.
로그인 페이지의 수직 레이아웃을 실현하려면 Flex Chakra UI 구성 요소를 추가해야 합니다.그것은 div으로 고전적인 display: flex 요소로 나타난다.Flex 구성 요소에는 다음과 같은 유용한 속기 도구가 있습니다.

flexDirection은 direction입니다.

flexWrap은 wrap입니다.

alignItems은 align입니다.

justifyContent은 justify입니다.

따라서 초기 LandingLayout 구성 요소는 제목 구성 요소와 모든 하위 구성 요소를 보여주는 열 중심의 flexbox입니다.레이아웃을 가운데로 배치하고 응답하도록 margin: 0 auto CSS 스타일을 추가하고 max-width: 1200px을 큰 화면으로 설정합니다.
맥박 UI에서는 응답 스타일을 정의하는 두 가지 방법이 있습니다.구체적인 상황에 따라 당신은 더욱 적합하고 읽을 수 있는 해결 방안을 선택할 수 있습니다.

  // First option
  maxW={[
      "auto",    // base
      "auto",    // 480px upwards
      "auto",    // 768px upwards
      "1200px",  // 992px upwards
    ]}

  // Second option
  maxW={{
    base: "auto",
    sm: "auto",
    md: "auto",
    lg: "auto",
    xl: "1200px"
  }}

전체 LandingLayout 구성 요소는 다음과 같습니다.

import React from "react"
import { Flex } from "@chakra-ui/core"
import Header from "../sections/Header"
import Footer from "../sections/Footer" // will add this in the part 2

export default function LandingLayout(props) {
  return (
    <Flex
      direction="column"
      align="center"
      maxW={{ xl: "1200px" }}
      m="0 auto"
      {...props}
    >
      <Header />
      {props.children}
      <Footer />
    </Flex>
  )
}

다음 단계에서는 Header 내부 LandingLayout. 구성 요소 생성

응답 제목 구성 요소

Header.js 파일은 /components/sections 폴더에 있습니다.
이 구성 요소의 시작점은 Jean Bauer가 공식 맥박 UI 문서에 있는 this code입니다.
구성 요소가 완전히 응답하고 UI가 향상되도록 조정할 것입니다.

가장 바깥쪽 구성 요소는 nav 요소로 렌더링된 줄 flexbox입니다.justify 속성은 로고와 실제 메뉴 사이에 적당한 공간을 두도록 space-between으로 설정합니다.
또한 활성 화면 크기에 따라 background-color과 color 규칙을 위 그림에 표시된 색상 조합으로 설정합니다.

<Flex
  as="nav"
  align="center"
  justify="space-between"
  wrap="wrap"
  w="100%"
  mb={8}
  p={8}
  bg={["primary.500", "primary.500", "transparent", "transparent"]}
  color={["white", "white", "primary.700", "primary.700"]}
  {...props}
>
  ...
</Flex>

CSS 규칙 display: block과 display: none을 조건부로 적용하여 메뉴 아이콘과 메뉴 항목을 숨기거나 표시하는 것이 기본 기술입니다.
메뉴/닫기 아이콘은 base 섀시에서만 볼 수 있으며 md 브레이크보다 큰 화면에서는 숨겨집니다.show의 값에 따르면 우리는 CloseIcon(show === true시) 또는 MenuIcon(show === false시)을 나타낸다.

<Box display={{ base: "block", md: "none" }} onClick={toggleMenu}>
  {show ? <CloseIcon /> : <MenuIcon />}
</Box>

같은 기교도 메뉴 항목에 적용된다.이 항목들은 항상 md 단점보다 큰 화면에 표시되며, 조건부로 작은 화면에 표시됩니다.이 조건은 메뉴/닫기 아이콘을 눌러 전환할 수 있는 show 변수의 상태에 따라 달라집니다.
여기서 주의해야 할 사항은 flex-basic CSS 속성 사용입니다.그것은 신축성 물품의 초기 주 사이즈를 설정한다.메뉴 아이콘이 나타날 때, 이 속성을 사용하여 항목을 새 줄로 강제로 들어갑니다.최상위 계층의 Flex 어셈블리에 대한 규칙 flex-wrap: wrap과 결합하여 서브어셈블리가 새 라인에 들어갈 수 있도록 합니다.

<Box
  display={{ base: show ? "block" : "none", md: "block" }}
  flexBasis={{ base: "100%", md: "auto" }}
>
  ...
</Box>

상자 안에 우리의 진정한 메뉴가 놓여 있다.우리의 생활을 더욱 가볍게 하기 위해서, 우리는 Flex 용기를 사용할 것이다. 이것은 하위 원소의 방향을 정의하고 그것들의 위치를 증명하는 것을 책임진다.
여기에 간단한 힌트가 하나 있다.Flex 구성 요소 대신 Stack 구성 요소를 선택할 수 있습니다.그러나 스택 구성 요소에서 UI 오류가 발생하여 Flex과 함께 사용됩니다.

<Flex
  align="center"
  justify={["center", "space-between", "flex-end", "flex-end"]}
  direction={["column", "row", "row", "row"]}
  pt={[4, 4, 0, 0]}
>
  ...
</Flex>

메뉴 항목의 경우 MenuItem 구성 요소를 별도로 생성하여 Text 구성 요소를 원하는 위치로 렌더링합니다.Link 구성 요소를 용기로 사용하기 때문에 메뉴 항목 사이의 간격을 수동으로 설정해야 합니다.
이는 Flex을 통해 이뤄졌다.이 도구는 메뉴 항목에 적당한 경계를 추가해야 하는지 여부를 표시합니다.

const MenuItem = ({ children, isLast, to = "/", ...rest }) => {
  return (
    <Text
      mb={{ base: isLast ? 0 : 8, sm: 0 }}
      mr={{ base: 0, sm: isLast ? 0 : 8 }}
      display="block"
      {...rest}
    >
      <Link to={to}>{children}</Link>
    </Text>
  )
}

최종 수확대 구성 요소는 다음과 같습니다.

import React from "react"
import { Link } from "react-router-dom"
import { Box, Flex, Text, Button, Stack, PseudoBox } from "@chakra-ui/core"
import Logo from "../ui/Logo"

import { CloseIcon, MenuIcon } from ".../Icons"

const MenuItems = props => {
  const { children, isLast, to = "/", ...rest } = props
  return (
    <Text
      mb={{ base: isLast ? 0 : 8, sm: 0 }}
      mr={{ base: 0, sm: isLast ? 0 : 8 }}
      display="block"
      {...rest}
    >
      <Link to={to}>{children}</Link>
    </Text>
  )
}

const Header = props => {
  const [show, setShow] = React.useState(false)
  const toggleMenu = () => setShow(!show)

  return (
    <Flex
      as="nav"
      align="center"
      justify="space-between"
      wrap="wrap"
      w="100%"
      mb={8}
      p={8}
      bg={["primary.500", "primary.500", "transparent", "transparent"]}
      color={["white", "white", "primary.700", "primary.700"]}
      {...props}
    >
      <Flex align="center">
        <Logo
          w="100px"
          color={["white", "white", "primary.500", "primary.500"]}
        />
      </Flex>

      <Box display={{ base: "block", md: "none" }} onClick={toggleMenu}>
        {show ? <CloseIcon /> : <MenuIcon />}
      </Box>

      <Box
        display={{ base: show ? "block" : "none", md: "block" }}
        flexBasis={{ base: "100%", md: "auto" }}
      >
        <Flex
          align={["center", "center", "center", "center"]}
          justify={["center", "space-between", "flex-end", "flex-end"]}
          direction={["column", "row", "row", "row"]}
          pt={[4, 4, 0, 0]}
        >
          <MenuItems to="/">Home</MenuItems>
          <MenuItems to="/how">How It works </MenuItems>
          <MenuItems to="/faetures">Features </MenuItems>
          <MenuItems to="/pricing">Pricing </MenuItems>
          <MenuItems to="/signup" isLast>
            <Button
              size="sm"
              rounded="md"
              color={["primary.500", "primary.500", "white", "white"]}
              bg={["white", "white", "primary.500", "primary.500"]}
              _hover={{
                bg: [
                  "primary.100",
                  "primary.100",
                  "primary.600",
                  "primary.600",
                ],
              }}
            >
              Create Account
            </Button>
          </MenuItems>
        </Flex>
      </Box>
    </Flex>
  )
}

export default Header

영웅 파트로 들어갑시다.

영웅적인 부분은 모든 로그인 페이지에서 가장 중요한 부분이다.이것은 첫 번째 부분입니다. 사용자와 상호작용을 하려면 완벽해야 합니다!
아래와 같이 이 절은 두 개의 핵심 요소로 구성되어 있다.그림과 주요 내용(제목, 자막, CTA 버튼).

진일보한 토론을 하기 전에, 이것은 우리가 반드시 조립품을 위해 도구를 정의해야 하는 곳이다.우리의 영웅 부분의 주요 변수는 다섯 개다.제목, 부제목 및 버튼의 텍스트 및 이미지 및 CTA 링크의 URL입니다.

export default function Hero({
  title,
  subtitle,
  image,
  ctaLink,
  ctaText,
  ...rest
}) {
  return ();
}

실제 코드에 관해서는 맨 위 용기가 다시 isLast 구성 요소가 될 것이다.화면 크기에 따라 Flex과 flex-direction의 속성을 변경합니다.
모바일 장치의 경우 방향을 justify-content으로 설정합니다.이 선택의 배후 원인은 우리가 두 주요 원소의 순서를 바꾸려고 하기 때문이다.column-reverse 아이템을 전달하여 as가 외부에서 rest 부품의 가장 바깥쪽 용기를 조종할 수 있도록 합니다.

<Flex
  align="center"
  justify={{ base: "center", md: "space-around", xl: "space-between" }}
  direction={{ base: "column-reverse", md: "row" }}
  wrap="no-wrap"
  minH="70vh"
  px={8}
  mb={16}
  {...rest}
>
  ...
</Flex>

Hero의 속성을 전달하여 이 부분이 대형 모니터에서 수직으로 가운데에 있음을 증명합니다.너는 아래 그림에서 다른 점을 볼 수 있다.

이제 이미지 구성 요소를 만들 때가 되었습니다.할 일은 너비만 조절하는 거야.소형 설비에 있어서 우리는 min-height을 강제로 적용하고 점차적으로 줄이기를 희망한다.
그 밖에 우리는 작은 화면에 width: 80%을 추가하여 이미지와 내용 사이의 공간을 더욱 넓혔다.

<Box w={{ base: "80%", sm: "60%", md: "50%" }} mb={{ base: 12, md: 0 }}>
  <Image src={image} size="100%" rounded="1rem" shadow="2xl" />
</Box>

내용 요소에 관해서는 간단한 margin-bottom 요소로 두 개의 Stack 구성 요소, Heading과 단추 아래 텍스트에 대한 Button 구성 요소를 포함한다.
여기서 유일하게 주의해야 할 것은 요소의 정렬이다. 이 요소들은 이동 장치를 중심으로 해야 하고, 더 큰 화면의 경우 왼쪽에 있어야 한다.

<Stack
  spacing={4}
  w={{ base: "80%", md: "40%" }}
  align={["center", "center", "flex-start", "flex-start"]}
>
  <Heading
    as="h1"
    size="xl"
    fontWeight="bold"
    color="primary.800"
    textAlign={["center", "center", "left", "left"]}
  >
    {title}
  </Heading>
  <Heading
    as="h2"
    size="md"
    color="primary.800"
    opacity="0.8"
    fontWeight="normal"
    lineHeight={1.5}
    textAlign={["center", "center", "left", "left"]}
  >
    {subtitle}
  </Heading>
  <Link to={ctaLink}>
    <Button
      variantColor="primary"
      borderRadius="8px"
      py="4"
      px="4"
      lineHeight="1"
      size="md"
      rightIcon="chevron-right"
    >
      {ctaText}
    </Button>
  </Link>
  <Text
    fontSize="xs"
    mt={2}
    textAlign="center"
    color="primary.800"
    opacity="0.6"
  >
    No credit card required.
  </Text>
</Stack>

Hero 구성 요소가 준비되었으므로 아래에서 전체 코드를 볼 수 있습니다.

import React from "react"
import { Link } from "react-router-dom"
import PropTypes from "prop-types"
import { Box, Button, Flex, Image, Heading, Stack, Text } from "@chakra-ui/core"

export default function Hero({
  title,
  subtitle,
  image,
  ctaLink,
  ctaText,
  ...rest
}) {
  return (
    <Flex
      align="center"
      justify={{ base: "center", md: "space-around", xl: "space-between" }}
      direction={{ base: "column-reverse", md: "row" }}
      wrap="no-wrap"
      minH="70vh"
      px={8}
      mb={16}
      {...rest}
    >
      <Stack
        spacing={4}
        w={{ base: "80%", md: "40%" }}
        align={["center", "center", "flex-start", "flex-start"]}
      >
        <Heading
          as="h1"
          size="xl"
          fontWeight="bold"
          color="primary.800"
          textAlign={["center", "center", "left", "left"]}
        >
          {title}
        </Heading>
        <Heading
          as="h2"
          size="md"
          color="primary.800"
          opacity="0.8"
          fontWeight="normal"
          lineHeight={1.5}
          textAlign={["center", "center", "left", "left"]}
        >
          {subtitle}
        </Heading>
        <Link to={ctaLink}>
          <Button
            variantColor="primary"
            borderRadius="8px"
            py="4"
            px="4"
            lineHeight="1"
            size="md"
            rightIcon="chevron-right"
          >
            {ctaText}
          </Button>
        </Link>
        <Text
          fontSize="xs"
          mt={2}
          textAlign="center"
          color="primary.800"
          opacity="0.6"
        >
          No credit card required.
        </Text>
      </Stack>
      <Box w={{ base: "80%", sm: "60%", md: "50%" }} mb={{ base: 12, md: 0 }}>
        <Image src={image} size="100%" rounded="1rem" shadow="2xl" />
      </Box>
    </Flex>
  )
}

Hero.propTypes = {
  title: PropTypes.string,
  subtitle: PropTypes.string,
  image: PropTypes.string,
  ctaText: PropTypes.string,
  ctaLink: PropTypes.string,
}

Hero.defaultProps = {
  title: "React landing page with Chakra UI",
  subtitle:
    "This is the subheader section where you describe the basic benefits of your product",
  image: "https://source.unsplash.com/collection/404339/800x600",
  ctaText: "Create your account now",
  ctaLink: "/signup",
}

총결산

지금까지 우리 로그인 페이지는 이랬을 거야!

다음 주에 우리는 응답성 스크립트와 기능 부분을 구축할 것이다.
만약 당신이 이 글을 좋아한다면, 당신은 나와 함께 코딩, 디자인, 소형 창업 회사를 이끄는 일상적인 기교를 공유할 수 있습니다.

Reference

이 문제에 관하여(Chakra UI를 사용한 로그인 페이지 구축 - 섹션 1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/d__raptis/build-a-landing-page-with-chakra-ui-part-1-56gd

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

MATLAB 생성.coe 파일 및.mif 파일 코드 예

순수 CSS 아트웍을 만들고 애니메이션을 만드는 방법 - 섹션 2

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다