Selamat siang, warga Khabrovsk. Hari ini kami membagikan kepada Anda terjemahan dari artikel yang terjemahannya disiapkan khusus untuk peluncuran pertama
kursus ReactJS / React Native-Developer . Selamat membaca.
Jika Anda baru mengenal dunia Bereaksi Asli, maka Anda tahu bahwa ia memiliki beberapa jebakan yang ingin Anda hindari. Dalam beberapa kasus, Anda harus membuat pilihan terlebih dahulu tanpa tahu sedikit pun bagaimana atau apa pengaruhnya.
Di bawah ini saya telah menyusun daftar tips praktis terbaik dari pengalaman pribadi saya yang saya harap akan bermanfaat bagi Anda :)
Gunakan Expo-Kit hanya jika Anda benar-benar tahu apa yang Anda lakukan.
Expo adalah alat open source gratis untuk React Native. Ada kemungkinan bahwa ini adalah seperangkat alat terbaik untuk membuat aplikasi di React Native, namun, ia juga memiliki keterbatasan.
Gunakan Expo:- Jika Anda hanya ingin membuat kotak pasir, jangan buat repositori untuk aplikasi Anda. Cukup buat aplikasi baru menggunakan paket create-react-native-app .
- Jika Anda melakukan penelitian sebelum membuat aplikasi, dan menyadari bahwa semua kebutuhannya dapat dicakup oleh solusi yang ditawarkan Expo.
- Jika Anda tidak memiliki komputer Mac OS, tetapi Anda masih ingin membuat aplikasi iPhone. Ini adalah satu-satunya alternatif untuk membuat executable IPA.
Jangan gunakan Expo:- Jika Anda baru mengenal Bereaksi Asli dan Anda pikir ini adalah satu-satunya cara untuk membuat aplikasi. Pertama-tama, periksa apakah memenuhi persyaratan Anda.
- Jika Anda berencana untuk menggunakan paket RN pihak ketiga dengan modul pengguna asli. Expo tidak mendukung fungsi ini, dalam hal ini Anda perlu mengekstraksi Kit eject (mengeluarkan). Menurut pendapat saya, jika Anda awalnya akan mengekstrak seperangkat alat, Anda tidak boleh menggunakannya sama sekali. Prosedur ekstraksi akan mempersulit pembuatan aplikasi, dibandingkan jika Anda tidak menggunakannya sama sekali.
Secara umum, saya pikir Expo adalah alat yang hebat, dan saya menggunakan
Expo Snack sendiri untuk berbagi kode Bereaksi Asli. Namun, saat ini hanya berguna untuk membuat jenis aplikasi tertentu.
Cara menyusun folder dan file aplikasi Anda
Mengorganisir aplikasi di React Native tidak berbeda dengan mengatur aplikasi di React. Karena itu, jika Anda terbiasa dengan hal ini, maka patuhi saja logika yang sama. Namun, jika ini bukan masalahnya, maka logika yang diuraikan di bawah ini akan berguna:
- Tambahkan folder ke root dan beri nama "app";
- Buat folder di dalam "aplikasi":
assets - Di dalamnya saya memiliki hingga tiga folder dengan font, ikon dan gambar.
components - Di sini Anda akan menempatkan semua komponen Bereaksi bersama. Biasanya ini adalah komponen yang kita sebut "dummy" karena mereka tidak memiliki logika negara dan dapat dengan mudah digunakan kembali di dalam aplikasi.
views - Ini adalah layar aplikasi kami, yang digunakan untuk berpindah dari satu ke yang lain. Komponen reaksi juga disimpan di sini, yang kita sebut wadah, karena mereka menyimpan keadaannya sendiri.
modules - Bagian yang tidak memiliki tampilan yang sesuai (JCX) disimpan di sana. Contoh umum adalah modul warna (berisi semua warna aplikasi) dan modul utils (berisi fungsi utilitas yang dapat digunakan kembali).
services - Berikut adalah fungsi yang membungkus panggilan API.
i18n - Terjemahan disimpan di sini untuk pengguna dengan berbagai bahasa dan lokal.
Semua aplikasi memerlukan jenis konfigurasi tertentu, jadi saya biasanya membuat file bernama
config.js dan menyimpannya di sana. Jika ada terlalu banyak baris dalam file konfigurasi, Anda dapat membuat folder
config terpisah dan membaginya menjadi beberapa file.
Jika Anda memiliki pustaka manajemen negara, Anda juga akan memerlukan folder untuk komponennya. Dalam kasus Redux, 2 folder atau lebih digunakan, satu untuk
actions dan satu untuk
reducers . Jika Anda tidak menggunakan paket eksternal dan lebih suka menggunakan React Context API, Anda dapat membuat penyedia Anda sendiri, yang dapat ditempatkan di folder modul atau di folder
providers baru.
Kami memilih perpustakaan navigasi sesuai dengan kebutuhan Anda
Sayangnya, RN belum memiliki solusi lengkap atau setidaknya pengganti yang layak untuk komponen Navigator lama, jadi sekarang kita akan fokus pada bagaimana komunitas menyelesaikan masalah ini. Oleh karena itu, jika Anda akan membuat proyek dan ingin tahu perpustakaan navigasi mana yang akan digunakan, bagian ini hanya untuk Anda.
Secara umum, ada dua jenis perpustakaan navigasi: JavaScript navigator dan navigator asli. Yang pertama ditulis dalam JavaScript, sedangkan perpustakaan asli ditulis dalam modul asli sesuai dengan platform (Android, iOS) dan terhubung ke modul JavaScript untuk dimasukkan ke dalam kode. Yang pertama jauh lebih mudah untuk diatur, sedangkan yang kedua jauh lebih efisien. Luangkan waktu untuk mencari tahu jenis yang paling cocok untuk Anda, dan kemudian pilih dari banyak perpustakaan jenis itu.
Spencer Carly telah melakukan pekerjaan luar biasa dan mengembangkan opsi Navigasi saat ini di dunia Asli Bereaksi, Anda dapat membaca
artikelnya tentang topik ini. Solusi yang paling populer saat ini adalah
React Navigation , sebagai solusi JavaScript, dan
React Native Navigation , sebagai solusi asli.
Untuk kenyamanan, gunakan perpustakaan bungkus CSS-in-JS
Dalam Bereaksi Asli, CSS ditulis dalam JavaScript. Di sini kita tidak punya pilihan. Secara pribadi, alih-alih menggunakan metode
StyleSheet.create dan kode CSS dalam JavaScript murni, saya menggunakan perpustakaan
Styled Components . Komponen yang Ditata memperjelas CSS dan membuat JSX lebih semantik.
Saya baru-baru menulis sebuah artikel tentang mengapa saya lebih suka menggunakan Komponen Gaya dalam aplikasi
Bereaksi Asli , Anda dapat membacanya untuk lebih memahami topik.
Tentukan terlebih dahulu bagaimana Anda ingin skala aplikasi pada perangkat yang berbeda dengan ukuran layar yang berbeda.
Kemungkinan besar, Anda sedang mengembangkan aplikasi untuk lebih dari satu perangkat dan ukuran layar. Sekarang ada dua pendekatan untuk desain dan pengembangan aplikasi.
Anda dapat memilih UX / UI yang berbeda tergantung pada ukuran layar. Untuk sebagian besar jenis aplikasi, ini mungkin merupakan pilihan terbaik, tetapi ini membutuhkan banyak usaha, karena Anda perlu membuat dan mengimplementasikan beberapa opsi layar. Ukuran layar dapat ditentukan menggunakan
Dimensions API . Di sisi lain, Anda dapat menggunakan paket pihak ketiga yang di luar kotak menyediakan beberapa alat, seperti
React Native Responsive UI .
Atau Anda dapat menggunakan UI / UX yang sama, yang akan menskala secara proporsional untuk semua ukuran layar. Ini adalah opsi terbaik jika, misalnya, Anda mengembangkan game. Sekali lagi, Anda dapat menggunakan paket pihak ketiga, misalnya,
React Native Responsive Screen .
Penafian: Saya adalah pembuat paket Layar React Native Responsive .
Hati-hati dengan animasi
Animasi sangat penting untuk aplikasi seluler, tetapi kinerja React Native buruk.
Untuk melindungi dari kesalahan, Anda perlu menguji animasi pada perangkat, karena emulator tidak memberikan umpan balik yang benar. Anda juga perlu menggunakan
useNativeDriver (dengan true) sedapat mungkin, karena ini akan membantu mencapai kinerja yang lebih baik.
Jika Anda ingin lebih banyak tips tentang cara mencapai kinerja yang lebih baik, lihat
artikel saya sebelumnya.
Ingat juga
- React Native tidak memiliki elemen DOM. Sebaliknya, kami bekerja dengan elemen asli.
- Tentang CSS:
- Tidak semua fitur didukung, setidaknya belum. Untuk mempelajari lebih lanjut, lihat dokumentasi: Lihat properti Gaya , properti Gaya Gambar , properti Gaya Teks .
- Properti singkatan tidak selalu berfungsi dengan baik, jadi lebih baik menggunakan yang khusus (seperti margin-bottom, margin-top, margin-kiri, margin-kanan, bukan margin).
- Tidak semua properti mendukung persentase. Misalnya, berikut ini: margin, lebar perbatasan dan radius batas. Jika seseorang mencoba menggunakan nilai persentase, baik RN akan mengabaikannya, atau pada prinsipnya aplikasi akan mogok.
- RN mendukung flex keluar dari kotak. Periksa dan gunakan jika perlu. Ini adalah sekutu CSS terbaik!
Itu saja. Pelajari lebih lanjut tentang kursus di
sini .