理想的には、プロジェクトには無制限のリソースと時(shí)間があります。チームは、よく考え抜かれた高度に最適化されたUXデザインを使用してコーディングを開始します。開発者は、最良のスタイリングアプローチに同意します。チームには、混亂にならずに機(jī)能とスタイルを同時(shí)に展開できるようにすることができる1人以上のCSS専門家がいます。

私はこれを大規(guī)模なエンタープライズ環(huán)境で見ています。これは素晴らしいことです。この記事はこれらの人々には適用されません。

一方、小規(guī)模なスタートアップには資金がゼロになり、1つまたは2つのフロントエンド開発者のみがあり、特定の機(jī)能を紹介するのに非常に短い時(shí)間がかかります。完璧に見える必要はありませんが、少なくともデスクトップ、タブレット、モバイルデバイスに合理的に提示する必要があります。これにより、コンサルタントや初期のユーザーに提示できます。おそらく、この概念に関心を表明する潛在的な投資家でさえ。販売や投資からキャッシュフローを獲得すると、専用のUXデザイナーを取得してインターフェイスを改善できます。

以下は、後者の人々のグループに適用されます。

プロジェクトの立ち上げ會(huì)議

プロジェクトを開始するために會(huì)社を発明しましょう。

Solar Excursionsは、近い將來、活況を呈している宇宙観光産業(yè)にサービスを提供するために設(shè)計(jì)された小さな旅行代理店です。

私たちの小さな開発チームは、UIにReactを使用することに同意しました。フロントエンドの開発者の1人はSASSを非常に愛し、もう1人はJavaScriptのCSSに取りつかれています。しかし、彼らは最初のスプリントの目標(biāo)を完了するのに苦労しています。もちろん、最高のスタイルアプローチについて議論する時(shí)間はありません。両方のコーダーは、長期的には、選択が一貫して実行されている限り重要ではないことに同意します。彼らは、現(xiàn)在プレッシャーにさらされてスタイルをゼロから実裝することで、後でクリーンアップする必要がある技術(shù)的な負(fù)債が得られると確信しています。

いくつかの議論の後、チームは1つ以上の「スタイルリファクタリング」スプリントを計(jì)畫することを選択しました。次に、React-Bootstrapを使用して畫面にコンテンツを表示することに焦點(diǎn)を當(dāng)てます。これにより、効果的なデスクトップとモバイルのレイアウトを大いに努力することなく迅速に構(gòu)築できます。

フロントエンドスタイルに費(fèi)やす時(shí)間が短いほど、UIをバックエンド開発者が立ち上げるサービスに接続する必要があるため、より良いです。また、アプリケーションアーキテクチャが形になり始めると、両方のフロントエンド開発者が単位テストが重要であることに同意します。彼らにはやることがたくさんあります。

専用のプロジェクトマネージャーとして、権力のある人々との私の議論に基づいて、私は少なくとも10分間Balsamiqで一生懸命取り組み、チームにデスクトップおよびモバイルデバイスでページを予約するためのモデルを提供しました。彼らは真ん中のタブレットの要件を満たすと思います、そしてそれは合理的に見えます。

Sprint Zero：レビュー會(huì)議

どこでもピザ！チームは目標(biāo)を達(dá)成するために一生懸命働き、モデルと同様のレイアウトを備えた予約ページがあります。サービスのアーキテクチャは形になっていますが、UIに接続する前にまだ長い道のりがあります。この間、フロントエンド開発者は、ハードコーディングされたシミュレートされたデータ構(gòu)造を使用しています。

これまでのUIコードは次のとおりです。

これはすべて簡単な反応です。私たちはいくつかの人気のあるHooks Technologiesを使用していますが、ほとんどの人にとって、これは時(shí)代遅れかもしれません。

注意すべき重要なポイントは、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>

ブートストラップで迅速に行動(dòng)するという決定により、スプリントの目標(biāo)を達(dá)成することができますが、すでに技術(shù)的な負(fù)債を蓄積しています。これらは影響を受ける4つのコンポーネントにすぎませんが、アプリケーションが成長するにつれて、計(jì)畫した「スタイルリファクタリング」スプリントがますます困難になることは明らかです。これらのコンポーネントのカスタマイズさえありませんでした。何十ものコンポーネントがあると、すべてがブートストラップを使用し、多くのインラインスタイルを使用してそれらを美化すると、それらをリファクタリングしてReact-Bootstrap依存関係を削除することは非常にひどい主張になります。

パイプラインの予約ページをさらに構(gòu)築するのではなく、チームは、サービスがまだ建設(shè)中であるため、次のスプリントをカスタムコンポーネントツールキットで隔離することを決定しました。アプリケーションコンポーネントは、このツールキットのコンポーネントのみを使用します。このようにして、React-Bootstrapから分離すると、プロセスがはるかに簡単になります。アプリケーション全體で30のReact-Bootstrapボタンの使用をリファクタリングする必要はありません。キットボタンコンポーネントの內(nèi)部を書き換えるだけです。

最初のスプリント：レビュー會(huì)議

わかりました、それは簡単です。ハイハイ。 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>

現(xiàn)在、アプリケーションコンポーネントにはReact-Bootstrapがまったくありません。影響を受けるコンポーネントのインポートは次のとおりです。

 <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>

現(xiàn)在のフロントエンドコードベースは次のとおりです。

ToolkitコンポーネントにすべてのReactインポートを含めていますが、アプリケーションコンポーネントは、Toolkitコンポーネントインスタンスに配置するプロパティがReact-Bootstrapのプロパティと同じであるため、React-Bootstrapの実裝に依然として依存しています。これは、同じAPIに接著する必要があるため、ツールキットコンポーネントを再実裝するときに私たちを制限します。例えば：

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

理想的には、kitnavbarをインスタンス化する場合、それらのReact-bootstrap固有の特性を追加する必要はありません。

フロントエンドの開発者は、これらのプロパティが継続するにつれてリファクタリングすることを約束します。これは、問題があると特定したためです。 React-Bootstrapコンポーネントへの新しい參照は、アプリケーションコンポーネントに直接移動(dòng)する代わりに、Toolkitに移動(dòng)します。

同時(shí)に、シミュレーションデータをServer Engineerと共有します。サーバーエンジニアは、別のサーバー環(huán)境を構(gòu)築し、データベースパターンを?qū)g裝し、一部のサービスを公開するために一生懸命取り組んでいます。

これにより、次のスプリントでUIに輝きを加える時(shí)間が與えられます。これは、各宛先の別々のテーマを権力を握りたいと思っているため、素晴らしいことです。ユーザーが目的地を閲覧したら、表示された旅行ポスターに合わせてUI配色を変更する必要があります。さらに、これらのコンポーネントを改善して、獨(dú)自のルックアンドフィールの開発を開始したいと考えています。収入が得られたら、デザイナーに完全なオーバーホールを行うように頼みますが、うまくいけば、早期ユーザーに適したソリューションを見つけることができます。

2番目のスプリント：レビュー會(huì)議

おお！チームは本當(dāng)にこのスプリントで最善を盡くしました。各宛先、カスタムコンポーネントのテーマを取得し、アプリケーションコンポーネントから多くの殘留React-Bootstrap API実裝を削除しました。

これが現(xiàn)在のデスクトップの外観です：

これを達(dá)成するために、フロントエンド開発者はスタイルのコンポーネントライブラリを?qū)毪筏蓼筏?。個(gè)々のツールキットコンポーネントをスタイリングし、複數(shù)のテーマのサポートを追加するのが簡単になります。

スプリントのハイライトのいくつかを見てみましょう。

まず、フォントのインポートやページボディスタイルの設(shè)定などのグローバルコンテンツには、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ヘルパー関數(shù)を使用して、身體要素のCSSを定義します。 Googleから必要なWebフォントをインポートし、背景色を現(xiàn)在のテーマのフォアグラウンド値に設(shè)定し、X方向のオーバーフローをオフにして、厄介な水平スクロールバーを排除します。アプリコンポーネントのレンダリング方法でキットグローバルコンポーネントを使用します。

また、アプリコンポーネントでは、「テーマ」という名前の../themeとコンテンツのスタイルのコンポーネントからThemeproviderをインポートします。 ReactのUseStateを使用して、最初のテーマをThemes.lunaに設(shè)定し、Reactの使用Effectを使用して、「宛先」が変更されたときにSetThemeを呼び出します。返されたコンポーネントは、「テーマ」を小道具として渡す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を使用して、テーマを必要なコンポーネント（すべてのコンポーネント）に渡します。これを完全に理解するには、主題が何であるかを確認(rèn)する必要があります。

テーマを作成するために、フロントエンドの開発者の1人がすべての旅行ポスターを取り、強(qiáng)調(diào)表示された色を抽出して各ポスターのパレットを作成しました。これは非常に簡単です。

明らかに、すべての色を使用することはありません。この方法は、主に、最も一般的に使用される2つの色を前景と背景と呼んでいます。次に、Accent1、Accent2およびAccent3として、通常は最も軽いものから最も深いものに配置された3つの色を取りました。最後に、Text1とtext2という名前に2つの対照的な色を選択しました。上記の目的地では、これは次のように見えます。

 <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>

各宛先のテーマを作成し、すべてのコンポーネント（アプリケーションコンポーネントが構(gòu)築されるツールキットコンポーネントを含む）に渡されたら、スタイルのコンポーネントを使用して、これらのテーマ色とパネルコーナーや「ボーダーグロー」などのカスタムビジュアルスタイルを適用する必要があります。

KitheroコンポーネントがBootstrap 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>

この場合、スタイルのコンポーネントが返すものを使用できるため、名前を付けてエクスポートする必要があります。

アプリケーションで使用すると、次のようになります。

 <code>// DestinationLayout.js (部分代碼) const renderHero = () => { return (<kithero></kithero></code><h2> {Destination.Header}</h2>
      <p>{Destination.Blurb}</p>
      <kitbutton>今すぐあなたの旅行を予約してください！</kitbutton>
  ）;
};

次に、React-Bootstrapコンポーネントにいくつかのプロパティをプリセットしたいより複雑な狀況があります。たとえば、Kitnavbarコンポーネントには、アプリケーションのコンポーネント宣言から渡されたくないReact-Bootstrapプロパティの束があることを以前に判斷しました。

それでは、それがどのように処理されているか見てみましょう：

 <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>

まず、スタイルのコンポーネントを使用して、styledbootstrapnavbarという名前のコンポーネントを作成します。渡されたCSSを使用して、スタイルのコンポーネントにいくつかのプロパティを処理できます。ただし、（現(xiàn)在の）コンポーネントの信頼できる畫面への信頼できる粘著性を畫面の上部に引き続き利用するために（他のすべてがスクロールされています）、フロントエンドの開発者はReact-Bootstrapの固定プロパティを使用し続けることを選択しました。これを行うには、固定= TOPプロパティを使用してStyledBootStrapNavbarのインスタンスをレンダンスするKitnavbarコンポーネントを作成する必要があります。また、子供の要素を含むすべての小道具も合格します。

デフォルトでツールキットコンポーネントに特定のプロパティを明示的に設(shè)定する場合は、スタイルのコンポーネントの作業(yè)をレンダリングしてプロップをパスするために、個(gè)別のクラスを作成するだけです。ほとんどの場合、スタイルのコンポーネントの出力に名前を付けて返すだけで、Kithoが上記のように使用する必要があります。

今、私たちがアプリケーションのナビゲーションコンポーネントでkitnavbarをレンダリングするとき、それは次のようになります：

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

最後に、最初にReact-BootstrapからToolkitコンポーネントをリファクタリングしようとしました。 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をコンポーネントベースとして使用します。それらはすべてそれほど簡単ではありませんが、それはプロセスです。

このスプリント中にチームが行ったスタイルとテーマのデザイン作業(yè)の結(jié)果は次のとおりです。

こちらのテーマページ自體をご覧ください。

結(jié)論は

3つのスプリントの後、私たちのチームはUIのスケーラブルなコンポーネントアーキテクチャを正常に構(gòu)築しています。

• React-Bootstrapのために私たちはすぐに前進(jìn)していますが、大量の技術(shù)的債務(wù)を蓄積しなくなりました。
• スタイルのコンポーネントのおかげで、複數(shù)のテーマを?qū)g裝することができます（今日のインターネット上のほぼすべてのアプリケーションには、暗くて明るいパターンがあります）。私たちはもはや既製のブートストラップアプリケーションのようではありません。
• React-Bootstrapへのすべての參照を含むカスタムコンポーネントツールキットを?qū)g裝することにより、必要に応じてリファクタリングできます。

GitHubの最終コードベースをフォークします。

以上がスタイルのコンポーネントで反応デザインを繰り返しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。