Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / React Native

Persiapan Awal Belajar React Native Lengkap Untuk Pemula

Posting Komentar
Assalamualaikum, Pada kesempatan kali ini admin akan membagikan tutorial mengenai Persiapan awal untuk belajar react native lenkap untuk pemula. Tentunya pembahasan kali ini mengenai Belajar React Native kita akan mebahasnya secara lengkap, mulai dari penjelasan sampai dengan cara installasi react native menggunakan android studio atau text editor lainnya dengan panduan lengkap untuk pemula.

React Native ini sudah tidak asing lagi bagi sebagian besar programmer terutama bagi mereka yang sudah fokus kepada pengembangan aplikasi mobile. Pertanyaannya apakah belajar react native itu penting? Jawab nya tentu react native ini sangat penting untuk kita pelajari. Oke silahkan teman- teman simak pembahasan dibawah ini.

Apa itu React Native?

React native merupakan suatu framework javascript yang bertujuan untuk mengembangkan aplikasi mobile yang bersifat native baik untuk android maupun untuk IOS. Framework ini tentunya didasarkan pada React, library javascript yang dimiliki facebook yang digunakan untuk dapat membangun tatap muka (UI) pada browser mobile, namun perbedaan yang mendasar tentunya react native ini ditujuan untuk aplikai mobile. Dengan menggunakan framework ini, para web developer dapat membuat aplikasi mobile terasa menjadi native dari suatu bahasa pemrograman javascript.

Alasan untuk Belajar React Native

Tentunya kita mempelajari react native pasti ada alasan yang kuat mengenai hal itu, terutama bagi teman- teman yang fokus menjadi backed/web developer yang menginginkan membuat aplikasi mobile, untuk penjelasanya silahkan teman- teman simak point-point dibawah ini:
  • Menguasai React native akan lebih mudah jika teman- teman memahami bahasa pemrograman javascript.
  • React native mempunyai fitur Hot Reload yaitu mengubah kodingan tanpa kalian harus mengulang graddling aplikasi.
  • Dapat dipakai untuk aplikasi IOS ataupun android
  • Tentunya react native ini sudah mempunya komunitas yang luas.

Memahami javascript

salah satu kemampuan yang paling dasar untuk belajar React navite adalah bahasa pemrograman javascript. Seorang developer pastinya dapat memanfaatkan pengetahuan javascript untuk dapat membuat aplikasi berbasis framework yang dirilis oleh facebook ini.

Kalo teman- teman sudah paham mengenai dasar kompenen dari javascript ini tentunya teman- teman sudah siap untuk membangun aplikasi lebih efisien lagi.

Fitur Hot Realod 

Salah satu keunggulan dari react native adalah teman- teman dapat mengubah kodingan tampa kalian perlu untuk menjalankan ulang compilling mobile app. Dengan fitur tersebut tertunya dapat mempercepat dalam pembuatan aplikasi yang akan kita buat dengan fitur Hot Reload.

Dengan fitur ini, tentunya juga dapat meningkatkan kecepatan coding yang pastinya tidak perlu menunggu gradding lagi.

Jadi Aplikasi Mobile ataupun IOS

Banyak perusahaan yang tentunya mulai beralih ke teknologi react native ini, karena framework ini dapat membuat aplikasi IOS ataupun android. teman- teman cukup belajar sekali tetapi hasilnya dapat langsung diintegrasikan oleh bahasa javascript ke Android ataupun IOS.

Selain itu juga tentunya dengan fitur ini menjadi lebih efisien waktu, jadi teman- teman tidak perlu belajar dua kali seperti membuat aplikasi android dengan kotlin dan membuat aplikasi IOS dengan Swift.

Mempunyai Komunitas Yang Luas

 Dalam beberapa tahun ini, Tentunya react native memperoleh perhatian dari banyak web depeloper di lingkup dunia. Banyak sekali developer yang berkontribusi untuk membuat React Native semakin baik dari hari ke harinya dengan cara melakukan Pull request untuk dapat mengembangkan React Native ini, Serta membuat library untuk dapat memudahkan pekerjaan pada react native.

Dengan begitu tentunya teman- teman akan mudah untuk mempelajari react native di internet

Pada dasarnya framework react native ini memanglah berbasis native tidak seperti Phonegap ataupun cordova yang mempunyai basis web dan mobile. Untuk perkembangannya sendiri react native ini sangat pesat sehingga banyak perusahaan teknologi yang banyak menggunakan framework yang satu ini karena kemudahannya serta powerfullnya. Dibawah ini beberpa contoh  perusahaan apa saja yang menggunakan react native ini, silahkan teman- teman liat gambar dibawah ini:
Pada gambar diatas terdapat beberapa perusahaan raksasa yang menggunakan framework react native ini diantaranya facebook, instagram dan lain sebagainya. Jadi tidak ada salahnya untuk kita memulai dalam mempelajari react native ini.

Tetapi bahasa native ini sesungguhkan implementasi dari Android dan IOS tetap merupakan yang terbaik untuk skala project tertentu. Untuk selanjutnya kita akan belajar menginstal React Native pada windows.

Persiapan Installasi

Dari pedoman dokumentasi react native maka kita tentunya membutuhkan beberapa paket aplication installer. Lalu apa saja application installer itu? yaitu Nodejs, Python2, JDK8 dan package manager Chocolatey.

1. Install package manager Chocolatey 

Pertama - tama silahkan teman- teman buka Command Prompt (CMD) dengan menjalankan Run as Administator, coba perhatikan gambar dibawah ini:
Setelah itu silahkan teman- teman masukan perintah dibawah ini pada command prompt dan tunggu hingga proses selesai. 
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
Untuk hasil screenshot silahkan teman- teman perhatikan gambar dibawah ini:
Untuk tahapan selanjutnya kita akan menginstall Nodejs, React Native serta JDK8 dengan menggunakan package chocolatey.

2. Install Nodejs, Python2 serta JDK8 dengan menggunakan Chocolatey

Untuk installasi Python2, Nodejs dan JDK8 dengan menggunakan Chocolatey tentunya sangat mudah, yaitu dengan mengetikan suatu perintah dibawah ini pada command prompt.
Silahkan teman- teman ketik dan kemudian tekan tombol enter. 
choco install nodejs.install
Selanjutnya untuk menginstall python2 silahkan ketik dibawah ini kemudian tekan enter kembali 
choco install python2
Selanjutnya kita akan mengintall yarn, silahkan ketik perintah dibawah ini dan enter lagi. 
choco install yarn
Tapahan terakhir kita aka menginstall JDK8 dengan mengetikan perintah dibawah ini: 
Choco install jdk8
Jika pada saat teman- teman menginstal JDK8 error maka teman- teman dapat menginstall JDKnya secara manual saja serta jangan lupa untuk mengkonfigurasi Environment Variable

 3. Tahap Installasi React Native 

Untuk menginstall react native sendiri tentunya sangat mudah teman- teman tinggal mengetikan perintah dibawah ini pada command prompt. 
npm install –g react-native-cli
Setelah teman- teman selesai menginstall react native, selanjutnya kita akan menginstall Android studio, karena pada tutorial kali ini admin menggunakan Tools android studio sebagai editornya. Untuk yang menggunakan teks editor lain tentunya sama saja teman- teman dapat mengikutinya.

4. Install Android Studio

Pada tahapan ini admin asumsikan teman- teman sudah menginstall tools Android studio. namun jika temna- teman belum menginstallnya teman- teman dapat  menginstallnya terlebih dahulu.
info penting: Yang perlu teman- teman perhatikan adalah jangan lupa untuk mengkonfigurasi ANDORID_HOME environment variablenya
Caranya Silahkan teman- teman buka Contol panel -> System and Security -> System -> Advanced System Setting -> Environtment variabels -> New , Setelah itu silahkan inputkan lokasi path dari Andorid SDK, silahkan perhatikan gambar dibawah ini:
 Langkah selanjutnya kita akan menginstall android 6.0 (mashmallow) SDK.

5. Install Andorid 6.0 (Marsmallow) SDK

Pada tahapan ini silahkan teman- teman buka android studio yang sudah teman- teman install dan juga silahkan buka SDK manager. Selanjutnya silahkan install android 6.0 (Marshmallow) serta pastikan point- point dibawah ini sudah terinstall.
  • Google APIs
  • Android SDK Platform 23
  • Intel x86 atom_64 System image
  • Google APIs Intel x86 Atom_64 System image
Untuk installasinya silahkan teman- teman perhatikan gambar dibawah ini:
Setelah teman- teman berhasil menginstall android masmallow, selanjutnya silahkan teman- teman membuat virtual device dengan cara memilih AVD Manager -> Create Virtual device.
Setelah itu silahkan teman- teman pilih hardware yang akan digunakan, Contohnya admin menggunakan Nexus 5 kemudian teman- teman klik next.
Selanjutnya silahkan pilih system image Android 6.0 (marsmallow) kemudian pilih next.
Selanjutnya silahkan teman- teman ubah nama dari virtual devicenya sesuai dengan yang kita inginkan. Disini kita akan memberikan nama dengan React dan selanjutnya silahkan klik tombol finish.
Setelah semuanya telah selesai maka virtual device dengan nama React telah berhasil kita buat. Selanjutnya teman- teman silahkan jalankan virtual device tersebut.
Maka hasil dari virtual device akan tampil seperti gambar dibawah ini:
Selanjutnya setelah tahapan persiapan selesai kita akan lanjut untuk membuat project pertama dengan react native

6. Membuat Project Pertama React Native

Ini merupakan tahapan terakhir pada pembahasan kali ini yang tentunya ditunggu- tunggu oleh teman- teman yaitu membuat project pada React Native
  1. Pada Directory C:\Users\..\Document, Silahkan teman- teman buat folder dengan nama react_project
  2. Selanjutnya untuk dapat membuat project dalam folder tersebut, silahkan teman- teman ketik perintah dibawah ini pada command prompt.
 react-native init Projekpertama
Silahkan perhatikan gambar dibawah ini:
Silahkan teman- teman tunggu hingga proses membuat project selesai.

Penjelasan gambar diatas:
  1. Sebelumnya kita telah membuat folder dengan nama react_project. Pada baris tersebut bertujuan untuk mengarahkan directory kedalam folder tersebut.
  2. Perintah untuk membuat project dengan nama projectnya yaitu ProjekPertama.
 Setelah kalian selesai membuat project baru.. sekarang kalian arahkan ke directory ProjekPertama dengan menggunakan perintah dibawah ini: 

cd ProjekPertama
Setelah itu, untuk menjalankan projectnya silahkan ketikan perintah dibawah ini: 
react-native run-android
maka akan terlihat seperi gambar dibawah ini:
Tungga sampai proses selesai. Jika prosesnya sudah selesai pada Emulator Android yang telah teman- teman jalankan maka akan muncul tampilan seperti berikut ini:
Jika teman- teman juga tampil sperti gambar diatas, maka proses untuk menjalankan project telah selesai. Untuk dapat mengubah serta mengatur program silahkan teman- teman buka project tersebut dengan manggunakan text editor. Berikut ini merupakan tampilan project nya.
Berikut ini merupakan susunan koding project index.android.js yang ditampilkan pada emulator android
Nah mudah bukan, kita telah belajar mengenai installasi react pada android studio dan menggunakan android studio tersebut kita telah berhasil membuat project baru.

Mungkin sekian yang dapat admin sampaikan pada tutorial kali ini, mudah mudahan dapat memberikan manfaat serta pengetahuan bagi para pembacanya. Terimakasih telah berkunjung dan membaca artikel ini mengenai Persiapan Awal Belajar React Native Lengkap Untuk Pemula.

Semoga bermanfaat -- Salam Success :)

writer : Muhammad Yusuf (kodingindonesia)
content writer: Muhammad Rizal Supriadi