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);

Tutorial Belajar React Native - Cara membuat Form Login & Register | React Native

Berkenalan dengan React Native

Assalamu’alaikum wr. wb.

Intro

Sebenarnya ada banyak pilihan ketika kita ingin membuat aplikasi mobile. Apabila kita ingin membuat aplikasi ‘Native’ (memakai bahasa yang spesifik untuk platform tertentu), contohnya :

• Android app > bahasa pemrograman Java
• iOS app (apple) > bahasa pemrograman Objective C atau Swift

Nah ada lagi yang namanya ‘cross-platform’ app. Maksudnya apa cross-platform? Cross-platform itu mobile apps yang dibuat dengan bahasa pemograman yang tidak spesifik untuk platform tersebut, contohnya bahasa pemograman‘Javascript’. Dulu tidak ada developer yang membuat mobile app memakai javascript, javascript dipakai paling banyak untuk website. Tapi setelah perkembangan teknologi, mulailah trend developer memakai javascript untuk membuat mobile app.

Jadi Apa Itu React Native?

React Native merupakan suatu cross-platform framework yang dibuat oleh tim Facebook untuk membuat mobile app (android & ios) dengan menggunakan javascript.

Disini developer harus mengerti React.js jika ingin memakai React Native. Sekedar penjelasan bahwa react.js adalah suatu library yang dibuat oleh Facebook tahun 2013 yang berfungsi untuk membantu developer membuat User Interface (UI).

React Native menggunakan native component dari Android dan iOS namun tetap dalam bahasa pemrograman JavaScript. Pada dasarnya React Native memanglah native tidak seperti Phonegap / cordova yang berbasis web mobile / hybrid.

Cara Kerja React Native

React Native bekerja dengan dengan menanamkan file Javascript yang sudah di-bundle didalam aplikasi, dan menjalankan mereka secara local dari aplikasi yang kita buat. Namun kita juga dapat meletakan file Javascript kita didalam server dan diambil ketika ada koneksi, hal ini memungkinkan kita untuk melakukan update aplikasi secara cepat tanpa melalu proses submit ke Google Playstore atapun iOS Appstore. Untuk UI dan UX, React Native juga mengunakan Javascript untuk styling hampir mirip dengan CSS diweb namun dengan CamelCase.

Pengguna React Native

Perkembangan React Native cukup pesat hingga banyak perusahaan teknologi yang menggunakan framework ini karena kemudahan dan powerfull-nya. Untuk mevalidasi penjelasan ini kita bisa mengeceknya pada link berikut: Who’s using React Native?

Pada link tersebut terdapat beberapa perusahaan besar yang menggunakan React Native, antara lain Instagram, Facebook,Skype, Airbnb, Bloomberg dan masih banyak lagi. Jadi tidak ada salahnya jika kita mempelajari React Native.

Keunggulan Menggunakan React Native

1. Sebagai salah satu alternatif dalam pengembangan aplikasi mobile, react native dapat digunakan untuk mengembangkan aplikasi mobile dalam 2 environment dalam satu kali proses development.
2. Bahasa yang digunakan adalah javascript, dan saya rasa dalam belajar javascript tidak susah daripada kita harus belajar Java untuk pengembangan android dan Objective-C atau Swift untuk pegembangan iOS.
3. Truly Native react native sangat mendukung modul native seperti push notifications, deep linking, native UI components dan lain lain.
4. Dokumentasi yang ada sudah lengkap dan juga sudah banyak library-library yang kita bisa gunakan untuk pengembangan aplikasi sesuai kebutuhan kita.

Tutorial Belajar React Native – Understanding Props and State | React Native

React Native – Understanding Props and State

Selain Component dan JSX, dalam React Native anda juga akan sangat sering menemui Props dan State. Apa itu Props dan State?

Props

Dalam pengembangan aplikasi kita mungkin sering menggunakan parameter pada suatu fungsi. atau class. React native sendiri menyediakan sebuah opsi untuk mempermudah developer mengelola parameter pada suatu component yang disebut Props. Props sendiri bisa dibilang adalah sebuah parameter default yang dimiliki oleh suatu component dimana ketika anda memanggil sebuah component, anda dapat menentukan/insert nilai props untuk component tersebut. Sebagai contoh penggunaan props adalah seperti berikut :

//class ini akan menampilkan jumlah huruf yang ada pada
//suatu karakter.

class CountOfCharacter extends Component {
 constructor(props) {
   super(props);
 }

 render() {
   return (
       <Text style={styles.welcome}>
         //menampilkan jumlah huruf dari variabel props.text
         Count of character : {this.props.text.length}
       </Text>
   );
 }
}

Silahkan hapus baris komentar yang berawalan “//“.

Code di atas adalah salah satu contoh penggunaan props pada suatu component. Kita dapat memanggil class di atas dengan cara seperti berikut :

       <CountOfCharacter text=‘Text Saya' />

Pemanggilan tag tersebut akan mencetak tampilan “Count of character : 9”

Props digunakan untuk melempar parameter yang berasal dari luar class component/dari component yang memanggilnya. Props juga tidak mengizinkan modifikasi nilai props di dalam class component-nya dan pada teorinya penggunaan parameter memang tidak dirancang untuk dimanipulasi/diubah-ubah. Bagaimana jika alur aplikasi kita memerlukan data props untuk dimodifikasi? Anda dapat gunakan variabel lain atau gunakan “state”. Lalu bagaimana jika saya butuh variabel untuk mengelola informasi dalam suatu component? Anda juga dapat gunakan variabel lain atau gunakan “state”.

State

State bisa dibilang adalah variabel default yang dimiliki suatu component yang nilainya dapat diubah-ubah. Nilai pada state harus didefinisikan terlebih dahulu pada constructor suatu component. Berikut contoh penggunaan state:

Jika pada pemrograman C# atau Java sering ditemui pendefinisian variabel seperti berikut :

private string name;
private string address;

Pada react native mendefinisikan nilai tersebut di dalam state dengan cara seperti berikut :

constructor(props) {
   super(props);
   this.state = { name: ‘Sabit',address:'South Sumatera, Indonesia’ };
 }

Dengan ditanamkannya nilai this.state.name dan this.state.address, anda dapat menggunakan variabel tersebut di seluruh class component bersangkutan. Anda juga dapat merubah nilai dari state dengan cara seperti berikut :

this.setState({name:new_value}) // code ini akan merubah nilai this.state.name
this.setState({address:new_value}) // gunakan code ini untuk merubah this.state.address

Berikut adalah contoh aplikasi lengkap penggunaan state dan props :

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

export default class myfirstApp extends Component {
 constructor(props) {
   super(props);
   this.state = { text: '',text2:'Awesome' };
 }

 render() {
   let judul='React Native';
   return (
     <View style={styles.container}>
       <Text style={styles.welcome}>
         Welcome to {judul} {this.state.text2}!
       </Text>
       <TextInput
         style={{height: 40, margin: 15, padding: 10,
           borderColor: 'gray', borderWidth: 1}}
         onChangeText={(text) => this.setState({text})}
       />
       <CountOfCharacter text={this.state.text} />
     </View>
   );
 }
}

//class ini akan menampilkan jumlah huruf yang ada pada
//suatu karakter
class CountOfCharacter extends Component {
 constructor(props) {
   super(props);
 }

 render() {
   return (
         //akan menampilkan jumlah huruf dari variabel props.text
       <Text style={styles.welcome}>
         Count of character : {this.props.text.length}
       </Text>
   );
 }
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#F5FCFF',
 },
 welcome: {
   fontSize: 20,
   textAlign: 'center',
   margin: 10,
 },
 instructions: {
   textAlign: 'center',
   color: '#333333',
   marginBottom: 5,
 },
});

AppRegistry.registerComponent('myfirstApp', () => myfirstApp);

Itu adalah contoh aplikasi untuk melakukan penghitungan huruf yang telah diinput. Tampilan dari aplikasi adalah sebagai berikut :

Jika code anda sudah benar, maka akan tampil screen seperti gambar diatas.. Happy coding

Belajar React Native – ListView With Filter Header and Section Header | React Native

Melanjutkan tulisan sebelumnya, kali ini kita akan mencoba menambahkan control untuk melakukan filter pada listview yang telah dibuat seperti gambar berikut :

Sebelum membuat sebuah screen seperti tampilan diatas, kita terlebih dahulu akan membuat sebuah screen yang terdiri dari ListView dan fitur untuk melakukan filter :

Untuk menambahkan component seperti gambar di atas, tambahkan header pada listview yang kita miliki dengan menambahkan code berikut pada code ListView :

       renderHeader={() =>
           <View style={styles.listview_header}>
             <TextInput style={styles.input}
               placeholder="Search..."
               onChangeText={(text) => console.log('searching for ', text)}
             />
           </View>
         }

Code di atas memasukkan code TextInput pada bagian header listview dimana jika diketikkan suatu karakter pada textinput tersebut, maka secara otomatis data pada listview akan difilter berdasarkan karakter yang kita ketikkan. Kok setelah diketik datanya masih belum ter-filter? Emang belum kita buat.. Untuk membuat fitur yang dapat melakukan filter data sesuai dengan data yang dimasukkan pengguna lakukan modifikasi code anda seperti berikut :

const data_array=[‘Music', ‘Movie', ‘Sport', 'Entertainment',];
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

export default class SampleMenu extends Component {
 constructor(props) {
   super(props);
   //definition of listview datasource
   this.state = {
     dataSource: ds.cloneWithRows(data_array),
     filter_string:'',
   };
 }

Rubah code pada bagian constructor seperti code di atas. Apa yang kita lakukan pada perubahan tersebut?

1. Meletakkan data yang akan ditampilkan pada ListView di luar constructor/class. Kenapa ini dilakukan?

• Jika data array diletakkan di dalam constuctor, kita tidak dapat menggunakan data array untuk di filter.
• Antara data array dan dataSource harus dipisahkan sebab ketika proses filter berlangsung maka dataSource akan diperbaharui sesuai dengan data array yang sudah di filter.

1. Nilai ds kita lettakkan di luar constructor/class. Kenapa?

• Untuk memperbaharui nilai pada dataSource, kita akan menggunakan nilai ds. Jika diletakkan di constructor kita jadi tidak bisa menggunakan data ds tersebut.

Selain melakukan modifikasi code di atas, kita juga perlu menambahkan code yang akan mengeksekusi proses filter data ketika user memasukkan nilai untuk filter. Perbaharui nilai renderHeader anda seperti code berikut :

renderHeader={() =>
           <View style={styles.listview_header}>
             <TextInput style={styles.input} placeholder="Search..."
               onChangeText={(text) =>{
                 var rows = [];
                 for (var i=0; i < data_array.length; i++) {
                    var stateName = data_array[i].toLowerCase();
                    if(stateName.search(text.toLowerCase()) !== -1){
                      rows.push(data_array[i]);
                    }
                  }
                  this.setState({dataSource:ds.cloneWithRows(rows)});
               }}
             />
           </View>
         }

Pada code di atas terdapat penambahan pada fungsi “onChangeText”. Code yang kita tambahkan adalah code yang melakukan pengecekan masing-masing data terhadap keyword untuk filter data. Setelah mendapatkan kumpulan data yang sudah sesuai dengan keyword, maka nilai dataSource akan diperbaharui kembali dengan data yang sudah ada. Setelah menambahkan code tersebut aplikasi yang kita buat akan melakukan filter sesuai keyword yang dimasukkan.

Section Header

ListView menyediakan fitur untuk melakukan grouping pada tampilan ListView anda. Hal ini sering digunakan untuk ListView yang memiliki data cukup banyak. Kita akan membuat ListView dengan section header dengan tampilan akhir seperti berikut :

Halaman tersebut menyediakan sebuah ListView dengan Section Header dan fitur filter pada bagian atas ListView. Baiklah, pertama-tama kita harus merubah jenis data yang ada pada ListView. Lakukan perubahan pada variabel data_array yang sebelumnya telah dibuat menjadi seperti berikut :

 const data_array=[];
 data_array['Sport']=['Soccer','Moto GP','Others'];
 data_array['IT & Technology']=['IT','Technology','Science'];
 data_array['Entertainment']=['Music','Movie','Art'];
 data_array['Interest']=['Travel','Style','Fashion','Business'];
 data_array['News & Info']=['Politics','World','Phenomenon'];
 data_array['Health']=['Health','Food','Lifestyle'];

Pada data sebelumnya aplikasi hanya menggunakan data array biasa sedangkan untuk kasus membuat ListView dengan section header data harus di-grouping di masing-masing data. Setelah itu pada constructor anda lakukan perubahan data pada variabel “dataSource” :

     dataSource: ds.cloneWithRowsAndSections(data_array),

Pada code ListView tepatnya code renderSeparator, lakukan perubahan berikut :

renderSeparator={(sectionId, rowId) => <View key={sectionId+rowId} style={styles.separator_style} />}

Karena dilakukan perubahan pada struktur data_array, maka metode pada fitur filter harus kita modifikasi. Ganti code pada event “onChangeText” pada “renderHeader” menjadi seperti berikut :

                var rows = [];
                  for (var key in data_array) {
                    if (!rows[key]) {
                      rows[key] = [];
                    }

                    for (var i=0; i < data_array[key].length; i++) {
                       var stateName = data_array[key][i].toLowerCase();
                       if(stateName.search(text.toLowerCase()) !== -1){
                         rows[key].push(data_array[key][i]);
                       }
                     }
                     if(rows[key].length==0)
                       delete rows[key];
                  }

                  this.setState({dataSource:ds.cloneWithRowsAndSections(rows)});

Yang terakhir tambahkan code renderSectionHeader pada ListView anda seperti berikut :

         renderSectionHeader={(rowData,sectionId)=>
           <View style={styles.sectionHeader}>
             <Text style={styles.sectionHeaderText}>{sectionId}</Text>
           </View>
         }

Silahkan jalankan aplikasi, jika code yang anda masukkan sudah benar maka akan tampil halaman seperti gambar aplikasi yang diinginkan.