より良いUXのためのゼロ、1、2、多くのチップ


※(pexels)
あなたのコード設計と一致するのは難しいです、あなたのコードが陥るかもしれなくて、それらの世話をするかもしれないすべての州に気をつけるように注意する必要があります、しかし、どこで我々は出発しますか?
新しいコンポーネントを作成するときは、通常、コンポーネントを設定するのに必要なデータをすでに作成していることがわかります.これは通常、特定のコンポーネントの1から2つのコピーで私のデザインを開始します.
todoItems.map( todoItem => {
    <TodoItem todoItem={todoItem} />
})
時々私たちの怠惰な部分が制御を取り、ちょうどこのようなコンポーネントをこのようにして、次の科目に移動します.しかし、このアプローチには問題があります.

ゼロアイテムケース
ページが醜くて空に見える0のtodo項目がある場合.代わりに何があるか
  • は、ユーザーがナビゲートし、新しいto doアイテムを追加するのに役立ちます.
  • は、何もない代わりにそこに何かがなければならないと彼に知らせます.
  • 我々が世話をするべきである他のケースは、多くのアイテムケースです.我々は1000アイテムを得た場合はどうなりますか?

    多くのアイテムケース
    その場合、これらの要素がどのように見えるかを考える必要があります.
  • は、「より多くの」ボタンを見ます.
  • 最高のUXで可能であれば非同期でデータをロードします.
  • ユーザーをオープンした後に最小化します.
  • このゼロ、1つ、2つ、多くのtecniqueに続いて、あなたは二度とこれらの厄介な空のデザインに遭遇する必要はありません!