react native template

---

Bereaksi template asli

Proyek ini adalah Template Native React yang dirancang untuk mempercepat pengembangan dengan menyediakan fitur -fitur penting seperti manajemen negara, internasionalisasi, pengambilan data, navigasi, dan komponen yang dapat digunakan kembali.

Tangkapan layar

Dibuat menggunakan komponen default yang disediakan dalam proyek.

Layar Selamat Datang

Layar login

Layar Daftar

Layar profil

Fitur

• ? Internasionalisasi (I18N)

  • Dukungan multi-bahasa menggunakan react-i18next untuk lokalisasi yang mulus.

• ? ️ Manajemen negara dengan redux

  • Manajemen negara terpusat untuk akses dan pembaruan negara global yang efisien.

• ? Data mengambil dengan kueri bereaksi

  • Data pengambilan, caching, dan sinkronisasi yang dioptimalkan.

• ? Navigasi

  • Navigasi halus dan intuitif menggunakan react-navigation dengan komponen dasar seperti VStack dan HStack .

• ⚛️ Arsitektur berbasis komponen

  • Desain modular dengan komponen UI yang dapat digunakan kembali dan gaya yang konsisten.

• ? Utilitas umum

  • Fungsi dan utilitas pembantu untuk pengembangan yang ramping.

• ? Manajemen Axios

  • Permintaan API yang dapat dikonfigurasi menggunakan AXIOS dengan penanganan kesalahan bawaan dan manajemen respons.

• Manajemen Websocket

  • Dukungan komunikasi real-time menggunakan WebSockets.

• ? Manajemen Cookie

  • Manajemen cookie yang disederhanakan untuk otentikasi dan sesi pengguna.

• Otentikasi

  • Otentikasi dan pendaftaran pengguna dengan manajemen token yang aman.

Komponen

Proyek ini mencakup serangkaian komponen yang dapat digunakan kembali untuk membangun antarmuka pengguna:

• Komponen tombol

  • button.tsx : Komponen tombol standar dengan gaya yang dapat disesuaikan.

• Komponen Tipografi

  • h1.tsx , h2.tsx : Komponen heading untuk tipografi yang konsisten.
  • text.tsx : Komponen teks yang dapat disesuaikan untuk menampilkan konten.

• Komponen input

  • input.tsx : komponen bidang input dasar.
  • input-with-icon.tsx : Bidang Input dengan Ikon untuk Interaksi Pengguna yang Ditingkatkan.

• Komponen tata letak

  • vstack.tsx : Tata letak tumpukan vertikal untuk mengatur elemen secara vertikal.
  • hstack.tsx : Tata letak tumpukan horizontal untuk mengatur elemen secara horizontal.
  • spacer.tsx : Komponen spacer untuk menambahkan ruang fleksibel antar elemen.

• Komponen Navigasi

  • navbar.tsx : Bilah navigasi yang dapat disesuaikan untuk header aplikasi.

• Komponen gambar

  • image.tsx : komponen gambar untuk menampilkan gambar dengan dukungan caching.

• Komponen utilitas

  • separator.tsx : komponen pembagi untuk memisahkan konten.
  • separator-with-text.tsx : pembagi dengan teks untuk ui yang ditingkatkan.
  • switch.tsx : Komponen sakelar sakelar untuk input boolean.

• File indeks

  • index.ts : File Ekspor Pusat untuk Komponen.

Memulai

Prasyarat

Pastikan Anda telah menginstal berikut:

• Node.js (v14 atau lebih tinggi)
• Benang
• Android Studio / Xcode untuk pengembangan Android / iOS

Instalasi

1. Klon Repositori:

   git clone [email protected]:ToniDarodda/react-native-template.git
   cd ReactNativeTemplate

2. Instal dependensi:

   yarn install

3. Konfigurasikan variabel lingkungan:

   Perbarui file .env di direktori root dengan pengaturan konfigurasi Anda:

   API_URL= ' https://your-api-url.com '
   SOCKET_URL= ' https://your-socket-url.com '

Menjalankan aplikasi

1. Mulai Metro Bundler:

   yarn start

2. Jalankan aplikasi di Android:

   yarn android

3. Jalankan aplikasi di iOS:

   yarn ios

4. Akses aplikasi:

   Aplikasi ini akan tersedia di emulator atau perangkat Anda.

? Pengujian

Untuk menjalankan tes, gunakan perintah berikut:

yarn test 

Skrip

• ? Format Kode Menggunakan Prettier: yarn format
• ? ‍♂️ Mulai aplikasi: yarn start
• ? ‍ Mulai dalam mode pengembangan: yarn android atau yarn ios
• ? Lint Kode menggunakan Eslint: yarn lint
• ? Jalankan tes: yarn test
• Jalankan Tes End-to-End: yarn test:e2e

Lisensi

Tidak ada lisensi; Anda bebas menggunakannya.

? Pengarang

Toni da Rodda

Ikon

• Penyebaran
• Konfigurasi
• ? Dokumentasi
• ? Pemeliharaan
• Keamanan
• ? Integrasi email
• ? Optimalisasi Kinerja
• ⚡ Dapatkan waktu

---

Jangan ragu untuk berkontribusi pada proyek ini dengan mengirimkan masalah atau tarik permintaan.

Untuk pertanyaan atau dukungan, silakan hubungi Toni da Rodda.

---