React Native гэж юу вэ?

React Native бол Meta (Facebook) компаний 2015 онд нийтэд нээсэн мобайл апп хөгжүүлэлтийн фреймворк юм. React Native ашиглан нэг JavaScript код бичиж iOS болон Android хоёр платформд нийтлэх боломжтой. Facebook, Instagram, Shopify, Microsoft Teams зэрэг аппууд React Native дээр ажилладаг.

React ба React Native-н холбоо

Та React курсд сурсан бүх зүйл — component, props, state, hooks — React Native-д яг адилхан хэрэглэгддэг. Ялгаа нь зөвхөн UI элементүүдэд:

| Вэб (React) | Мобайл (React Native) | |---|---| | <div> | <View> | | <p>, <h1> | <Text> | | <img> | <Image> | | <button> | <TouchableOpacity> | | <input> | <TextInput> | | CSS файл | StyleSheet объект |

Логик, state, өгөгдөл татах — бүгд ижилхэн. Зөвхөн HTML тэгүүдийн оронд React Native-н тэгүүд ашиглана.

React Native хэрхэн ажилладаг вэ?

React Native бол JavaScript кодыг iOS болон Android-н жинхэнэ (native) UI элементүүд рүү хөрвүүлдэг:

Таны JavaScript код → React Native → iOS: UIView / Android: android.view.View

Энэ нь вэб технологи ашигласан боловч жинхэнэ native апп шиг харагддаг, ажилладаг.

Expo гэж юу вэ?

Expo бол React Native дээр суурилсан хэрэгсэл бөгөөд хөгжүүлэлтийг хамаагүй хялбар болгодог. Бид энэ курсд Expo ашиглана.

npx create-expo-app my-app
cd my-app
npx expo start

Expo Go аппыг утасдаа суулгаад QR код уншуулвал аппаа утсан дээрээ шууд харж болно — emulator шаардлагагүй.

Анхны React Native component

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Сайн уу, дэлхий!</Text>
      <Text style={styles.subtitle}>Энэ бол миний анхны апп</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#0b1120',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#f1f5f9',
  },
  subtitle: {
    fontSize: 14,
    color: '#64748b',
    marginTop: 8,
  },
});

React-тай харьцуулахад CSS файлын оронд StyleSheet.create() ашиглаж байгааг анзаарна уу. Энэ нь CSS-тэй маш төстэй боловч camelCase нэршил ашигладаг — backgroundColor, fontSize, fontWeight.

Яагаад React Native сурах хэрэгтэй вэ?

Нэг код, хоёр платформ — iOS болон Android-д тусдаа Swift/Kotlin сурах шаардлагагүй. JavaScript мэдлэгтэй хүн мобайл апп хөгжүүлж чадна.

React мэдлэг шилждэг — React курс дуусгасан хүн React Native-г хурдан сурдаг. Component, hooks, state бүгд ижил.

Ажлын зах зээл — Монгол дахь IT компаниуд мобайл хөгжүүлэгч эрэлхийлдэг. React Native мэдэх нь ажлын байр олоход давуу тал өгнө.

Expo ecosystem — Camera, location, push notification, file system зэрэг native функцуудыг JavaScript-ээр дуудах боломж олгодог.

Дараагийн хичээлд:

Node.js суулгах — энэ бол React Native ажиллуулахад заавал шаардлагатай. Суулгах нь маш энгийн бөгөөд зөвхөн нэг удаа хийнэ.