Mari kita bahas beberapa alat hebat yang dapat membuat pengembang React lebih produktif dan meningkatkan kualitas pekerjaan mereka.
Biasanya, ketika saya memulai proyek baru, saya menggunakan templat saya sendiri untuk alat yang saya tambahkan ke daftar ini. Saya juga bekerja dengan alat lain seperti Material UI. Saya mempelajarinya, membuat beberapa aplikasi dengan bantuan mereka dan menerapkan beberapa proyek kecil, setelah itu saya memutuskan untuk membagikan hasilnya.
Jadi mari kita lihat daftar terakhir.
ESLint
ESLint memiliki banyak perubahan untuk setiap pengembang JavaScript, termasuk penggemar React. Layanan ini menawarkan algoritme cerdas yang dengan cepat menganalisis kode, mencari kemungkinan bug.
Selain itu, ini memungkinkan Anda untuk secara otomatis memperbaiki masalah yang ditemukan tanpa mengubah sintaks.
Untuk memulai, saya akan merekomendasikan menggunakan konfigurasi yang disarankan oleh pengembang di Airbnb. Itu mengandung:
- Dukungan bawaan untuk pustaka React (misalnya, dukungan untuk aturan penggunaan hook).
- Fokus pada praktik terbaik.
ESLint harus dimiliki untuk proyek apa pun, dan konfigurasi Airbnb adalah salah satu favorit saya. Saya menambahkan sesuatu ke dalamnya, tetapi 90% tersisa dari konfigurasi awal.
Sedikit
Bit menyediakan sesuatu yang dibutuhkan pengembang React sebagai platform kolaborasi. Ini memungkinkan tim untuk bekerja sama pada komponen individu.
Ini adalah utilitas baris perintah yang memungkinkan Anda menulis kode yang dapat digunakan kembali. Bit sepenuhnya open source dan inilah salah satu alasan popularitasnya.
Sebagian besar fungsionalitas terkait dengan pembuatan komponen atom, sehingga dapat dengan mudah dibagikan dengan pengembang lain. Selain itu, ada juga kemampuan untuk memeriksa ketergantungan komponen, mengujinya secara terpisah dari proyek utama.
Buat Aplikasi React
Sebagai pengembang React, Anda tahu betul berapa lama waktu yang dibutuhkan untuk memulai proyek baru. Untuk menghemat waktu, pengembang Facebook menyarankan Buat Aplikasi React .
Ini adalah "builder" awal yang memungkinkan Anda fokus pada pengembangan, bukan penyesuaian, React. Yang perlu Anda lakukan hanyalah menjalankan perintah npx create-react-app my-app. Kemudian Anda memiliki aplikasi yang dikonfigurasi sepenuhnya untuk proyek tersebut.
Buat Aplikasi React akan sangat meningkatkan efisiensi Anda jika Anda bekerja sebagai freelancer React untuk banyak klien pada waktu yang bersamaan.
Bereaksi Cosmos
React Cosmos adalah lingkungan pengembang yang dirancang untuk membuat antarmuka pengguna yang dapat diskalakan dan berkualitas tinggi.
Layanan ini memungkinkan untuk dengan mudah terlibat dalam pembuatan prototipe dan pengujian komponen antarmuka individu. Selain itu, Anda dapat mengulanginya tanpa takut melanggar kode Anda. Ini memfasilitasi proses debugging dengan mengisolasi komponen.
React Cosmos paling baik digunakan untuk bekerja dengan aplikasi tingkat perusahaan. Membagi proyek menjadi komponen kecil yang dapat digunakan kembali memungkinkan penulisan kode kualitas yang mudah dirawat.
React Toolbox
Di awal artikel ini, saya menyebutkan bahwa saya menggunakan Material UI untuk sebagian besar proyek. Ada alasan untuk itu: Saya suka Desain Material dan UI Material adalah yang paling cocok untuk saya.
Tetapi ada juga alternatif. Salah satunya adalah React Toolbox . Ini adalah kumpulan komponen yang umum digunakan yang dikembangkan dengan Desain Material. Ini menggunakan Modul CSS untuk lebih banyak fleksibilitas.
Pada saat penulisan ini, React Toolbox mencakup 28 komponen. Beberapa di antaranya adalah Application Drawer, Date Picker, Switcher, dan Snack Bar.
React Bootstrap
Situs web ramah seluler adalah standar modern. Pengguna berharap situs Anda bekerja dengan baik di perangkat apa pun. Situs dengan desain responsif bahkan membuat mesin telusur menonjol.
Banyak pengembang menggunakan Bootstrap untuk membuat situs web yang responsif dan dapat diskalakan dengan desain profesional. Masalahnya adalah Bootstrap hadir dengan komponen asli yang tidak terintegrasi dengan React.
Solusinya adalah paket React Bootstrap open source . Semua komponen Bootstrap telah dimodifikasi khusus untuk pengembang React.
React Slingshot
Ingin mempercepat pengembangan aplikasi React Anda? Cobalah untuk mengevaluasi React Slingshot . Ini adalah template yang menggabungkan React, Redux dan Babel.
Fitur terpenting dari Slingshot yang membedakannya dari alat lain adalah umpan baliknya yang cepat. Fitur ini mengotomatiskan proses linting, unit testing, dan hot reload setiap kali aplikasi diupdate. Dengan cara ini, Anda dapat fokus pada logika bisnis daripada tugas-tugas asing.
Bereaksi
Mereka bilang pengembang sebaik editornya. Mungkin ini tidak sepenuhnya benar, tapi editor sangat membantu pekerjaan kita. Secara pribadi, saya penggemar berat JetBrains dan WebStorm. Pilihan saya adalah IDE, tetapi saya mencoba alternatif dari waktu ke waktu.
Misalnya, saya menemukan Reactide adalah IDE untuk React. Saya sangat terkejut dengan penemuan ini dan mencoba alat tersebut.
Ternyata memiliki fitur yang menarik. Misalnya, Anda dapat merender komponen proyek Anda langsung di IDE. Ada juga server Node.js bawaan yang terintegrasi dengan simulator browser.
Alat yang menarik, meskipun saya rasa saya tidak akan sepenuhnya beralih ke alat itu. Tetapi ini adalah opsi yang baik bagi mereka yang bekerja dengan atau mempelajari React dan tidak ingin mengalami masalah bahkan selama tahap konfigurasi.
Library Pengujian React
"Tes dulu!" - apa yang saya ulangi terus-menerus.
Dengan kata lain, memiliki seperangkat alat pengujian itu penting. Library Pengujian React adalah perpustakaan kecil. Ini memungkinkan Anda untuk menguji kode React Anda tanpa terlalu banyak kesulitan. Library ini mudah digunakan dan menambahkan kemampuan ke library standar seperti react-dom dan react-dom / test-utils.
Dokumentasi yang bagus dengan beberapa contoh bagus akan membantu Anda siap dan bekerja dengan cepat.
Buku cerita
Buku cerita menyediakan lingkungan pengembangan interaktif di mana Anda dapat membuat komponen baru, mengujinya, atau memilih komponen yang ada dari perpustakaan.
Buku cerita cukup fleksibel untuk bekerja dengan kerangka kerja JavaScript utama apa pun. Misalnya React, Vue.js, Angular, Svelte, Marko dan bahkan HTML mentah.
Hal terbaik tentang Storybook adalah ia hadir dengan berbagai add-on. Berikut beberapa tambahan yang menurut saya menarik:
- google-analytics (menambahkan dukungan Google Analytics untuk komponen);
- bercanda ;
- storyshots (memeriksa komponen menggunakan snapshot);
- viewport (ubah markup untuk komponen responsif)
Saya harap Anda menghargai daftar ini. Jika Anda menggunakan alat keren lainnya yang tidak disebutkan dalam teks, tulis tentang mereka di komentar!