スタイルのコンポーネントで反応デザインを繰り返します

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

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

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

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

プロジェクトの立ち上げ会議

プロジェクトを開始するために会社を発明しましょう。

Solar Excursionsは、近い将来、活況を呈している宇宙観光産業にサービスを提供するために設計された小さな旅行代理店です。

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

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

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

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

Sprint Zero：レビュー会議

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

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

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

注意すべき重要なポイントは、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依存関係を削除することは非常にひどい主張になります。

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

最初のスプリント：レビュー会議

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

現在、アプリケーションコンポーネントには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>

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

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コンポーネントへの新しい参照は、アプリケーションコンポーネントに直接移動する代わりに、Toolkitに移動します。

同時に、シミュレーションデータをServer Engineerと共有します。サーバーエンジニアは、別のサーバー環境を構築し、データベースパターンを実装し、一部のサービスを公開するために一生懸命取り組んでいます。

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

2番目のスプリント：レビュー会議

おお！チームは本当にこのスプリントで最善を尽くしました。各宛先、カスタムコンポーネントのテーマを取得し、アプリケーションコンポーネントから多くの残留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から必要なWebフォントをインポートし、背景色を現在のテーマのフォアグラウンド値に設定し、X方向のオーバーフローをオフにして、厄介な水平スクロールバーを排除します。アプリコンポーネントのレンダリング方法でキットグローバルコンポーネントを使用します。

また、アプリコンポーネントでは、「テーマ」という名前の../themeとコンテンツのスタイルのコンポーネントからThemeproviderをインポートします。 ReactのUseStateを使用して、最初のテーマをThemes.lunaに設定し、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を使用して、テーマを必要なコンポーネント（すべてのコンポーネント）に渡します。これを完全に理解するには、主題が何であるかを確認する必要があります。

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

明らかに、すべての色を使用することはありません。この方法は、主に、最も一般的に使用される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>

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

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 id="Destination-Header"> {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を使用して、スタイルのコンポーネントにいくつかのプロパティを処理できます。ただし、（現在の）コンポーネントの信頼できる画面への信頼できる粘着性を画面の上部に引き続き利用するために（他のすべてがスクロールされています）、フロントエンドの開発者はReact-Bootstrapの固定プロパティを使用し続けることを選択しました。これを行うには、固定= TOPプロパティを使用してStyledBootStrapNavbarのインスタンスをレンダンスするKitnavbarコンポーネントを作成する必要があります。また、子供の要素を含むすべての小道具も合格します。

デフォルトでツールキットコンポーネントに特定のプロパティを明示的に設定する場合は、スタイルのコンポーネントの作業をレンダリングしてプロップをパスするために、個別のクラスを作成するだけです。ほとんどの場合、スタイルのコンポーネントの出力に名前を付けて返すだけで、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をコンポーネントベースとして使用します。それらはすべてそれほど簡単ではありませんが、それはプロセスです。

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

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

結論は

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

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

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

以上がスタイルのコンポーネントで反応デザインを繰り返しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。