Basic React Native Part 8 - React Native State

React Native Dec 31, 2019

Pada  Part 7 kita telah belajar dan mengenal Component Text jadi jika anda belum mengikuti tutorial   Part 7 diharapkan anda mengikuti tutorial   Part 7 terlebih dahulu.

Pada Tutorial Part 8 ini kita mengenal terlebih dahulu Basic React Native State.State adalah tempat penyimpanan yang bersifat yg mungkin berubah(sementara) atau mutable di dalam suatu component.

State adalah data yang berfungsi sebagai data utama pada component yang isi-nya hanya untuk component tempat state itu di set isi-nya.

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

Menghapus Code Default App.js

Untuk memudahkan memahami componen Text kita hapus semua code dafault App.js. Setelah semua code default App.js dihapus maka ikuti langkah - langkah berikut ini.

Code Menggunakan State

State adalah tempat penyimpanan yang bersifat mutable di dalam suatu component.

  • 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
  • Kemudian Buat state sebelum render() didalam class
class App extends Component {
    //Membuat State
    state={
        text:'ini teks menggunakan state'
    }
  render() { 
    return (  );
  }
}
 
Membuat State Dalam Class
  • Memanggil State untuk ditampilkan ke View atau layar Aplikasi dan Handphone dengan cara menggunakan component View dan Text yang ditambahkan dalam return() di class untuk lebih jelas perhatian code dibawah ini.
class App extends Component {
  //Membuat State
  state={
      text:'ini teks menggunakan state'
  }
render() { 
  return ( 
  //Menambahkan Component View dan Text Kemudian Memanggil State
    <View>
      <Text>{this.state.text}</Text>
    </View>
   );
}
}
Memanggil State
  • Jangan Lupa di export class App dengan code berikut ini
export default App
export class
  • Berikut code versi lengkap nya App.js
import React, { Component } from 'react'
import {
  View,
  Text
} from 'react-native'

class App extends Component {
  //Membuat State
  state={
      text:'ini teks menggunakan state'
  }
render() { 
  return ( 
  //Menambahkan Component View dan Text Kemudian Memanggil State
    <View>
      <Text>{this.state.text}</Text>
    </View>
   );
}
}

export default App;
Code Lengkap App.js
Tampilan DI Handphone

Demikianlah pembahasan Tutorial Part 8 ini akan kita lanjutkan pada Tutorial Part 9.

Wandi Pratama

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