React Native — bu Meta tomonidan yaratilgan framework bo‘lib, JavaScript va TypeScript yordamida native mobil ilovalar yaratish imkonini beradi.#
Expo esa React Native ustiga qurilgan ecosystem bo‘lib, development jarayonini tezlashtiradi.#
Agar siz yangi boshlayotgan bo‘lsangiz yoki professional darajaga chiqmoqchi bo‘lsangiz, quyidagi stack juda muhim:#
⚡ React Native ⚡ Expo ⚡ TypeScript ⚡ Expo Router ⚡ React Navigation ⚡ Zustand ⚡ TanStack Query ⚡ NativeWind ⚡ Reanimated ⚡ Firebase ⚡ Node.js backend
━━━━━━━━━━━━━━━━━━
📱 Expo Go nima?
Expo Go — bu telefoningizda React Native loyihangizni tez test qilish uchun ishlatiladigan ilova.
Siz:
- Kompyuterda loyiha ochasiz
- Expo server ishga tushadi
- QR code chiqadi
- Telefon orqali scan qilasiz
- Ilova ochiladi
Boshlash:
npx create-expo-app my-project
Papka ichiga kirish:
cd my-project
Ishga tushirish:
npx expo start
Keyin telefon:
Expo Go → Scan QR → App ishlaydi
━━━━━━━━━━━━━━━━━━
📦 Expo loyihasining asosiy strukturasi:
my-project
app/
├── index.tsx
├── profile.tsx
└── settings.tsx
components/
├── Button.tsx
└── Card.tsx
hooks/
lib/
assets/
package.json
Zamonaviy Expo loyihalarda Expo Router ishlatiladi.
Misol:
app/index.tsx
bu:
/
route bo‘ladi.
app/profile.tsx
bu:
/profile
bo‘ladi.
━━━━━━━━━━━━━━━━━━
🎨 UI yaratish
React Native HTML emas.
Web:
<div>
<h1>Hello</h1>
</div>
React Native:
<View>
<Text>
Hello
</Text>
</View>
Asosiy komponentlar:
View
Container uchun:
<View>
</View>
Text
Matn:
<Text>
UlugDev
</Text>
Image:
<Image
source={{
uri:"https://image.com/photo.png"
}}
/>
Button:
<Button
title="Click"
/>
━━━━━━━━━━━━━━━━━━
🎨 Styling
React Native CSS emas.
Misol:
<View
style={{
backgroundColor:"#000",
padding:20,
borderRadius:20
}}
>
<Text
style={{
color:"#fff",
fontSize:24
}}
>
Hello
</Text>
</View>
Ammo professional loyihalarda:
NativeWind ishlatiladi.
O‘rnatish:
npm install nativewind
Ishlatish:
<View className="flex-1 bg-black">
<Text className="text-white text-xl">
UlugDev
</Text>
</View>
━━━━━━━━━━━━━━━━━━
🧭 Navigation
Mobil ilovalarda eng muhim qism.
Masalan:
Home
↓
Profile
↓
Settings
React Navigation:
npm install
@react-navigation/native
Stack:
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
/>
<Stack.Screen
name="Profile"
component={Profile}
/>
</Stack.Navigator>
O‘tish:
navigation.navigate(
"Profile"
)
━━━━━━━━━━━━━━━━━━
📂 Expo Router
Yangi standart:
npx expo install expo-router
Misol:
app
(index).tsx
profile.tsx
settings.tsx
Link:
<Link href="/profile">
Profile
</Link>
Bu Next.js App Router ga o‘xshaydi.
━━━━━━━━━━━━━━━━━━
💾 Local Storage
User ma'lumotlarini saqlash:
npx expo install
@react-native-async-storage/async-storage
Saqlash:
await AsyncStorage.setItem(
"user",
JSON.stringify(user)
)
Olish:
const data =
await AsyncStorage.getItem(
"user"
)
Masalan:
Login qilgan user:
{
id:1,
name:"Ulugbek"
}
telefon xotirasida saqlanadi.
━━━━━━━━━━━━━━━━━━
🔐 Secure Storage
Token uchun oddiy storage ishlatmang.
Expo SecureStore:
npx expo install
expo-secure-store
Token:
await SecureStore.setItemAsync(
"token",
jwt
)
Keyin:
const token =
await SecureStore.getItemAsync(
"token"
)
━━━━━━━━━━━━━━━━━━
📡 API bilan ishlash
Professional app backend bilan ishlaydi.
Axios:
npm install axios
API:
const response =
await axios.get(
"https://api.com/users"
)
POST:
axios.post(
"/login",
{
email,
password
}
)
━━━━━━━━━━━━━━━━━━
⚡ TanStack Query
Server state uchun.
npm install
@tanstack/react-query
Misol:
useQuery({
queryKey:["users"],
queryFn:getUsers
})
Afzalligi:
✅ cache
✅ loading
✅ error
✅ refetch
━━━━━━━━━━━━━━━━━━
Davomi tez kunda :
🔥 React Native architecture 🔥 Zustand state management 🔥 Authentication 🔥 Firebase realtime chat 🔥 Image upload 🔥 Push notification 🔥 App Store / Play Store release 🔥 Production project structure
#ReactNative #Expo #MobileDevelopment #TypeScript #Frontend #Developer
No comments yet.