react atomic design
1.0.0
Ini adalah boilerplate dengan metodologi Desain Atom yang menggunakan beberapa hal keren, seperti Buku Cerita, Aliran, dan Modul CSS. Jangan ragu untuk menguji, mengubah, dan menyesuaikan segalanya.
Baca artikel selengkapnya
Dikenal luas dalam dunia desain, Atomic Design membantu membangun sistem desain yang konsisten, solid, dan dapat digunakan kembali. Ditambah lagi, di dunia React, Vue, dan kerangka kerja yang merangsang komponenisasi, Desain Atom digunakan secara tidak sadar; namun bila digunakan dengan cara yang benar, ini akan menjadi sekutu yang kuat bagi pengembang.
Nama Atomic Design berasal dari ide pemisahan komponen-komponen dalam atom, molekul, organisme, template dan halaman, seperti pada gambar di atas. Tapi apa tanggung jawab masing-masing bagian yang terpisah?
Atom adalah komponen sekecil mungkin, seperti tombol, judul, input atau palet warna acara, animasi, dan font. Mereka dapat diterapkan pada konteks apa pun, secara global atau dalam komponen dan templat lain, selain memiliki banyak status, seperti contoh tombol ini: dinonaktifkan, arahkan kursor, ukuran berbeda, dll.
Mereka adalah komposisi satu atau lebih atom penyusun. Di sini kita mulai menyusun komponen kompleks dan menggunakan kembali beberapa komponen tersebut. Molekul dapat memiliki sifatnya sendiri dan menciptakan fungsionalitas dengan menggunakan atom, yang tidak memiliki fungsi atau tindakan apa pun.
Organisme adalah kombinasi molekul yang bekerja sama atau bahkan dengan atom yang membentuk antarmuka yang lebih rumit. Pada tingkat ini, komponen mulai memiliki bentuk akhir, namun tetap dipastikan independen, portabel, dan cukup dapat digunakan kembali untuk digunakan kembali dalam konten apa pun.
Dalam keadaan ini kita berhenti menyusun komponen dan mulai mengatur konteksnya. Selain itu, templat menciptakan hubungan antara organisme dan komponen lain melalui posisi, penempatan, dan pola halaman tetapi tidak memiliki gaya, warna, atau komponen apa pun yang dirender. Itu sebabnya terlihat seperti gambar rangka.
Halaman adalah bagian navigasi aplikasi dan di situlah komponen didistribusikan dalam satu templat tertentu. Komponen mendapatkan konten nyata dan terhubung dengan keseluruhan aplikasi. Pada tahap ini, kita dapat menguji efisiensi sistem desain untuk menganalisis apakah semua komponen cukup independen atau apakah kita perlu membaginya menjadi bagian-bagian yang lebih kecil.
Ketika kami mulai menggunakan Desain Atom dalam React, kami harus menyesuaikan beberapa aturan metodologi untuk memastikan bahwa komponen digunakan kembali sebanyak mungkin, bahwa komponen tersebut tidak memiliki kewarganegaraan, tanpa gaya posisi dan margin yang sangat spesifik untuk menghindari efek samping apa pun di dalam React. halaman aplikasi.
Jadi, dengan setiap komponen baru, kami bertanya pada diri sendiri: “Apakah komponen ini cukup umum untuk menghindari kekhususan dan/atau kode berulang dalam konteks apa pun penggunaannya?”
Jadi kami dapat menulis beberapa aturan:
| Naskah | Des |
|---|---|
$ yarn start | Mulai server webpack sederhana |
$ yarn dev | Buat server untuk pengembangan di port 5000 |
$ yarn storybook | Mulai Buku Cerita dengan cerita yang diimpor |
$ yarn flow | Validasi jenis aliran |
@danilowoz
@dleitee
MIT
