Belajar React Native untuk Pertama Kali (Basic Hello World)

Belajar React Native untuk Pertama Kali (Basic Hello World)

Apa Sih React Native Itu ???

belajar react native

belajar react native

Sebelum kita belajar mengenai React Native, kita harus tau apa itu dan seperti apa React Native tersebut.

React Native adalah salah satu framework javascript yang kita gunakan untuk mengembangkan aplikasi mobile. Kita bisa mengunakan 1 developer mobile untuk membuat sebuah aplikasi mobile dalam 2 enviroment yang berbeda yaitu iOS dan android. Hal inilah yang membuat react native banyak diminati para mobile developer. Canggih banget kan.

Yang perlu diperhatikan pertama kali :

  1. Anda harus sudah install Node versi 4 atau dibawahnya (versi 5 ke atas belum compatible). Jika belum install Node, silahkan download Nodenya disini  lalu install.

    Install Node

    Install Node

  2. Install Expo di mobile kalian, Expo bisa di download melalui playstore. Aplikasi Expo ini berfungsi sebagai Live Preview hasil compile ReactJS anda di HP untuk melihat hasil / debugging. Anda bisa Download Expo disini.

    Expo playstore

    Expo playstore

 

Jika sudah install requirement di atas, kita lanjutkan ke Tutorial React Native pertama kali .

  1. Buka Direktori Khusus untuk belajar react native lewat terminal (cmd, powershell, cmder, dsb) .

    belajar react 1

    belajar react 1

  2. Install Command Line Utility dari React dengan cara ketik di terminal “npm install -g create-react-native-app” (tanpa petik) di direktori khusus kalian tadi dan tunggu hingga selesai download datanya.

    belajar react 2

    belajar react 2

  3. Buat project react baru dengan  cara ketik di terminal “create-react-native-app {{ Nama_folder }}” (tanpa petik) dan tunggu hingga prosesnya installnya sukses. Contoh : “create-react-native-app HelloWorld”.

    belajar react 3

    belajar react 3

  4. Kita buka folder project react baru yang kita buat tadi di terminal dengan ketik “cd {{ Nama_folder }}” (tanpa petik).

    belajar react 4

    belajar react 4

  5. Jika sudah di direktori project kita, ketik di terminal “npm start” untuk membuat development server dan QR Print Code yang bisa kita pakai untuk Live Preview/Debugging di Expo (android).

    belajar react 5

    belajar react 5

  6. Scan QR atau Akses lewat IP untuk mengakses servernya, perlu diketahui bahwa koneksi android kita harus satu koneksi dengan server react yang kita start tadi. Tadaa! Kalian berhasil belajar react native basic 😀 .

    belajar react 6

    belajar react 6

FAQ :

  1. Error: You are using npm version 5.0.3. Please use an npm version that is >= 3.0.0 and < 5.0.0. ? : Karena sudah kami katakan di atas bahwa create-native-project-app saat ini belum compatible untuk npm/node versi 5, masih compatible versi 4 kebawah.
  2. Coming Soon …

 

Untuk error waktu melakukan tutorial ini, akan kami jawab lewat komentar dan kami masukkan highlight FAQ untuk menghindari pertanyaan berulang.

Zick

Seorang programmer yang berusaha mencari kitab suci dan mengumpulkan 7 buah bola dragon ball dan menyelamatkan dunia programmer ~ Life is like a boat.

Related Posts
Comments ( 2 )
  1. henri
    July 6, 2018 at 7:40 am
    Reply

    keren (Y)

    • Zick
      July 6, 2018 at 7:48 am
      Reply

      oke mantap pak, selamat mencoba 😀

Leave a reply