Basic React Native Part 5 - Mengenal Struktur File, Class dan Funtion Component
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
BelajarBasicRNberikut ini . Kita akan jelaskanFiledanFolderYangIntidi dalam Project React Native.
Keterangan :
- Folder
androidmerupakan folder yang menghandel script - script atau code Java android dan juga berfungsi untuk membuild aplikasi react native ke dalam bentuk aplikasi android.
- Folder
iosmerupakan folder yang menghandel script - script atau code ios/swift dan juga berfungsi untuk mengbuild aplikasi react native ke dalam bentuk aplikasi ios/apple.
- File
App.jsmerupakan file yang pertama kali yangdiloadataurenderatauditampilkanberdasakan code yang kita tulis di dalam fileApp.jsini.
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;
Dari beberapa code diatas akan menghasilkan tampilan seperti berikut ini.
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 AppFunctional 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 AppDemikian untuk Tutorial Part 5 ini. Silakan lanjut ke Tutorial Part 6