15 Bereaksi Praktik Terbaik yang Perlu Anda Ikuti pada tahun 2020

Bereaksi Praktik Terbaik


Jika Anda seorang pengembang frontend yang terlibat dalam membangun antarmuka pengguna yang sangat interaktif, Anda kemungkinan besar akan Bereaksi dalam perangkat Anda. Saat mengerjakan kreasi bertenaga React Anda, Anda harus berhati-hati untuk melakukan hal-hal yang selaras dengan praktik terbaik Bereaksi. Ini akan membantu menjaga kode Anda lebih teratur.

Seperti yang Anda ketahui, React adalah perpustakaan yang dibuat oleh Facebook dan memungkinkan untuk integrasi dengan banyak komponen menarik. Bahkan, setiap pengembang dapat membuat komponen mereka sendiri dan membuatnya dapat diakses oleh komunitas.

Hari ini, kami membahas topik itu dan menunjukkannya kepada Anda praktik terbaik React terbaik:

�� 1. Simpan komponen kecil dan khusus fungsi

Seperti yang kita semua tahu, dengan React, dimungkinkan untuk memiliki komponen besar yang menjalankan sejumlah tugas. Tetapi cara yang lebih baik untuk merancang komponen adalah membuatnya kecil, sehingga satu komponen sesuai dengan satu fungsi. Idealnya, satu komponen harus membuat sedikit halaman tertentu atau mengubah perilaku tertentu. Ada banyak keuntungan untuk ini:

  • Komponen fungsi-spesifik bisa saja berdiri sendiri, yang membuat pengujian dan pemeliharaan lebih mudah.
  • Setiap komponen kecil dapat digunakan kembali di berbagai proyek.
  • Komponen yang menjalankan fungsi umum dapat dibuat tersedia untuk komunitas.
  • Dengan komponen yang lebih kecil, lebih mudah untuk mengimplementasikan optimasi kinerja.
  • Lebih mudah untuk memperbarui komponen yang lebih kecil.
  • Komponen yang lebih besar harus bekerja lebih keras dan mungkin sulit dipertahankan.

Keseimbangan antara membuat satu komponen ringkas dan membuat beberapa komponen fungsi spesifik dapat bervariasi dari satu organisasi ke organisasi lainnya. Bagaimanapun, Anda dapat memiliki komponen sebanyak yang Anda inginkan, dan menggabungkannya kembali dengan cara apa pun yang Anda inginkan untuk mencapai hasil akhir yang sama.

♻️ 2. Dapat digunakan kembali adalah hal yang penting, jadi pertahankan penciptaan komponen baru seminimal yang diperlukan

Dengan berpegang pada aturan satu fungsi = satu komponen, Anda dapat meningkatkan usabilitas komponen. Artinya, Anda harus lewati mencoba membangun komponen baru untuk suatu fungsi jika sudah ada komponen untuk fungsi itu.

Dengan menggunakan kembali komponen di proyek Anda atau di sejumlah proyek, Anda tidak hanya akan mencapai konsistensi, Anda juga akan berkontribusi pada komunitas.

Di sisi lain, jika ada komponen yang menjadi besar, berat dan sulit dirawat, lebih baik memecahnya menjadi komponen yang lebih kecil sesuai kebutuhan.

Misalnya, Anda bahkan dapat melangkah lebih jauh dan membuat komponen Button yang dapat menangani ikon. Lalu, setiap kali Anda membutuhkan tombol, Anda akan memiliki komponen untuk digunakan. Membuatnya lebih modular akan memungkinkan Anda untuk menutupi banyak kasus dengan potongan kode yang sama. Anda harus membidik suatu tempat di tengah. Komponen Anda harus cukup abstrak, tetapi tidak boleh terlalu rumit.

class IconButton memperluas React.Component {
[…]
render () {
kembali (

);
}
}

�� 3. Konsolidasikan kode duplikat – KERING kode Anda

Aturan umum untuk semua kode adalah menjaganya sesingkat dan sesingkat mungkin.

Ini tidak berbeda di sini juga, karena Bereaksi praktik terbaik juga menginstruksikan Anda untuk menjaga kode singkat dan tepat. Salah satu cara untuk melakukannya adalah menghindari duplikasi – Jangan Ulangi Diri Sendiri (KERING).

Anda dapat mencapai ini dengan meneliti kode untuk pola dan persamaan. Jika Anda menemukannya, ada kemungkinan Anda mengulang kode dan ada ruang untuk menghilangkan duplikasi. Kemungkinan besar, sedikit penulisan ulang dapat membuatnya lebih ringkas.

Ini sangat bergantung pada prinsip usabilitas dalam React. Katakanlah Anda ingin menambahkan beberapa tombol yang berisi ikon, alih-alih menambahkan markup untuk setiap tombol, Anda cukup menggunakan komponen IconButton yang kami tunjukkan di atas. Anda bahkan bisa melangkah lebih jauh dengan memetakan semuanya menjadi sebuah array.

tombol const = [‘facebook’, ‘twitter’, ‘youtube’];

kembali (

{
buttons.map ((tombol) => {
kembali (

);
})
}

);

�� 4. Masukkan CSS ke dalam JavaScript

Ketika Anda mulai mengerjakan suatu proyek, itu adalah praktik umum untuk menyimpan semua gaya CSS dalam satu file SCSS. Penggunaan awalan global mencegah potensi tabrakan nama. Namun, ketika proyek Anda meningkat, solusi ini mungkin tidak layak.

Ada banyak perpustakaan yang memungkinkan Anda untuk menulis CSS di JS. Emosi dan Glamor adalah dua CSS paling populer di perpustakaan JS.

Ini adalah contoh penggunaan EmotionJS dalam proyek Anda. EmotionJS dapat menghasilkan file CSS lengkap untuk produksi Anda. Pertama, instal EmotionJS menggunakan npm.

npm instal –save @ emotion / core

Selanjutnya, Anda perlu mengimpor EmotionJS di aplikasi Anda.

impor {jsx} dari ‘@ emotion / core’

Anda dapat mengatur properti elemen seperti yang ditunjukkan dalam cuplikan di bawah ini:

biarkan Component = props => {
kembali (

)
}

Berikut ini tautan menuju yang lengkap dokumentasi EmotionJS.

�� 5. Beri komentar hanya jika perlu

Lampirkan komentar ke kode hanya jika diperlukan. Ini tidak hanya sesuai dengan Bereaksi praktik terbaik, tetapi juga melayani dua tujuan sekaligus:

  • Ini akan menjaga kode bebas dari gangguan visual.
  • Anda akan menghindari kemungkinan konflik antara komentar dan kode, jika Anda mengubah kode di beberapa waktu kemudian.

�� 6. Beri nama komponen setelah fungsi

Sebaiknya beri nama komponen setelah fungsi yang dijalankannya sehingga mudah dikenali.

Misalnya, ProductTable – itu menyampaikan secara langsung apa yang komponen lakukan. Di sisi lain, jika Anda memberi nama komponen berdasarkan pada kebutuhan kode, itu dapat membingungkan Anda pada titik waktu mendatang..

Contoh lain, lebih disukai untuk memberi nama Avatar komponen sehingga dapat digunakan di mana saja – untuk penulis, pengguna, atau dalam komentar. Sebaliknya, jika kita memberi nama komponen AuthorAvatar dalam konteks penggunaannya, kami akan membatasi kegunaan komponen itu..

Selain itu, penamaan komponen setelah fungsi membuatnya lebih bermanfaat bagi komunitas karena lebih mungkin untuk ditemukan.

�� 7. Gunakan huruf besar untuk nama komponen

Jika, seperti kebanyakan orang, Anda menggunakan JSX (ekstensi JavaScript), nama-nama komponen yang Anda buat harus dimulai dengan huruf besar. Misalnya, Anda akan memberi nama komponen sebagai SelectButton alih-alih selectbutton, atau Menu, bukan menu. Kami melakukan ini agar JSX dapat mengidentifikasi mereka secara berbeda dari tag HTML default.

Versi Bereaksi Sebelumnya mempertahankan daftar semua nama bawaan untuk membedakannya dari nama khusus. Tetapi karena daftar itu membutuhkan pembaruan terus-menerus, itu dihapus dan modal menjadi norma.

Jika JSX bukan bahasa pilihan Anda, Anda dapat menggunakan huruf kecil. Namun, ini dapat mengurangi penggunaan kembali komponen di luar proyek Anda.

�� 8. Pikirkan konvensi penamaan lainnya

Saat bekerja dengan Bereaksi, Anda biasanya menggunakan file JSX (JavaScript Extension). Komponen apa pun yang Anda buat untuk Bereaksi karenanya harus diberi nama dalam case Pascal, atau case unta atas. Ini diterjemahkan menjadi nama tanpa spasi dan huruf kapital huruf pertama dari setiap kata.

Jika Anda ingin membuat fungsi yang mengirimkan formulir, Anda harus memberi nama itu SubmitForm dalam huruf besar unta, daripada mengirimkanForm, mengirimkan_form, atau mengirimkan_form. Casing unta atas lebih sering disebut Pascal case. Berikut ini lebih lanjut daftar contoh nama variabel dan fungsi dalam kasus Pascal.

�� 9. Pisahkan aspek stateful dari rendering

Komponen dalam Bereaksi bisa stateful atau stateless. Komponen stateful menyimpan informasi tentang status komponen dan memberikan konteks yang diperlukan. Sebaliknya, komponen stateless tidak memiliki memori dan tidak dapat memberikan konteks ke bagian lain dari UI. Mereka hanya menerima props (input) dari komponen induk dan mengembalikan elemen JSX Anda. Mereka scalable dan dapat digunakan kembali, dan mirip dengan fungsi murni dalam JavaScript.

Salah satu praktik terbaik Bereaksi adalah untuk menjaga logika state-loading data Anda terpisah dari rendering stateless logic Anda. Lebih baik memiliki satu komponen stateful untuk memuat data dan komponen stateless lainnya untuk menampilkan data itu. Ini mengurangi kompleksitas komponen.

Versi Bereaksi kemudian v16.8 memiliki fitur baru – Bereaksi Hooks, yang menulis komponen terkait fungsi stateful. Ini pada akhirnya dapat menghilangkan kebutuhan untuk komponen berbasis kelas.

Misalnya, aplikasi Anda mengambil beberapa data saat mount. Yang ingin Anda lakukan adalah mengelola data di komponen utama dan meneruskan tugas render yang kompleks ke sub-komponen sebagai alat peraga.

impor RenderTable dari ‘./RenderTable’;

Tabel kelas memperluas Komponen {
state = {memuat: true};

render () {
const {memuat, tableData} = this.state;
kembali memuat? :;
}

componentDidMount () {
fetchTableData (). lalu (tableData => {
this.setState ({loading: false, tableData});
});
}
}

�� 10. Kode harus dijalankan seperti yang diharapkan dan dapat diuji

Sungguh, aturan ini tidak perlu penjelasan. Kode yang Anda tulis harus berperilaku seperti yang diharapkan, dan dapat diuji dengan mudah dan cepat. Merupakan praktik yang baik untuk memberi nama file uji Anda identik dengan file sumber dengan akhiran .test. Maka akan mudah untuk menemukan file uji.

Anda dapat menggunakan JEST untuk menguji kode Bereaksi Anda.

�� 11. Semua file yang terkait dengan satu komponen harus dalam satu folder

Simpan semua file yang berkaitan dengan salah satu komponen dalam satu folder, termasuk file styling.

Jika ada komponen kecil yang hanya digunakan oleh komponen tertentu, masuk akal untuk menyimpan semua komponen yang lebih kecil ini bersama-sama di dalam folder komponen itu. Hirarki kemudian akan mudah dipahami – komponen besar memiliki folder sendiri dan semua bagian yang lebih kecil dipecah menjadi sub-folder. Dengan cara ini, Anda dapat dengan mudah mengekstrak kode ke proyek lain atau bahkan mengubah kode kapan pun Anda inginkan.

Misalnya, untuk komponen Formulir, semua bagian seperti file CSS, ikon, gambar, tes dan sub-komponen lainnya yang berkaitan dengan Formulir semua harus berada di folder yang sama. Jika Anda memberi nama file dengan bijaksana, dan menyimpan file terkait secara logis, Anda tidak akan kesulitan menemukannya nanti.

�� 12. Gunakan alat seperti Bit

Salah satu praktik terbaik Bereaksi yang membantu mengatur semua komponen Bereaksi Anda adalah penggunaan alat seperti Sedikit.

Alat-alat ini membantu menjaga dan menggunakan kembali kode. Selain itu, ini membantu kode untuk ditemukan, dan mempromosikan kolaborasi tim dalam membangun komponen. Juga, kode dapat disinkronkan antar proyek.

�� 13. Gunakan perpustakaan snippet

Cuplikan kode membantu Anda mengikuti sintaks terbaik dan terkini. Mereka juga membantu menjaga kode Anda relatif bebas bug, jadi ini adalah salah satu praktik terbaik Bereaksi yang tidak boleh Anda lewatkan.

Ada banyak pustaka potongan yang dapat Anda gunakan, seperti, ES7 React, Redux, JS Snippets, dll.

✍️ 14. Tulis tes untuk semua kode

Dalam bahasa pemrograman apa pun, pengujian yang memadai memastikan bahwa setiap kode baru yang ditambahkan ke proyek Anda terintegrasi dengan baik dengan kode yang ada dan tidak merusak fungsi yang ada. Sebaiknya tulis tes untuk komponen baru yang Anda buat. Sebagai praktik yang baik, Anda harus membuat direktori __Test__ dalam direktori komponen Anda untuk menampung semua tes yang relevan.

Anda dapat membagi tes secara luas dalam Bereaksi menjadi dua bagian: menguji fungsionalitas komponen menggunakan aplikasi Bereaksi, dan menguji pada aplikasi lengkap Anda setelah di-render di browser. Anda dapat menggunakan alat pengujian lintas browser untuk pengujian dalam kategori yang terakhir.

Untuk yang pertama, Anda dapat menggunakan pelari uji JavaScript, Bersenda gurau untuk meniru HTML DOM menggunakan jsdom untuk menguji komponen Bereaksi. Sementara pengujian yang sepenuhnya akurat hanya mungkin dilakukan di peramban pada perangkat nyata, Jest memberikan perkiraan yang baik tentang lingkungan pengujian nyata selama fase pengembangan proyek Anda.

�� 15. Ikuti aturan linting, pisahkan garis yang terlalu panjang

Linting adalah proses di mana kita menjalankan program yang menganalisis kode untuk kesalahan potensial.

Sebagian besar, kami menggunakannya untuk masalah terkait bahasa. Tetapi juga dapat memperbaiki banyak masalah lain secara otomatis, khususnya gaya kode. Menggunakan linter dalam kode Bereaksi Anda membantu menjaga kode Anda relatif bebas dari kesalahan dan bug.

Kata-kata terakhir tentang React best practices

Saya harap daftar praktik terbaik Bereaksi ini akan membantu Anda menempatkan proyek Anda di jalur yang benar, dan menghindari kemungkinan masalah di kemudian hari.

Jika Anda memiliki pertanyaan terkait Bereaksi, jangan ragu untuk mengirimkannya di komentar di bawah.

Jangan lupa untuk bergabung dengan kursus kilat kami tentang mempercepat situs WordPress Anda. Dengan beberapa perbaikan sederhana, Anda dapat mengurangi waktu loading hingga 50-80%:

Contoh kode oleh Andrei Băicuș. Pembaruan konten oleh Shaumik Daityari

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map