Bangun dan sesuaikan komponen React dengan mudah menggunakan AthenaJS — toko serba ada untuk desain komponen React
Apa itu AthenaJS?
Mengembangkan komponen React dalam aplikasi besar dapat dengan cepat menjadi tugas yang rumit. Fokus dan waktu yang seharusnya dihabiskan untuk detail komponen malah dihabiskan untuk menavigasi aplikasi atau memfilter pesan debug. Selain itu, mungkin sulit untuk memisahkan logika yang dimiliki oleh bagian-bagian aplikasi yang berbeda, sehingga mengakibatkan komponen tidak dapat digunakan kembali. Mengisolasi komponen dari konteks aplikasi dapat membantu pengembang melakukan debug secara efisien dan fokus pada detail spesifik. Dengan mengadopsi pendekatan pengembangan berbasis komponen, komponen UI dapat berfungsi dengan baik secara mandiri dan digunakan kembali secara efektif.
Apa yang Dilakukan AthenaJS?
AthenaJS adalah lokakarya visualisator komponen yang memungkinkan pengembang dengan cepat mengembangkan dan mengedit komponen React mereka secara terpisah tanpa integrasi basis kode.
Mudah digunakan: AthenaJS adalah aplikasi elektron mandiri yang memungkinkan pengembang mengimpor komponen React mereka sendiri atau membuat komponen dari awal dalam editor kode aplikasi.
Dinamis:Pengembang dapat meniru permintaan http, menata gaya, dan mengubah fungsi komponen mereka dalam editor kode aplikasi. Perubahan tercermin dalam penyaji dengan menekan sebuah tombol!
Prototipe UI:Pengembang dapat membuat prototipe UI dan membandingkan komponen dari perpustakaan mereka menggunakan papan tulis UI seret dan lepas yang intuitif.
Mengembangkan Komponen dari Awal
Saat Anda memuat AthenaJS, fitur pertama yang akan Anda perhatikan adalah editor kode, yang dapat Anda gunakan untuk mengedit komponen atau membuat komponen dari awal. Editor JSX menyimpan pernyataan pengembalian komponen dan isi berisi semua hal lainnya (kait, fungsi, dll.). Tekan tampilan pembaruan untuk melihat perubahan Anda secara langsung di penyaji komponen. Simpan kemajuan Anda dengan memilih nama untuk komponen Anda dan menyimpannya ke perpustakaan komponen.
Unggah dan Edit Komponen
Sudah memiliki komponen dalam suatu proyek dan ingin mengeditnya? Buka file explorer dan impor komponen React apa pun! Parser kami akan memasukkan kode ke dalam editor sehingga Anda dapat memulai dengan mudah. Cukup tentukan props apa pun yang diandalkan komponen Anda di body editor dan perbarui tampilan agar komponen Anda berfungsi di aplikasi!
Mengejek Permintaan HTTP
Jika komponen Anda membuat permintaan http dengan mengambil, AthenaJS menyertakan integrasi fetch-motch untuk meniru responsnya. Secara default, pengaturan kami mencegat semua permintaan dan merespons dengan objek {data: ‘mock data’}, namun pengaturannya sangat dapat dikonfigurasi!
Komponen Penataan
AthenaJS menyertakan integrasi "komponen bergaya". Komponen yang ditata memungkinkan Anda menulis kode CSS sebenarnya untuk menata gaya komponen Anda, sehingga Anda dapat memulai dengan cepat dan mudah! Deklarasikan variabel komponen gaya Anda di editor isi dan tulis CSS atau salin kode dari file CSS Anda untuk menata gaya komponen Anda dengan cepat.
Menyimpan & Mengekspor Komponen
Komponen Anda akan dipertahankan di antara sesi, sehingga Anda dapat dengan mudah melanjutkan dari bagian terakhir yang Anda tinggalkan menggunakan fungsi 'Simpan Perpustakaan'. Render salah satu komponen Anda dan buat perubahan pada komponen tersebut, hapus komponen tersebut dari perpustakaan Anda, atau ekspor sebagai file jsx untuk dengan mudah mengintegrasikan komponen yang Anda kembangkan ke dalam proyek React Anda.
Bandingkan Waktu Render Komponen
Penasaran komponen apa saja yang berpotensi menimbulkan kemacetan pada aplikasi Anda? Setiap kali Anda merender komponen baru, waktu render diambil menggunakan React Profiler API. Waktu rendering dapat ditambahkan ke grafik batang dengan mengklik tombol untuk membandingkan waktu rendering dengan mudah di berbagai komponen.
Papan Tulis UI
Setelah Anda membangun pustaka komponen, Anda dapat dengan mudah membuat prototipe UI menggunakan papan tulis UI seret dan lepas. Area papan tulis dapat disimpan sebagai tangkapan layar ke folder unduhan Anda dengan menekan tombol tangkapan layar di bagian kanan atas layar. Ini adalah alat yang hebat untuk membuat prototipe antarmuka pengguna dan mempermudah penyatuan komponen untuk membuat UI yang kohesif dalam aplikasi Anda.
Salah satu kegunaan favorit kami dari alat ini adalah untuk membandingkan komponen serupa. Tidak yakin bilah navigasi atau tombol mana yang paling Anda sukai? Tambahkan keduanya ke papan tulis dan bandingkan secara berdampingan!
Dokumentasi
Jika Anda tertarik menggunakan AthenaJS untuk proyek React Anda, kunjungi situs web kami di sini untuk memulai dan membaca dokumentasi ekstensif kami. Jika Anda memerlukan klarifikasi lebih lanjut untuk kasus penggunaan tertentu atau menemukan kesalahan, silakan kirimkan masalah melalui Github.
Sumber Terbuka & Berkontribusi
AthenaJS adalah alat pengembang sumber terbuka yang dikembangkan di bawah akselerator teknologi OSLabs. Jika Anda ingin berkontribusi pada AthenaJS, kunjungi repositori Github. Rincian lebih lanjut tentang kontribusi dapat ditemukan di file Contributing.md. Jika Anda ingin mendukung proyek ini, mohon pertimbangkan untuk memberikannya bintang di Github untuk meningkatkan visibilitas, terima kasih!
Tim:
Christopher Panjang | LinkedIn | Github
Daniel Chang | LinkedIn | Github
Derrick Oh | LinkedIn | Github
Matthew Fukudome | LinkedIn | Github
Ryan Motamen | LinkedIn | Github
