Basic React Native Part 5 - Mengenal Struktur File, Class dan Funtion Component

React Native Dec 30, 2019

Pada  Part 4 kita menginstall Aplikasi Debug ke HP Android Kita jadi jika anda belum mengikuti tutorial Part 4  diharapkan anda mengikuti tutorial Part 4 terlebih dahulu.

Pada Tutorial Part 5 ini kita akan belajar Mengenal Struktur File, Class dan Function Component. Struktur File ada sekumpulan file atau folder yang masing - masing memiliki fungsi yang berbeda - beda. Adapun Class dan Function Component merupakan bagian dari file - file tersebut yang berada didalam sebuah barisan code untuk di render atau ditampilkan kepada user/interface/pengguna dalam bentuk gambar,audio,video ataupun text.

Mengenal Struktur File React Native

Untuk memudah kita memahmi bagaimana atau seperti apa struktur file dari sebuah project react native kita perlu membuka folder project react native tersebut. Pada Tutorial Part 2 kita telah membuat sebuah project dengan menggunakan react native cli dan kita berikan nama project itu BelajarBasicRN. Sekarang buka folder project tersebut menggunakan aplikasi Visual Studio Code yang sudah install seperti pada langkah - langkah di Tutorial Part 3

  • Tampilan Folder dan File Yang Ada di Project BelajarBasicRN berikut ini . Kita akan jelaskan File dan Folder Yang Inti di dalam Project React Native.
Folder dan File Project

Keterangan :

  • Folder android merupakan folder yang menghandel script - script atau code Java android dan juga berfungsi untuk membuild aplikasi react native ke dalam bentuk aplikasi android.
Folder android
  • Folder ios merupakan folder yang menghandel script - script atau code ios/swift dan juga berfungsi untuk mengbuild aplikasi react native ke dalam bentuk aplikasi ios/apple.
Folder ios
  • File App.js merupakan file yang pertama kali yang diload atau render atau ditampilkan   berdasakan code yang kita tulis di dalam file App.js ini.
File App.js

Berikut code yang terdapat pada file App.js

//Import Object Component dari class React.
import React from 'react';

//Import Component-component React Native yang dibutuhkan.
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

//Exporting Function / Main class / Class utama yang bernama StagOverheat, yang mewarisi sifat dari Component yang telah kita import dari React.

const App: () => React$Node = () => {
  //Me-Render atau menampilkan hasil ke layar.
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Step One</Text>
              <Text style={styles.sectionDescription}>
                Edit <Text style={styles.highlight}>App.js</Text> to change this
                screen and then come back to see your edits.
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>See Your Changes</Text>
              <Text style={styles.sectionDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Debug</Text>
              <Text style={styles.sectionDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Learn More</Text>
              <Text style={styles.sectionDescription}>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

//Ini code styling untuk pengaturan warna, ukuran dll gambar, text atau yang lainnya.
const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;
Struktur Code App.js

Dari beberapa code diatas akan menghasilkan tampilan seperti berikut ini.

Tampilan Hasil Code App.js

Mengenal Function Dan Class Component

Component adalah element-element custom yang dibangun menggunakan class atau function yang secara optional dapat menerima input yaitu properties ( props ) dan mengembalikan sebagai UI (user interface)

Ada dua cara untuk membuat tampilan user menggunakan React Native , yaitu :

  • Menggunakan class component
  • Menggunakan functional component

Perbedaan Function dan Class Component

Class Component

Component yang dibangun menggunakan class sebagai struktur penyusun UI-nya (user interface) .

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

class App extends React.Component{
    render(){
        return(
            <View>
                <Text> Hello World </Text>
            </View>
        )
    }
}
export default App
Class Component

Functional Component

Component yang dibangun menggunakan function sebagai struktur penyusun UI-nya (user interface) .

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

const App = () => {
    return(
        <View>
            <Text> Hello World </Text>
        </View>
    )
}
export default App
Function Component

Demikian untuk Tutorial Part 5 ini. Silakan lanjut ke Tutorial Part 6

Wandi Pratama

Saya seorang Developer Mobile menggunakan Framework React Native dan saya juga memiliki pengalaman dibidang SYS Admin