0.48

Edit

Үндсэн аргаа сурах

React Native нь React-тай ижил боловч вэб компонентын оронд натив хэсгүүдийг ашиглаж апп бүтдэг. Тиймээс React Native дээр хийгдсэн аппын үндсэн бүтцийг ойлгохын тулд та JSX, state, props гэх мэтчилэн React-ийн талаар үндсэн ойлголттой байх хэрэгтэй. Хэрэв та React-ийг мэддэг бол натив компонент гэж юу болох вэ гэх мэт зөвхөн React Native-т хамаарах хэдэн зүйлийг сурах шаардлагатай. Энэхүү хичээлийг туршлагатай үгүйгээс үл хамааран бүх түвшний хүмүүст зориулан бэлтгэсэн болно.

Ингээд сурцгаая.

Сайн уу, эх дэлхий

Хүн төрөлхтний эртний уламжлалаа даган апп хийхдээ нэн тэргүүнд "Сайн уу, эх дэлхий!" гэх үгтэй апп хийнэ. Үүний тулд:

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

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Сайн уу, эх дэлхий!</Text>
      </View>
    );
  }
}

Хэрэв та илүү ихийг мэдэхийг хүсэж байвал вэб симулятор доторх жишиг кодуудыг ашиглан янз бүрээр оролдож үзэх боломжтой. Мөн App.js файлыг хуулаад өөрийн төхөөрөмж дээрээ жинхэнэ апп бүтээж болно.

Юу болоод байна?

Энд байгаа зарим зүйлс танд JavaScript биш юм шиг харагдаж байгаа байх. Сандрах хэрэггүй. Энэ бол ирээдүй.

Юуны түрүүнд ES2015 (эсвэл ES6) гэдэг нь Javascript-д хийгдсэн багц сайжруулалт бөгөөд албан ёсны стандартын нэг болсон. Гэхдээ бүх вэб хөтөч хараахан үүнийг дэмждэг болоогүй байгаа. Тиймдээ ч вэб хөгжүүлэлтэд түгээмэл ашиглагдахгүй байна. React Native нь ES2015-ийг дэмждэг тийм болохоор таарах эсэхэд санаа зовохгүйгээр ашиглаж болно.import, from, class болон extends зэрэг нь ES2015-ийн онцлог юм. Хэрэв та ES2015-ийн талаар мэдэхгүй бол энэхүү хичээлд заасан шиг жишиг кодыг сонгон авч ашиглах боломжтой. Хэрэв хүсвэл энэ хуудас дээрээс ES2015-ийн онцлог давуу талын тухай ерөнхий мэдээллийг уншиж болно.

Энэхүү кодын жишээн дээрх өөр нэг содон зүйл нь <View><Text>Hello world!</Text></View> юм. Энэ бол JSX – Javascript дотор XML байрлуулахыг хэлдэг нэршил юм. Олон фреймворкт тусгай жишиг хэлийг ашиглан тэмдэглэгээт хэл дотор код байрлуулдаг. Харин React-д энэ нь эсрэгээрээ байдаг. JSX-ийн тусламжтай та өөрийн тэмдэглэгээт хэлийг код дотор бичих боломжтой. Вэбийн HTML шиг л харагддаг. Ердөө <div> эсвэл <span> гэх мэт зүйлсийн оронд React-ийн компонентуудыг ашиглаж байна гэсэн үг. Энэ тохиолдолд, <Text> гэдэг ямарваа текстийг харуулж буй React Native-ийн өөрийн компонент бөгөөд View нь <div> эсвэл <span> шиг гэсэн үг юм.

Компонентууд

Энэхүү код нь HelloWorldApp буюу шинэ Component-ийг тодорхойлж байна. React Native апп хийх үед та шинээр компонент их үүсгэнэ. Дэлгэц дээр харж буй бүхэн тань л тодорхой нэг компонент гэсэн үг. Компонент гэдэг их энгийн зүйл юм. Энэ нь дэлгэцэнд харуулах JSX-үүдийг буцаах render функц агуулсан байхад хангалттай.

Энэ апп тийм ч олон зүйл хийсэнгүй

Тийм ээ.Илүү сонирхолтой зүйл хийх компонент бий болгохын тулд та Props-ийн талаар судлах хэрэгтэй.

← ЭхлэхПропс →