react ui interactions

Inspirasi UI untuk Bereaksi

Bereaksi interaksi UI

Koleksi konsep UI yang dikemas dalam serangkaian proyek reaksi kecil. Gagasan di baliknya adalah untuk memanfaatkan praktik komunitas terbaru untuk memberikan pola yang berguna untuk proyek dunia nyata Anda. Dengan menyajikan elemen UI spesifik, Anda akan mempelajari solusi dasar dan lanjutan yang mencakup: Animasi & Transisi, Interaksi Mikro, Responsif, Navigasi, Pengambilan Data, Manipulasi Negara .

Motivasi

Membangun aplikasi web membutuhkan pemecahan banyak masalah UI. Ada banyak perpustakaan yang membantu menyelesaikan kasus prtikular tetapi sangat sering Anda akan membuat solusi Anda sendiri. Dalam hal ini repositori ini memungkinkan Anda untuk menemukan pola yang berguna untuk tantangan khas saat bekerja pada antarmuka pengguna. Seperti yang mungkin Anda perhatikan, proyek ditulis dalam React. Saya hanya merasa nyaman menggunakannya. Namun, saya pikir solusi yang disajikan di sini dapat berhasil digunakan dalam kerangka kerja berbasis komponen lainnya.

Prinsip

• Direct - Merangkul kode eksplisit dan co -located yang mudah dihapus dan berpindah dari satu tempat ke tempat lain. Ini adalah optimasi untuk perubahan karena perubahan adalah hal yang pada akhirnya akan terjadi. Kode ini langsung dan spesifik yang memudahkan untuk menyalin dan beradaptasi untuk kebutuhan Anda.
• ? Sederhana - satu -satunya cara untuk mencapai fleksibilitas adalah dengan membuat hal -hal sederhana dan mudah diubah. Mengikuti munculnya "lebih buruk lebih baik"

  Desainnya harus sederhana, baik dalam implementasi maupun antarmuka. Lebih penting bagi antarmuka menjadi sederhana daripada implementasi.

• ? Tidak ada kelas - hanya komponen fungsional.
• ❣️ Hooks - Menggunakan kait sepanjang jalan (tersedia saat bereaksi 16.7.0 -alpha).
• ? Kode pemisahan - menggunakan React.lazy bersama dengan import() dan biarkan webpack melakukan pekerjaan itu.
• ⏱️ Ketegangan - Bereaksi ketegangan untuk pemisahan kode.
• ? CSS-IN-JS -Ini didasarkan pada komponen gaya untuk tampilan dan nuansa.
• ? Promosikan default - sekecil konfigurasi mungkin. Menggunakan default di mana pun bisa.

Cara menggunakan

• Cukup salin & tempel apapun yang Anda butuhkan.
• Terinspirasi. Temukan solusi UI yang Anda sukai dan beradaptasi dengan lingkungan Anda.

Dependensi

Penting untuk dicatat bahwa beberapa tugas tingkat rendah masih membutuhkan perpustakaan untuk memungkinkan fokus pada aspek yang lebih penting. Semua ketergantungan dalam proyek ini dipilih dengan sangat hati -hati mengingat prinsip -prinsip yang disebutkan sebelumnya.

• Reach Router karena lebih lurus, dapat dikomposisikan dan melakukan apa yang seharusnya. Tidak lebih.
• Styled Components hanya CSS di JS dengan dokumentasi yang hebat. Mengapa tidak emotion ? Aku tidak tahu. Jika ada alasan yang harus saya ketahui, beri tahu saya!
• React Spring karena UI modern sering dibangun di atas animasi yang bermakna, segala sesuatu yang mendorong penggunaannya hebat. Perpustakaan akhir -akhir ini menawarkan Hooks API yang bagus yang diputar langsung dengan DOM untuk kinerja yang lebih baik.

Legal

Lisensi MIT Hak Cipta © 2019-sekarang, Mike Skowronek