Wzorce rozwoju React Native

Opanuj rozwój React Native z Cursor i Claude Code. Te wzorce obejmują rozwój mobilny cross-platform, integrację modułów natywnych, optymalizację wydajności i strategie wdrażania dla iOS i Android.

Szybka konfiguracja projektów React Native

Inicjalizacja React Native z AI

Cursor
Claude Code

Otwórz Cursor w swoim workspace
Aktywuj tryb Agent (Cmd/Ctrl + I)
Prompt: “Stwórz nową aplikację React Native z TypeScript, React Navigation, React Native Paper UI i konfiguracją testów”
Pozwól agentowi obsłużyć komendy CLI i początkową konfigurację
Przejrzyj wygenerowaną strukturę i konfigurację

Otwórz terminal w Claude Code
Uruchom: claude "Zainicjalizuj projekt React Native TypeScript z Expo, nawigacją i zarządzaniem stanu"
Claude ustawi całą strukturę projektu
Przejrzyj wygenerowaną architekturę

Wzorce rozwoju komponentów

Tworzenie komponentów wielokrotnego użytku

Wzorzec Cursor
Wzorzec Claude Code

// Użyj trybu Agent Cursor do generowania komponentów
// Prompt: "Stwórz komponent Button wielokrotnego użytku z:
// - Wsparciem TypeScript
// - Wieloma wariantami (primary, secondary, danger)
// - Stanem ładowania
// - Funkcjami dostępności
// - Stylowaniem specyficznym dla platformy"

// Agent wygeneruje:
import React from 'react';
import {
  TouchableOpacity,
  Text,
  ActivityIndicator,
  StyleSheet,
  Platform,
  TouchableOpacityProps,
} from 'react-native';

interface ButtonProps extends TouchableOpacityProps {
  variant?: 'primary' | 'secondary' | 'danger';
  loading?: boolean;
  children: React.ReactNode;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  loading = false,
  children,
  disabled,
  style,
  ...props
}) => {
  // Implementacja komponentu ze stylowaniem specyficznym dla platformy
};

# Użyj kontekstowego zrozumienia Claude Code
claude --context "Stwórz komponent Button z motywem, który zgodny z naszym systemem designu"

# Claude przeanalizuje istniejące komponenty i stworzy spójne wzorce

Wzorce nawigacji

Złożona konfiguracja nawigacji

// Cursor Agent Prompt:
"Ustaw React Navigation z:
- Bottom tab navigator
- Stack navigators dla każdej zakładki
- Wsparciem deep linking
- Typami TypeScript
- Przepływem autoryzacji"

// Agent stworzy kompletną strukturę nawigacji

Wzorce zarządzania stanem

Konfiguracja Redux Toolkit

Inicjalizacja z AI: “Ustaw Redux Toolkit z TypeScript dla React Native”
Generuj slice: “Stwórz slice użytkownika z async thunks dla wywołań API”
Połącz komponenty: “Dodaj hooki Redux do komponentu UserProfile”
Dodaj trwałość: “Zaimplementuj Redux Persist z AsyncStorage”

Alternatywa Zustand

// Cursor prompt dla lekkiego zarządzania stanem:
"Stwórz store Zustand dla:
- Stanu autoryzacji użytkownika
- Ustawień aplikacji
- Kolejki offline dla wywołań API
- Interfejsów TypeScript"

Integracja modułów natywnych

// Cursor Agent może pomóc z rozgałęzieniem platform
// Prompt: "Stwórz implementację haptic feedback specyficzną dla iOS"

import { Platform, NativeModules } from 'react-native';

const HapticFeedback = Platform.select({
  ios: () => NativeModules.HapticFeedback,
  android: () => null,
})();

// Prompt: "Dodaj obsługę uprawnień specyficzną dla Android"

import { PermissionsAndroid, Platform } from 'react-native';

const requestCameraPermission = async () => {
  if (Platform.OS === 'android') {
    // Implementacja specyficzna dla Android
  }
};

Optymalizacja wydajności

Wzorce optymalizacji list

// Cursor prompt dla zoptymalizowanych list:
"Stwórz wydajny FlatList z:
- Optymalizacją Memo
- Implementacją getItemLayout
- keyExtractor
- Paginacją onEndReached
- Obsługą stanu pustego"

Optymalizacja obrazów

Obsługa obrazów wspomagana AI

Pozwól Cursor/Claude zaimplementować:

Strategie lazy loading
Zarządzanie cache
Progresywne ładowanie obrazów
Optymalizację pamięci

Wzorce testowania

Testowanie komponentów

// Cursor Agent prompt:
"Napisz kompleksowe testy dla komponentu Button używając:
- React Native Testing Library
- Jest
- Przypadków testowych specyficznych dla platformy
- Testów dostępności"

Testowanie E2E z Detox

Konfiguracja: “Skonfiguruj Detox dla projektu React Native”
Pisz testy: “Stwórz test E2E dla przepływu logowania”
Integracja CI: “Dodaj testy Detox do GitHub Actions”

Przepływy debugowania

Integracja Flipper

# Claude Code może skonfigurować narzędzia debugowania
claude "Skonfiguruj Flipper z:
1. Pluginem sieci do debugowania API
2. Integracją React DevTools
3. Podglądem AsyncStorage
4. Wsparciem debuggera Hermes"

Wskazówki debugowania zdalnego

Wzorce wdrażania

Konfiguracja CI/CD

Wdrażanie iOS
Wdrażanie Android

# Cursor prompt: "Stwórz workflow GitHub Actions dla wdrażania iOS"
# Zawiera:
# - Zarządzanie certyfikatami
# - Upload do TestFlight
# - Zwiększanie wersji

# Prompt: "Ustaw wdrażanie Android z:
# - Uploadem do Play Store
# - Podpisywaniem aplikacji
# - Generowaniem notatek wydania"

Popularne przepisy

Przepływ autoryzacji

// Prompt kompleksnej implementacji autoryzacji:
"Zaimplementuj przepływ autoryzacji z:
1. Ekranami Login/Register
2. Autoryzacją biometryczną
3. Logiką odświeżania tokenów
4. Bezpiecznym przechowywaniem
5. Deep linking dla callbacków autoryzacji"

Architektura offline-first

// Cursor Agent może zaimplementować:
"Stwórz architekturę offline-first z:
- Lokalną bazą danych SQLite
- Kolejką synchronizacji dla wywołań API
- Rozwiązywaniem konfliktów
- Synchronizacją w tle
- Monitorowaniem stanu sieci"

Powiadomienia push

Konfiguracja: “Skonfiguruj powiadomienia push dla iOS i Android”
Uprawnienia: “Zaimplementuj przepływ uprawnień powiadomień”
Handlery: “Stwórz handlery powiadomień dla foreground/background”
Deep Links: “Dodaj deep linking z powiadomień”

Najlepsze praktyki z AI

Efektywne promptowanie

// Dobra struktura promptu:
"Stwórz [typ komponentu], który:
- Wymaganie 1 ze szczegółami
- Wymaganie 2 z ograniczeniami
- Przestrzega naszych istniejących wzorców w [referencja pliku]
- Zawiera typy TypeScript
- Ma testy jednostkowe"

Przegląd kodu z AI

Przegląd kodu wspomagany AI

Użyj Cursor/Claude do:

Sprawdzania zgodności z dostępnością
Weryfikacji obsługi specyficznej dla platformy
Optymalizacji rozmiaru bundle
Zapewnienia spójnego stylowania

Zaawansowane wzorce

Tworzenie modułów natywnych

// Cursor może pomóc tworzyć moduły natywne
// Prompt: "Stwórz moduł natywny iOS dla:
// - Niestandardowej funkcjonalności kamery
// - Mostka Objective-C
// - Implementacji Swift
// - Definicji TypeScript"

Monitorowanie wydajności

// Zaimplementuj śledzenie wydajności:
"Dodaj monitorowanie wydajności z:
- Czasami renderowania komponentów
- Przejściami nawigacji
- Czasami odpowiedzi API
- Alertami użycia pamięci
- Raportowaniem crashy"

Następne kroki

Eksploruj wzorce Flutter dla rozwoju Dart
Ucz się o przepływach Expo dla zarządzanych aplikacji
Sprawdź wzorce integracji Backend dla rozwoju API