Basic React Native Part 9 - React Native Props

React Native • Dec 31, 2019

Pada  Part 8 kita telah belajar dan mengenal State jadi jika anda belum mengikuti tutorial  Part 8 diharapkan anda mengikuti tutorial  Part 8 terlebih dahulu.

Pada Tutorial Part 9 ini kita mengenal terlebih dahulu Basic React Native Props.Props adalah sebuah nilai yang ditetapkan sebagai argument di parent-component dan diturunkan sebagai parameter di dalam child-component.

Props adalah data yang memiliki fungsi ganda yaitu selain untuk menyimpan data, Props juga berfungsi untuk “melempar data” antar components view jika ada perubahan data di state.

Perbedaan State Dan Props ?

State
  • Data bisa berubah - ubah
  • Tidak bisa digunakan di class lain
  • Hanya bisa digunakan di Class Component
  • data private sebuah component
Props
  • Prop singkatan dari Property.
  • Prop itu read-only.
  • Prop bisa digunakan di Function Dan Class Component
  • Prop dijadikan Parameter
  • Prop umumnya digunakan untuk komunikasi data component dari parent komponent ke child component.

Mengimplementasikan Pada Project React Native

Buat Project React Native

Pada Tutorial Part 2 kita telah menginstall react-native-cli kemudian kita telah belajar cara membuat project baru react native. Berikut perintah cara untuk membuat project baru react native.

react-native init namafolderproject
Buat Project Baru

Install Aplikasi Debug Ke Handphone Android

Pada Tutorial Part 4 kita telah belajar cara menginstall Aplikasi Debug ke Handphone Android, untuk tata cara yang lebih jelas bisa langsung pelajari lagi pada Tutorial Part 4 terlebih dahulu. Secara singkat perintahnya seperti berikut.

react-native run-android
Install Aplikasi Debug Ke Handphone Android

Buka File App.js Dengan Visual Studio Code

Secara default pada file App.js memiliki code yang cukup dan menghasilkan tampilkan seperti berikut ini

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

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

const App: () => React$Node = () => {
  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>
    </>
  );
};

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;
Code Default App.js
Tampilan Default File App.js
Tampilan Default File App.js

Membuat Folder dan File Baru

Untuk mengimplementasikan props kita perlu file Javacript yang baru selain App.js untuk membuat Folder dan File ikuti langkah - langkah berikut ini.

Membuat Folder
  • Buka Project React Native Menggunakan Visual Studio Code dan Buat Folder dengan mengikuti langkah - langkah pada gambar dibawah ini.
Buat Folder Baru
Hasil Folder Yang KIta Buat 
Membuat File
  • Klik folder src kemudian ikuti langkah - langkah selanjutnya seperti pada gambar dibawah ini
Membuat File Baru
Hasil File Baru

Menambahkan Code

1. props.js
  • Import React
import React, { Component } from 'react'
import react
  • Import Component Yang Dibutuhkan Untuk Project React Native
import {
View,
Text
}from 'react-native'
Import Component
  • Membuat Class Componet
class App extends Component {
  render() { 
    return (  );
  }
}
Membuat Class
  • Menambahkan Component View , Text dan props didalam return.
class Props extends Component {
    render() { 
        return ( 
        //Menambahkan Component View , Text dan props didalam return.
            <View>
                <Text>{this.props.text}</Text>
            </View>
         );
    }
}
Props
  • Jangan Lupa di export class App dengan code berikut ini
export default Props
export class
  • Berikut code versi lengkap nya Props.js
import React from 'react'
import { View , Text } from 'react-native'

class Props extends React.Component{
    render(){
        return(
            <View>
            <Text>{this.props.text}</Text>
            </View>
        )
    }
}
export default Props
Code Lengkap
2. App.js
  • Menghapus semua Code Default App.js
  • Ganti dengan Code berikut ini
import React from 'react'
//Import File props.js dengan nama alias MyComponent
import MyComponent from './src/props'

//Buat Class
class App extends React.Component{
    render(){
        return(
        //Panggil File props.js
            <MyComponent
            text='Text Ini Menggunakan Props ?'
            />
        )
    }
}
//Jangan Lupa di Export Classnya
export default App
Ganti Code App.js
Tampilan seperti berikut
Tampilan UI

Demikianlah pembahasan Tutorial Part 9 akan kita lanjutkan pada Tutorial Part 10

Wandi Pratama

Saya seorang Developer Mobile menggunakan Framework React Native dan saya juga memiliki pengalaman dibidang SYS Admin. Jasa menerima jasa pembuatan aplikasi dan website https://pindahdigital.com

Recommended for you

No results for your search, try something different.