react ui interactions

ReactのUIインスピレーション

UI相互作用を反応します

小さな反応プロジェクトのセットに詰め込まれたUIコンセプトのコレクション。背後にあるアイデアは、最新のコミュニティプラクティスを活用して、実際のプロジェクトに有用なパターンを提供することです。特定のUI要素を提示することにより、アニメーションとトランジション、マイクロインタラクション、応答性、ナビゲーション、データフェッチ、状態操作など、基本的および高度なソリューションをカバーします。

モチベーション

Webアプリケーションの構築には、多くのUI問題を解決する必要があります。プリティカルケースを解決するのに役立つライブラリがたくさんありますが、非常に多くの場合、独自のソリューションを思いつきます。その場合、このリポジトリを使用すると、ユーザーインターフェイスの作業中に典型的な課題に役立つパターンを発見できます。おそらく気づいたように、プロジェクトはReactで書かれています。私はそれを使うのが快適だと感じています。ただし、ここで提示されるソリューションは、他のコンポーネントベースのフレームワークで正常に使用できると思います。

原則

• 直接-削除しやすく、ある場所から別の場所に移動できる明示的および共同配置されたコードを採用します。変化は最終的に起こることであるため、これは変化の最適化です。コードは直接的かつ具体的であるため、ニーズに合わせて簡単にコピーして適応できます。
• ？シンプル- 柔軟性を実現する唯一の方法は、できるだけシンプルで簡単に変更できるようにすることです。 「より悪い」の台頭に続いて

  デザインは、実装とインターフェイスの両方でシンプルでなければなりません。インターフェイスが実装よりもシンプルであることがより重要です。

• ？クラスなし- 機能コンポーネントのみ。
• hooks-フックを完全に使用します（React 16.7.0 -alphaの時点で利用可能）。
• ？ Code Splitting React.lazyとimport()を使用し、Webpackにジョブを実行させます。
• suspense-サスペンス- コード分割のためにサスペンスを反応します。
• ？ CSS-in-JS-ルックアンドフィール用のスタイルのコンポーネントに基づいています。
• ？デフォルトを宣伝- できるだけ少ない構成。できる限りデフォルトを使用します。

使い方

• 必要なものは何でもコピーして貼り付けてください。
• インスピレーションを受けてください。好きなUIソリューションを見つけて、環境に適応してください。

依存関係

いくつかの低レベルのタスクには、より重要な側面に焦点を合わせるためにライブラリがまだ必要であることに注意することが重要です。このプロジェクトのすべての依存関係は、前述の原則を考慮して非常に慎重に選択されました。

• Reach Routerのは、それがstraighforwardで、合成可能であり、必要なものを直接行うためです。これ以上何もありません。
• Styled Components 、優れたドキュメントを備えたJSのCSSだけです。なぜemotionありませんか？わからない。私が知っておくべき理由があるなら、私に知らせてください！
• 現代のUIは、多くの場合、意味のあるアニメーションに基づいて構築されているため、 React Springがあり、それらを使用することを奨励するものはすべて素晴らしいです。ライブラリは最近、パフォーマンスを向上させるためにDOMと直接再生する素敵なHooks APIを提供しています。

法律上の

MITライセンスCopyright©2019-Present、Mike Skowronek