스타일링 된 구성 요소로 React 디자인을 반복합니다

이상적으로는이 프로젝트에는 무제한 자원과 시간이 있습니다. 팀은 잘 생각되고 최적화 된 UX 디자인을 사용하여 코딩을 시작할 것입니다. 개발자는 최고의 스타일 접근 방식에 동의합니다. 팀에는 기능과 스타일이 엉망이되지 않고 동시에 출시 될 수 있는지 확인할 수있는 한 명 이상의 CSS 전문가가 있습니다.

나는 이것을 대규모 엔터프라이즈 환경에서 본다. 이것은 훌륭한 것입니다. 이 기사는이 사람들에게는 적용되지 않습니다.

반면, 소규모 신생 기업에는 자금이 제로이며 한두 개의 프론트 엔드 개발자 만 있으며 특정 기능을 보여주기 위해서는 매우 짧은 시간이 걸립니다. 완벽하게 보일 필요는 없지만 최소한 데스크탑, 태블릿 및 모바일 장치에 합리적으로 제시되어야합니다. 이를 통해 컨설턴트 및 초기 사용자에게 제시 할 수 있습니다. 아마도이 개념에 관심을 표명하는 잠재적 인 투자자조차도. 판매 및/또는 투자에서 현금 흐름을 얻으면 전용 UX 디자이너를 확보하고 인터페이스를 향상시킬 수 있습니다.

다음은 후자의 사람들에게 적용됩니다.

프로젝트 런칭 회의

프로젝트를 시작하기 위해 회사를 발명합시다.

Solar Excursions는 가까운 시일 내에 급성장하는 우주 관광 산업에 서비스를 제공하도록 설계된 소규모 여행사입니다.

우리의 소규모 개발 팀은 UI에 RECT를 사용하기로 합의했습니다. 우리의 프론트 엔드 개발자 중 하나는 Sass를 매우 좋아하는 반면 다른 하나는 JavaScript의 CSS에 집착합니다. 그러나 그들은 초기 스프린트 목표를 마치는 데 어려움을 겪고 있습니다. 물론 최고의 스타일 접근법에 대해 논쟁 할 시간이 없습니다. 두 코더 모두 장기적으로 선택은 일관되게 실행되는 한 중요하지 않다는 데 동의합니다. 그들은 지금 처음부터 처음부터 스타일을 구현하면 압력을 받으면 나중에 정리해야 할 기술 부채가 생길 것이라고 확신합니다.

일부 토론 후, 팀은 하나 이상의 "스타일 리팩토링"스프린트를 계획하기로 결정했습니다. 이제 우리는 React-Bootstrap을 사용하여 화면에 컨텐츠를 표시하는 데 중점을 둘 것입니다. 이렇게하면 많은 노력없이 효과적인 데스크톱 및 모바일 레이아웃을 빠르게 구축 할 수 있습니다.

프론트 엔드 스타일에 소비하는 시간이 줄어들수록 UI를 백엔드 개발자가 출시 할 서비스에 연결해야하기 때문에 더 좋습니다. 또한 응용 프로그램 아키텍처가 구체화되기 시작함에 따라 프론트 엔드 개발자는 단위 테스트가 중요하다는 데 동의합니다. 그들은 할 일이 많습니다.

전용 프로젝트 관리자로서 Power in Power와의 토론을 바탕으로 Balsamiq에서 최소 10 분 동안 열심히 일하면서 팀에게 데스크탑 및 모바일 장치에 페이지를 예약 할 수있는 모델을 제공했습니다. 나는 그들이 태블릿의 요구 사항을 중간에 충족시킬 것이라고 생각하며 합리적으로 보입니다.

Sprint Zero : 검토 회의

모든 곳에서 피자! 팀은 목표를 달성하기 위해 열심히 노력했으며 이제 모델과 비슷한 레이아웃이있는 예약 페이지가 있습니다. 서비스의 아키텍처가 형성되고 있지만 UI에 연결하기 전에 여전히 갈 길이 멀다. 이 기간 동안 프론트 엔드 개발자는 하드 코딩 된 시뮬레이션 데이터 구조를 사용하고 있습니다.

지금까지 UI 코드는 다음과 같습니다.

이것은 모두 간단한 반응입니다. 우리는 인기있는 후크 기술을 사용하고 있지만 대부분의 사람들에게는 구식 일 수 있습니다.

주목 할만한 점 은 5 개의 응용 프로그램 구성 요소 중 4 개가 React-Bootstrap에서 가져와 사용 된 구성 요소를 사용한다는 것입니다. 기본 앱 구성 요소 만 영향을받지 않습니다. 이는 사용자 지정 구성 요소를 사용하여 최상위 뷰를 결합하기 때문입니다.

 <code>// App.js imports import React, { useState } from "react"; import Navigation from "./Navigation"; import Page from "./Page"; // Navigation.js imports import React from "react"; import { Navbar, Dropdown, Nav } from "react-bootstrap"; // Page.js imports import React from "react"; import PosterCarousel from "./PosterCarousel"; import DestinationLayout from "./DestinationLayout"; import { Container, Row, Col } from "react-bootstrap"; // PosterCarousel.js imports import React from "react"; import { Alert, Carousel, Image } from "react-bootstrap"; // DestinationLayout.js imports import React, { useState, useEffect } from "react"; import { Button, Card, Col, Container, Dropdown, Jumbotron, ListGroup, Row, ToggleButtonGroup, ToggleButton } from "react-bootstrap";</code>

부트 스트랩으로 신속하게 행동하기로 한 결정을 통해 스프린트 목표를 달성 할 수는 있지만 이미 기술 부채를 축적하고 있습니다. 이것들은 4 개의 영향을받는 구성 요소에 불과하지만 응용 프로그램이 커지면서 우리가 계획 한 "스타일 리팩토링"스프린트가 점점 어려워 질 것임이 분명합니다. 우리는 이러한 구성 요소에 많은 사용자 정의가 없었습니다. 일단 우리가 수십 개의 구성 요소를 가지고 있다면, 부트 스트랩을 사용하고 많은 인라인 스타일을 사용하여 그들을 아름답게하기 위해 리팩토링하는 것은 매우 끔찍한 주장 일 것입니다.

팀은 더 많은 예약 파이프 라인 페이지를 구축하는 대신 서비스가 아직 건설 중이므로 사용자 정의 구성 요소 툴킷에서 React-Bootstrap 사용을 분리하기 위해 다음 스프린트를 소비하기로 결정했습니다. 응용 프로그램 구성 요소는이 툴킷의 구성 요소 만 사용합니다. 이런 식으로, 우리가 반응-부트 스트랩과 분리 될 때 프로세스가 훨씬 쉬워집니다. 응용 프로그램 전체에서 30 개의 React-Bootstrap 버튼의 사용을 리팩터링 할 필요가 없으므로 KitButton 구성 요소의 내부를 다시 작성하면됩니다.

첫 번째 스프린트 : 검토 회의

좋아, 쉽다. 높은 높이. UI의 시각적 모양은 변경되지 않았지만 이제는 React 소스 코드에 "구성 요소"의 형제 폴더 인 "키트"폴더가 있습니다. kitbutton.js와 같은 많은 파일이 있으며, 기본적으로 이름이 바뀌는 React-Bootstrap 구성 요소를 내보내는 파일이 있습니다.

툴킷의 예제 구성 요소는 다음과 같습니다.

 <code>// KitButton.js import { Button, ToggleButton, ToggleButtonGroup } from "react-bootstrap"; export const KitButton = Button; export const KitToggleButton = ToggleButton; export const KitToggleButtonGroup = ToggleButtonGroup;</code>

모든 툴킷 구성 요소를 다음과 같은 모듈로 패키지합니다.

 <code>// kit/index.js import { KitCard } from "./KitCard"; import { KitHero } from "./KitHero"; import { KitList } from "./KitList"; import { KitImage } from "./KitImage"; import { KitCarousel } from "./KitCarousel"; import { KitDropdown } from "./KitDropdown"; import { KitAttribution } from "./KitAttribution"; import { KitNavbar, KitNav } from "./KitNavbar"; import { KitContainer, KitRow, KitCol } from "./KitContainer"; import { KitButton, KitToggleButton, KitToggleButtonGroup } from "./KitButton"; export { KitCard, KitHero, KitList, KitImage, KitCarousel, KitDropdown, KitAttribution, KitButton, KitToggleButton, KitToggleButtonGroup, KitContainer, KitRow, KitCol, KitNavbar, KitNav };</code>

이제 우리의 응용 프로그램 구성 요소에는 반응 부트 스트랩이 전혀 없습니다. 영향을받는 구성 요소의 가져 오기는 다음과 같습니다.

 <code>// Navigation.js imports import React from "react"; import { KitNavbar, KitNav, KitDropdown } from "../kit"; // Page.js imports import React from "react"; import PosterCarousel from "./PosterCarousel"; import DestinationLayout from "./DestinationLayout"; import { KitContainer, KitRow, KitCol } from "../kit"; // PosterCarousel.js imports import React from "react"; import { KitAttribution, KitImage, KitCarousel } from "../kit"; // DestinationLayout.js imports import React, { useState, useEffect } from "react"; import { KitCard, KitHero, KitList, KitButton, KitToggleButton, KitToggleButtonGroup, KitDropdown, KitContainer, KitRow, KitCol } from "../kit";</code>

다음은 현재 프론트 엔드 코드 기반입니다.

툴킷 구성 요소에 모든 REACT 가져 오기를 포함하지만 응용 프로그램 구성 요소는 툴킷 구성 요소 인스턴스에 배치하는 속성이 React-BootStrap의 속성과 동일하기 때문에 여전히 React-Bootstrap 구현에 의존합니다. 이것은 동일한 API를 준수해야하기 때문에 툴킷 구성 요소를 다시 구현할 때 우리를 제한합니다. 예를 들어:

 <code>// 来自Navigation.js<kitnavbar bg="dark" fixed="top" variant="dark"></kitnavbar></code>

이상적으로, 우리가 Kitnavbar를 인스턴스화 할 때, 우리는 해당 react-bootstrap 특성을 추가 할 필요가 없습니다.

프론트 엔드 개발자는 이러한 속성을 계속하면서 문제가 발생했다고 확인했기 때문에 이러한 속성을 계속 리팩터링 할 것을 약속합니다. React-Bootstrap 구성 요소에 대한 새로운 참조는 응용 프로그램 구성 요소로 직접 이동하는 대신 툴킷으로 이동합니다.

동시에, 우리는 별도의 서버 환경을 구축하고 데이터베이스 패턴을 구현하며 일부 서비스를 우리에게 노출시키기 위해 열심히 노력하는 서버 엔지니어와 시뮬레이션 데이터를 공유합니다.

이것은 다음 스프린트에서 UI에 약간의 광택을 더할 시간을 제공합니다. 이는 Power의 사람들이 각 대상마다 별도의 테마를보고 싶어하기 때문에 훌륭합니다. 사용자가 대상을 탐색하면 표시된 여행 포스터와 일치하도록 UI 색 구성표를 변경해야합니다. 또한, 우리는 이러한 구성 요소를 개선하여 자신의 외관과 느낌을 개발하기를 바랍니다. 일단 소득이 있으면 디자이너에게 완전히 점검을하도록 요청할 것입니다. 그러나 초기 사용자에게 적합한 솔루션을 찾을 수 있기를 바랍니다.

두 번째 스프린트 : 검토 회의

우와! 팀은이 스프린트에서 실제로 최선을 다했습니다. 우리는 각 대상, 사용자 정의 구성 요소에 대한 테마를 얻었고 응용 프로그램 구성 요소에서 많은 잔류 React-Bootstrap API 구현을 제거했습니다.

현재 데스크탑 모양은 다음과 같습니다.

이를 달성하기 위해 프론트 엔드 개발자는 스타일의 구성 요소 라이브러리를 소개했습니다. 개별 툴킷 구성 요소를 스타일링하고 여러 테마에 대한 지원을 추가하는 것이 산들 ​​바람이됩니다.

스프린트의 하이라이트 중 일부를 살펴 보겠습니다.

먼저 글꼴을 가져 오기 및 페이지 바디 스타일 설정과 같은 글로벌 콘텐츠의 경우 Kitglobal이라는 새로운 툴킷 구성 요소가 있습니다.

 <code>// KitGlobal.js import { createGlobalStyle } from "styled-components"; export const KitGlobal = createGlobalStyle` body { @import url('https://fonts.googleapis.com/css?family=Orbitron:500|Nunito:600|Alegreya Sans SC:700'); background-color: ${props => props.theme.foreground}; overflow-x: hidden; } `;</code>

Createglobalstyle 도우미 기능을 사용하여 신체 요소의 CSS를 정의합니다. Google에서 필요한 웹 글꼴을 가져오고 배경색을 현재 테마의 전경 값으로 설정하고 X 방향으로 오버플로를 끄고 ​​불쾌한 수평 스크롤 바를 제거합니다. 우리는 앱 구성 요소의 렌더 메소드에서 kitglobal 구성 요소를 사용합니다.

또한 앱 구성 요소에서 우리는 ThemeProvider를 ../theme 및 "테마"라는 컨텐츠에서 스타일링 된 구성 요소에서 가져옵니다. 우리는 React의 usestate를 사용하여 초기 테마를 테마로 설정하고 "대상"이 변경 될 때 SetTheme을 호출하기 위해 React의 사용률을 사용합니다. 반환 된 구성 요소는 이제 ThemeProvider로 싸여 있으며 "테마"를 소품으로 전달합니다. 다음은 완전한 앱 구성 요소입니다.

 <code>// App.js import React, { useState, useEffect } from "react"; import { ThemeProvider } from "styled-components"; import themes from "../theme/"; import { KitGlobal } from "../kit"; import Navigation from "./Navigation"; import Page from "./Page"; export default function App(props) { const [destinationIndex, setDestinationIndex] = useState(0); const [theme, setTheme] = useState(themes.luna); const destination = props.destinations[destinationIndex]; useEffect(() => { setTheme(themes[destination.theme]); }, [destination]); return (<themeprovider theme="{theme}"><react.fragment><kitglobal></kitglobal><navigation destinationindex="{destinationIndex}" setdestinationindex="{setDestinationIndex}"></navigation><page destinationindex="{destinationIndex}" setdestinationindex="{setDestinationIndex}"></page></react.fragment></themeprovider> ); }</code>

Kitglobal은 다른 구성 요소와 마찬가지로 렌더링됩니다. 특별한 것은 없으며 바디 태그 만 영향을받습니다. ThemeProvider는 React Context API를 사용하여 테마를 필요한 구성 요소 (모든 구성 요소)로 전달합니다. 이를 완전히 이해하려면 주제가 무엇인지 확인해야합니다.

테마를 만들기 위해 프론트 엔드 개발자 중 한 명이 모든 여행 포스터를 가져 와서 강조 표시된 색상을 추출하여 각 포스터에 대한 팔레트를 만들었습니다. 이것은 매우 간단합니다.

분명히, 우리는 모든 색상을 사용하지 않을 것입니다. 이 방법은 주로 가장 일반적으로 사용되는 두 가지 색상을 전경과 배경으로 나타냅니다. 그런 다음 Accent1, Accent2 및 Accent3과 같이 일반적으로 가장 밝은 곳에서 가장 깊은 곳으로 배열되었습니다. 마지막으로, 우리는 Text1과 Text2를 지명하기 위해 두 가지 대조적 인 색상을 선택했습니다. 위의 목적지의 경우 다음과 같습니다.

 <code>// theme/index.js (部分列表) const themes = { ... mars: { background: "#a53237", foreground: "#f66f40", accent1: "#f8986d", accent2: "#9c4952", accent3: "#f66f40", text1: "#f5e5e1", text2: "#354f55" }, ... }; export default themes;</code>

각 대상에 대한 테마를 생성하고 모든 구성 요소 (현재 응용 프로그램 구성 요소가 구축 된 툴킷 구성 요소 포함)로 전달되면 스타일 컴포넌트를 사용하여 이러한 테마 색상과 패널 코너 및 "테두리 글로우"와 같은 사용자 정의 시각적 스타일을 적용해야합니다.

다음은 Kithero 구성 요소가 Jumbotron을 부트 스트랩하기 위해 테마 및 사용자 정의 스타일을 적용하는 간단한 예입니다.

 <code>// KitHero.js import styled from "styled-components"; import { Jumbotron } from "react-bootstrap"; export const KitHero = styled(Jumbotron)` background-color: ${props => props.theme.accent1}; color: ${props => props.theme.text2}; border-radius: 7px 25px; border-color: ${props => props.theme.accent3}; border-style: solid; border-width: 1px; box-shadow: 0 0 1px 2px #fdb813, 0 0 3px 4px #f8986d; font-family: "Nunito", sans-serif; margin-bottom: 20px; `;</code>

이 경우 스타일의 경쟁사가 반환하는 것을 사용할 수 있으므로 Kithero의 이름을 지정하고 내보내는 것만으로도 사용됩니다.

응용 프로그램에서 사용하면 다음과 같습니다.

 <code>// DestinationLayout.js (部分代码) const renderHero = () => { return (<kithero></kithero></code><h2 id="destination-header"> {destination.header}</h2>
      <p>{destination.blurb}</p>
      <kitbutton>지금 여행 예약하세요!</kitbutton>
  );
};

그런 다음 React-Bootstrap 구성 요소에 일부 속성을 사전 설정하려는 더 복잡한 상황이 있습니다. 예를 들어, 우리는 Kitnavbar 구성 요소에 응용 프로그램의 구성 요소 선언에서 오히려 전달되지 않을 반응-부트 스트랩 속성이 많다는 것을 앞서 결정했습니다.

이제 어떻게 처리되는지 봅시다.

 <code>// KitNavbar.js (部分代码) import React, { Component } from "react"; import styled from "styled-components"; import { Navbar } from "react-bootstrap"; const StyledBootstrapNavbar = styled(Navbar)` background-color: ${props => props.theme.background}; box-shadow: 0 0 1px 2px #fdb813, 0 0 3px 4px #f8986d; display: flex; flex-direction: horizontal; justify-content: space-between; font-family: "Nunito", sans-serif; `; export class KitNavbar extends Component { render() { const { ...props } = this.props; return ; } }</code>

먼저 Styled Components를 사용하여 StyledBootstrapnavbar라는 구성 요소를 만듭니다. 우리는 CSS를 사용하여 스타일의 경쟁사를 사용하여 일부 속성을 처리 할 수 ​​있습니다. 그러나 화면 상단에 (현재) 구성 요소의 신뢰할 수있는 고착성을 계속 활용하려면 (다른 모든 것이 스크롤 됨) 프론트 엔드 개발자는 React-Bootstrap의 고정 특성을 계속 사용하기로 결정했습니다. 이를 위해서는 고정 = 상단 속성을 사용하여 스타일의 Bootstrapnavbar 인스턴스를 렌더링하는 KitnaVbar 구성 요소를 작성해야합니다. 우리는 또한 아동 요소를 포함한 모든 소품을 전달합니다.

기본적으로 툴킷 구성 요소에서 특정 속성을 명시 적으로 설정하려면 스타일 구성 요소의 작업을 렌더링하고 소품을 전달하기 위해 별도의 클래스를 작성하면됩니다. 대부분의 경우, 우리는 스타일의 구성 요소의 출력을 지명하고 반환하고 Kithero가 위에서했던 것처럼 사용하면됩니다.

이제 응용 프로그램의 내비게이션 구성 요소에서 Kitnavbar를 렌더링하면 다음과 같습니다.

 <code>// Navigation.js (部分代码) return (<kitnavbar><kitnavbarbrand><kitlogo></kitlogo> Solar Excursions</kitnavbarbrand> {renderDestinationMenu()}</kitnavbar> );</code>

마지막으로, 먼저 React-Bootstrap의 툴킷 구성 요소를 리팩터링하려고했습니다. Kitattribution 구성 요소는 부트 스트랩 경고이며, 우리의 목적 상 정상적인 div에 지나지 않습니다. React-Bootstrap에 대한 의존성을 제거하기 위해 쉽게 리팩터링 할 수있었습니다.

이전 스프린트에서 나타나는 구성 요소는 다음과 같습니다.

 <code>// KitAttribution.js (使用react-bootstrap) import { Alert } from "react-bootstrap"; export const KitAttribution = Alert;</code>

이것이 바로 지금입니다.

 <code>// KitAttribution.js import styled from "styled-components"; export const KitAttribution = styled.div` text-align: center; background-color: ${props => props.theme.accent1}; color: ${props => props.theme.text2}; border-radius: 7px 25px; border-color: ${props => props.theme.accent3}; border-style: solid; border-width: 1px; box-shadow: 0 0 1px 2px #fdb813, 0 0 3px 4px #f8986d; font-family: "Alegreya Sans SC", sans-serif; > a { color: ${props => props.theme.text2}; font-family: "Nunito", sans-serif; } > a:hover { color: ${props => props.theme.background}; text-decoration-color: ${props => props.theme.accent3}; } `;</code>

더 이상 React-Bootstrap을 가져 오지 않지만 Styled.div를 구성 요소 기반으로 사용합니다. 그들은 모두 그렇게 쉬운 것은 아니지만 과정입니다.

우리 팀 이이 스프린트에서 한 스타일과 테마 디자인 작업의 결과는 다음과 같습니다.

여기에서 테마 페이지 자체를 확인하십시오.

결론적으로

3 개의 스프린트 후, 우리 팀은 UI의 확장 가능한 구성 요소 아키텍처를 성공적으로 구축하고 있습니다.

• 우리는 React-Bootstrap로 인해 빠르게 발전하고 있지만 더 이상 많은 양의 기술 부채를 쌓지 않습니다.
• 스타일의 경쟁자 덕분에 여러 테마를 구현할 수 있습니다 (오늘날 인터넷의 거의 모든 응용 프로그램과 마찬가지로 어둡고 가벼운 패턴이 있습니다). 우리는 더 이상 기성품 부트 스트랩 응용 프로그램과는 다릅니다.
• React-Bootstrap에 대한 모든 참조를 포함하는 사용자 정의 구성 요소 툴킷을 구현하면 필요에 따라이를 리팩터링 할 수 있습니다.

Github의 최종 코드 기반을 포크하십시오.

위 내용은 스타일링 된 구성 요소로 React 디자인을 반복합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!