scalableReactNativeBoilerplate
1.0.0
Disponsori oleh Casainnov
Selamat datang di scalable React Native Boilerplate, titik awal terstruktur untuk membangun aplikasi asli React yang dapat dipertahankan, dapat diskalakan, dan efisien. Boilerplate ini mengikuti praktik terbaik untuk mengatur basis kode Anda, menyiapkan manajemen negara, menangani interaksi API, tema, dan banyak lagi. Kami menggunakan versi React Native terbaru dan menjaga semua perpustakaan tetap up to date, memastikan kompatibilitas dengan fitur dan peningkatan terbaru.
├── e2e # Detox configuration for different environments
├── Fastlane # CI/CD configuration using Fastlane for automated builds and deployment
├── src
├── assets # Directory for app assets such as images and fonts
│ ├── images # Folder for image assets used in the app
│ ├── package.json # Package file for managing assets if needed
│ └── icons # Folder for SVG or other icon assets
│ ├── iconTransactions.svg # Icon for transactions
│ ├── iconBlocks.svg # Icon for blocks
│ ├── iconSettings.svg # Icon for settings
│ ├── iconEyeInactive.svg # Inactive eye icon
│ └── iconEyeActive.svg # Active eye icon
│ └── fonts # Folder for font files
│ ├── Roboto-Regular.ttf # Regular weight of Roboto font
│ └── Roboto-Bold.ttf # Bold weight of Roboto font
├── api # Folder for handling API interactions
│ ├── constant.ts # Constants used throughout API calls
│ ├── Api.ts # Main API configuration and methods
│ ├── types.ts # TypeScript types related to API responses
│ ├── package.json # Package file for API utilities if needed
│ └── customAPI # Custom API services for specific endpoints
│ ├── routes.ts # Routes for custom API calls
│ └── customApi.ts # Custom API implementation
├── components # Reusable UI components organized by Atomic Design
│ ├── package.json # Package file for component library
│ ├── atoms # Atoms: basic UI components (buttons, inputs, etc.)
│ │ ├── LoadingComponent # Loading spinner or component
│ │ │ └── index.tsx # Component implementation
│ │ ├── Button # Button component
│ │ │ └── index.tsx # Component implementation
│ │ │ └── tests__ # Unit tests for Button component
│ │ │ └── LoadingScreen.test.tsx
│ │ ├── Text # Text component for consistent styling
│ │ │ └── index.tsx # Component implementation
│ │ └── StyledImage # Styled image component
│ │ └── index.tsx # Component implementation
│ ├── molecules # Molecules: combinations of atoms (card, form elements, etc.)
│ └── organisms # Organisms: complex components made from molecules and atoms
├── container # Context and provider components for global states
│ ├── LanguageHelper.tsx # Language context provider
│ ├── AppThemeProvider.tsx # Theme context provider
│ └── package.json # Package file for container components
├── hooks # Custom hooks for reusable logic
│ ├── useAppDispatch.ts # Hook for dispatching actions in Redux
│ ├── useAppSelector.ts # Hook for selecting state from Redux store
│ ├── useActions.ts # Hook for using Redux actions
│ ├── package.json # Package file for hooks
│ ├── index.ts # Entry point for hooks
│ └── useTraceUpdate.ts # Hook for tracing component updates
├── navigation # Navigation setup for the app
│ ├── index.tsx # Main navigation entry point
│ ├── AppNavigation # Navigation component
│ │ ├── index.tsx # Component implementation
│ │ └── AppScreens.tsx # Screens defined for navigation
│ ├── package.json # Package file for navigation
│ ├── LinkingConfiguration.ts # Configuration for deep linking
│ └── types.tsx # TypeScript types related to navigation
├── redux # Redux store and configuration
│ ├── appConfig # App configuration for Redux
│ │ ├── appConfigSelectors.ts # Selectors for app config
│ │ ├── appConfigModel.ts # Model for app config state
│ │ └── appConfig.ts # Main app configuration
│ ├── package.json # Package file for Redux
│ ├── rootReducer.ts # Root reducer for combining all reducers
│ └── store.ts # Redux store configuration
├── screens # Screens or views of the app organized by features
│ ├── package.json # Package file for screens
│ ├── HomeScreen # Home screen component
│ │ └── index.tsx # Component implementation
│ └── SettingScreen # Settings screen component
│ └── index.tsx # Component implementation
├── theme # Theming configuration and styling
│ ├── Colors.ts # Color definitions used throughout the app
│ ├── Fonts.ts # Font definitions and styling
│ ├── Screens.ts # Screen-specific styles
│ ├── globalStyling # Global styling definitions
│ │ ├── cards.ts # Card component styles
│ ├── package.json # Package file for theming
│ └── index.ts # Entry point for theme
├── i18n # Internationalization configuration
│ ├── allLanguages.ts # List of all available languages
│ ├── en_GB.ts # English (UK) translations
│ ├── fr_FR.ts # French translations
│ ├── ar_SA # Arabic (Saudi Arabia) translations
│ │ └── common.json # Common phrases in Arabic
│ ├── index.ts # Main entry for i18n configuration
│ ├── newLineProcessor.ts # Helper for processing new lines in translations
│ ├── en_GB # English (UK) translations (nested)
│ │ └── common.json # Common phrases in English (UK)
│ └── fr_FR # French translations (nested)
│ └── common.json # Common phrases in French
└── types # TypeScript type definitions for global use
│ ├── i18next.d.ts # Type definitions for i18next
│ └── declarations.d.ts # Global declarations
└── __tests__ # Unit and integration tests for components and screens
Aplikasi asli React ini, dibangun di versi 0.75.3, menampilkan arsitektur kuat yang dirancang untuk pengalaman pengguna yang mulus.
Leveraging React Navigation (V6), aplikasi ini menyediakan navigasi intuitif di berbagai layar, memastikan pengguna dapat dengan mudah mengakses fitur.
Dengan Redux Toolkit (V2) untuk manajemen negara, ia secara efisien menangani status aplikasi yang kompleks, memungkinkan aliran data yang lancar dan pembaruan waktu-nyata.
UI ditingkatkan oleh React Native Paper (V5), yang menawarkan serangkaian komponen yang dapat disesuaikan dan opsi tema yang dapat disesuaikan, menciptakan antarmuka yang menarik secara visual.
Untuk memastikan kualitas, aplikasi mengintegrasikan Jest and Detox (V20) untuk pengujian, memungkinkan pengujian otomatis dan jaminan kualitas yang ketat.
Fastlane merampingkan proses CI/CD, memfasilitasi penyebaran dan pembaruan yang efisien.
Interaksi API dikelola menggunakan AXIOS, memungkinkan komunikasi yang fleksibel dan kuat dengan layanan backend.
Internasionalisasi dicapai dengan React I18Next dan React Native Localize (, memungkinkan dukungan untuk berbagai bahasa dan pengaturan regional, meningkatkan aksesibilitas untuk audiens global.
Aplikasi secara efisien mengelola variabel lingkungan menggunakan React Native Config, memastikan data sensitif tetap aman dan terorganisir.
Untuk penanganan media yang optimal, reaksi gambar cepat asli meningkatkan kinerja pemuatan gambar, sementara React Native SVG memberikan dukungan grafik vektor yang dapat diskalakan, memungkinkan untuk konten visual yang kaya.
Animasi dibuat lancar dan responsif dengan react asli meningkatkan keterlibatan pengguna melalui transisi yang menarik secara visual.
Selain itu, reaksi masalah ukuran asli memastikan desain responsif di berbagai ukuran perangkat.
Secara keseluruhan, aplikasi ini menggabungkan perpustakaan yang kuat dan basis kode yang terstruktur dengan baik untuk membuat aplikasi seluler yang kaya fitur dan ramah pengguna
Pastikan Anda menginstal berikut:
Klon Repositori:
git clone [email protected]:chohra-med/scalableReactNativeBoilerplate.gitInstal dependensi:
cd scalableReactNativeBoilerplate
yarn Mulai server pengembangan:
yarn startJalankan aplikasi di iOS:
yarn iosJalankan aplikasi di Android:
yarn androidJalankan tes unit dengan bercanda:
yarn testJalankan tes ujung ke ujung dengan detoksifikasi:
yarn detox build -c ios
yarn detox test -c iosBoilerplate mencakup pengaturan fastlane dasar untuk mengotomatisasi build, pengujian, dan penyebaran.
Bangun aplikasi untuk Android dan iOS:
cd fastlane
fastlane android beta
fastlane ios betaKontribusi dipersilakan! Silakan ikuti langkah -langkah ini:
feature/new-feature ).Proyek ini dilisensikan di bawah lisensi MIT.
Terima kasih kepada masyarakat untuk memelihara perpustakaan yang luar biasa yang membuat reaksi pengembangan asli lebih mudah.
Untuk kolaborasi, temukan saya di LinkedIn.
Kunjungi Casainnov jika Anda membutuhkan kolaborasi apa pun.
