Pelajari Dasar-dasar React Native | React Native | Tutorial | Belajar | Pemula

Pelajari Dasar-dasar

 
Bereaksi Native seperti React, tetapi menggunakan komponen asli bukan komponen web sebagai blok bangunan. Jadi untuk memahami struktur dasar aplikasi React Native, Anda perlu memahami beberapa konsep dasar React, seperti JSX, komponen, status, dan properti. Jika Anda sudah tahu Bereaksi, Anda masih perlu mempelajari beberapa barang React-Native-specific, seperti komponen asli. Tutorial ini ditujukan untuk semua pemirsa, apakah Anda memiliki pengalaman React atau tidak.
Sesuai dengan tradisi kuno orang-orang kita, pertama-tama kita harus membangun aplikasi yang tidak melakukan apa pun kecuali mengatakan "Halo dunia". Ini dia

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

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View>
        <Text>Hello world!</Text>
      </View>
    );
  }
}
 
Jika Anda ingin tahu, Anda dapat bermain-main dengan kode contoh langsung di simulator web. Anda juga dapat menempelkannya ke file App.js Anda untuk membuat aplikasi nyata di komputer lokal Anda. 
Apa yang terjadi di sini?

Beberapa hal di sini mungkin tidak terlihat seperti JavaScript untuk Anda. Jangan panik. Ini masa depan.

Pertama-tama, ES2015 (juga dikenal sebagai ES6) adalah satu set perbaikan untuk JavaScript yang sekarang menjadi bagian dari standar resmi, tetapi belum didukung oleh semua browser, sehingga sering kali belum digunakan dalam pengembangan web. Bereaksi Kapal asli dengan dukungan ES2015, jadi Anda dapat menggunakan barang ini tanpa mengkhawatirkan kompatibilitasnya.import,from,class,extends.pada contoh di atas adalah semua fitur ES2015. Jika Anda tidak akrab dengan ES2015, Anda mungkin dapat mengambilnya hanya dengan membaca kode contoh seperti tutorial ini. Jika Anda mau, halaman ini memiliki gambaran umum tentang fitur ES2015.
Hal lain yang tidak biasa dalam contoh kode ini adalah <View><Text>Hello world!</Text></View>.Ini adalah JSX - sintaks untuk menanamkan XML dalam JavaScript. Banyak kerangka menggunakan bahasa templating khusus yang memungkinkan Anda menanamkan kode di dalam bahasa markup. Dalam React, ini dibalik. JSX memungkinkan Anda menulis bahasa markup Anda di dalam kode. Sepertinya HTML di web, kecuali bukan hal-hal seperti web
<div> or  <span> Anda menggunakan komponen React. Pada kasus ini,<Text> adalah komponen bawaan yang hanya menampilkan beberapa teks dan
View seperti halnya .
Komponen
Jadi kode ini mendefinisikan  HelloWorldApp  a new Componen Saat Anda membuat aplikasi React Native, Anda akan membuat banyak komponen baru. Apa pun yang Anda lihat di layar adalah semacam komponen. Sebuah komponen bisa sangat sederhana - satu-satunya hal yang diperlukan adalah a  render fungsi yang mengembalikan beberapa JSX untuk ditampilkan.

Props 

Sebagian besar komponen dapat dikustomisasi ketika dibuat, dengan parameter yang berbeda. Parameter penciptaan ini disebut props

Misalnya, satu komponen Dasar Bereaksi Asli adalah Image When you create an image, you can use a prop named  source untuk mengontrol gambar apa yang ditampilkan.

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => Bananas);
 

 Perhatikan itu {pic} dikelilingi oleh kawat gigi, untuk menanamkan pic variabel ke dalam JSX  Anda dapat menempatkan ekspresi JavaScript apa pun di dalam kurung di JSX.
Komponen Anda sendiri juga dapat digunakan props Ini memungkinkan Anda membuat komponen tunggal yang digunakan di banyak tempat berbeda di aplikasi Anda, dengan properti yang sedikit berbeda di setiap tempat. Cukup merujuk  this.props dalam fungsi render Anda. Inilah contohnya: 
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);