Komponen UI Frontend

Repo Tersuai iHateReading

Sejak sebulan lalu, saya telah membuat banyak komponen UI yang merupakan komponen web dunia sebenar seperti Butang, Input, Borang, Sepanduk, Galeri

Komponen yang dibuat untuk beberapa tujuan

• Belajar bahagian hadapan dan jadi lebih baik dalam perkara yang saya lakukan
• Tingkatkan keupayaan untuk menulis kod yang lebih baik dalam pembangunan bahagian hadapan (saya akan terangkan kemudian apa maksudnya)

Saya kini tindanan teknologi atau teknologi adalah reactjs bersama next.js sebagai rangka kerja dan saya menggunakan Tailwind CSS untuk penggayaan dan GSAP untuk animasi

Saya boleh menggunakan mana-mana tindanan teknologi yang bukan masalah, jadi saya mulakan dengan rangka kerja terkini dan bahasa adalah reactjs dengan next.js

Seterusnya, saya perlu memilih semua komponen yang perlu saya bangunkan yang boleh saya gunakan secara peribadi dalam projek dunia sebenar saya yang akan datang seperti borang pembayaran, borang langganan, galeri imej, butang, banyak komponen UI lain, Komponen pengepala dan sebagainya.

iHateReading ialah platform oleh pembangun untuk pembangun dan sejak 2 tahun lalu saya telah berkongsi blog serta surat berita di ihatereading.in.

Inilah masa yang sesuai untuk memperkenalkan beberapa perubahan baharu atau ciri baharu iaitu repo tersuai atau kod tersuai atau apa sahaja yang anda mahu panggil, untuk mengembalikan maksud platform ini.

Sekarang datang dari apakah komponen ini, semua komponen dibuat menggunakan modul berikut

1. Reactjs
2. CSS Tailwind
3. GSAP untuk animasi
4. Pustaka UI Mantine.dev (jika perlu)

Saya cuba menggunakan komponen UI tanpa kepala bermakna hanya kefungsian akan ditambah tanpa sebarang penggayaan atau pergantungan rangka kerja dengan cara ini banyak pembangun boleh dengan mudah menyalin-tampal kod dan menggunakannya terus untuk membangun dengan pantas.

Semasa membangunkan komponen ini jika anda melihat komponen pertama yang saya kongsikan di https://ihatereading.in/customrepo dan membandingkannya dengan komponen baharu atau terkini, seseorang boleh mencari perbezaannya dengan mudah.

Kurang kebergantungan kurang javascript dan komponen kod yang lebih dioptimumkan serta boleh digunakan semula.

Semua kredit diberikan kepada penyelidikan dan blog yang saya lakukan tahun lepas, Mengapa JavaScript mengurangkan prestasi tapak web? kerana penyemak imbas mengambil banyak masa untuk menghuraikan JS berbanding dengan CSS. Dengan itu mengurangkan JS akan meningkatkan prestasi laman web juga.

Selain itu, CSS pada masa kini menjadi begitu kuat sehingga sangat sedikit JS diperlukan untuk membawa animasi yang menarik ke tapak web dan banyak pembangun tidak memberi perhatian yang tinggi kepadanya yang merupakan satu lagi moto untuk menggunakan lebih banyak CSS > kurang JS.

40 komponen telah ditambah setakat ini dan saya sedang mengusahakan lebih banyak lagi, jika anda mempunyai idea tentang jenis komponen atau borang atau alatan yang boleh saya buat, tambahkannya di bahagian komen, saya pasti akan mengikuti petunjuk.

Saya secara aktif berkongsi berita pembangunan komponen di Twitter dan LinkedIn serta menolak kod di ihatereading.in/customrepo

Jangan ragu untuk menyemaknya dan beritahu saya apa lagi yang perlu ditambah dan dibuat.

Sola
Shrey

Atas ialah kandungan terperinci Komponen UI Frontend. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!