Apa Itu React Native?

React Native adalah framework JavaScript untuk menulis aplikasi mobile yang mendekati native aplikasi untuk iOS dan Android. Basis React Native adalah React.js, library JavaScript Facebook untuk membangun antarmuka pengguna, tetapi alih-alih menargetkan browser, Facebook menargetkan platform seluler. Dengan kata lain: pengembang web sekarang dapat menulis aplikasi seluler yang terlihat dan terasa benar-benar "asli", semua dari kenyamanan perpustakaan JavaScript yang sudah kita kenal dan sukai. Plus, karena sebagian besar kode yang Anda tulis dapat dibagikan di antara platform, React Native membuatnya mudah untuk dikembangkan secara bersamaan untuk Android dan iOS.



Untuk membuat tampila UI (User Interface) di React Native menggunakan JSX. Jika kamu familiar dengan CSS maka kamu akan lebih cepat dengan mudah memahami React Native UI, karena tampilan React Native mirip dengan CSS hanya saja anotasi penulisannya menggunkan Camel Case.

Dukungan Komunitas 


Dari grafik stackoverflow di atas kita mendapati bahwa React Native menduduki Top 5 Survey kategori digunakan oleh developer profesional. Jadi jika kamu menggunakan React Native maka kamu bisa membuat 2 aplikasi cross platfom dengan hanya satu codebase.

Untuk dukungan komunitas React Native memiliki banyak sekali komunistas seperti di stackoverflo, npm, yarn dan lain sebagainya. Kemudian seperti Firebase, Cloud Messaging Google Maps, Apple Maps sangar di dukung di React Native dengan berlimpahnya library yang ada tersebar dan gratis.

Cara Install React Native 

Di Windows:

  • Unduh dan pasang JDK (v7 atau yang lebih baru)
  • Unduh dan instal Node
  • Unduh dan instal Android Studio
  • Buat variabel lingkungan dengan jalur Java SDK: Windows → Cari → Sistem → Pengaturan Sistem Lanjut → Variabel lingkungan → Baru
JAVA_HOME: C:\path\to\JavaSDK
  • Siapkan Android Studio
  • Buat proyek Android Studio kosong
  • Buat Perangkat Virtual Android: Kelola AVD → Buat
  • Boot Perangkat Virtual Android Anda
  • Buka command prompt, lompat ke bash, dan arahkan ke tempat Anda ingin proyek Anda taruh
  • Install React Native globally
npm install -g react-native-cli

  • Membuat project React Native baru

react-native init AwesomeProject 

  • cd project_kamu && react-native run-android 
Di Linux :

- Node
Ikuti instruksi instalasi untuk distribusi Linux Anda untuk menginstal Node 8.3 atau yang lebih baru.

- Java Development Kit
React Native membutuhkan versi 8 dari Java SE Development Kit (JDK). Anda dapat mengunduh dan menginstal OpenJDK dari AdoptOpenJDK atau paket sistem Anda. Anda juga dapat mengunduh dan menginstal Oracle JDK 8 jika diinginkan.

-  Instal Android Studio
Unduh dan instal Android Studio. Pilih pengaturan "Kustom" ketika diminta untuk memilih jenis instalasi. Pastikan kotak di sebelah semua berikut dicentang:

Kebutuhan
  • Android SDK
  • Android SDK Platform
  • Android Virtual Device
  • Kemudian klik "Next"
- Instal Android SDK
Android Studio menginstal Android SDK terbaru secara default. Namun, membangun aplikasi React Native dengan kode asli memerlukan Android 9 (Pie) SDK. SDK Android tambahan dapat diinstal melalui SDK Manager di Android Studio.

Manajer SDK dapat diakses dari layar "Selamat datang di Android Studio". Klik pada "Konfigurasi", lalu pilih "SDK Manager".


- Konfigurasikan variabel lingkungan ANDROID_HOME
Alat Bereaksi Asli memerlukan beberapa variabel lingkungan yang harus disiapkan untuk membangun aplikasi dengan kode asli.

Tambahkan baris berikut ke file konfigurasi $ HOME /.bash_profile atau $ HOME / .bashrc Anda:

export ANDROID_HOME = $ HOME / Android / Sdk
export PATH = $ PATH: $ ANDROID_HOME / emulator
export PATH = $ PATH: $ ANDROID_HOME / tools
export PATH = $ PATH: $ ANDROID_HOME / tools / bin
export PATH = $ PATH: $ ANDROID_HOME / platform-tools
- Membuat project baru
npx react-native init AwesomeProject
cd project && npx react-native run-android 

Di Mac OS: 

 Menginstal dependensi
Anda memerlukan Node, Watchman, antarmuka baris perintah React Native, JDK, dan Android Studio.

Meskipun Anda dapat menggunakan editor pilihan Anda untuk mengembangkan aplikasi Anda, Anda harus menginstal Android Studio untuk menyiapkan alat yang diperlukan untuk membangun aplikasi React Native Anda untuk Android.

Node & Watchman
Kami menyarankan untuk menginstal Node dan Watchman menggunakan Homebrew. Jalankan perintah berikut di Terminal setelah menginstal Homebrew:
Jika Anda sudah menginstal Node di sistem Anda, pastikan Node 8.3 atau yang lebih baru.

Watchman adalah alat oleh Facebook untuk menonton perubahan dalam sistem file. Sangat disarankan Anda menginstalnya untuk kinerja yang lebih baik.

Java Development Kit
Kami merekomendasikan menginstal JDK menggunakan Homebrew. Jalankan perintah berikut di Terminal setelah menginstal Homebrew:

brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8

Jika Anda sudah menginstal JDK pada sistem Anda, pastikan itu adalah JDK 8 atau yang lebih baru.

Lingkungan pengembangan Android
Menyiapkan lingkungan pengembangan Anda bisa agak membosankan jika Anda baru mengenal pengembangan Android. Jika Anda sudah terbiasa dengan pengembangan Android, ada beberapa hal yang perlu Anda konfigurasi. Dalam kedua kasus, harap pastikan untuk mengikuti beberapa langkah selanjutnya dengan hati-hati.

1. Instal Android Studio
Unduh dan instal Android Studio. Pilih pengaturan "Kustom" ketika diminta untuk memilih jenis instalasi. Pastikan kotak di sebelah semua berikut dicentang:


  • Android SDK
  • Platform Android SDK
  • Kinerja (Intel ® HAXM) (Lihat di sini untuk AMD)
  • Perangkat Virtual Android
  • Kemudian, klik "Next" untuk menginstal semua komponen ini.


Jika kotak centang berwarna abu-abu, Anda akan memiliki kesempatan untuk menginstal komponen ini nanti.

Setelah pengaturan selesai dan Anda disajikan dengan layar Selamat Datang, lanjutkan ke langkah berikutnya.

2. Instal Android SDK
Android Studio menginstal Android SDK terbaru secara default. Namun, membangun aplikasi React Native dengan kode asli memerlukan Android 9 (Pie) SDK. SDK Android tambahan dapat diinstal melalui SDK Manager di Android Studio.



Manajer SDK dapat diakses dari layar "Selamat datang di Android Studio". Klik pada "Konfigurasi", lalu pilih "SDK Manager".

3. Konfigurasikan variabel lingkungan ANDROID_HOME
Alat Bereaksi Asli memerlukan beberapa variabel lingkungan yang harus disiapkan untuk membangun aplikasi dengan kode asli.

Tambahkan baris berikut ke $HOME/.bash_profile or $HOME/.bashrc config file:
export ANDROID_HOME=$HOME/Library/Android/sdkexport PATH=$PATH:$ANDROID_HOME/emulatorexport PATH=$PATH:$ANDROID_HOME/toolsexport PATH=$PATH:$ANDROID_HOME/tools/binexport PATH=$PATH:$ANDROID_HOME/platform-tools

4. Membuat Aplikasi Baru Dan Running Aplikasi

  • npx react-native init AwesomeProject 
  • cd project && npx react-native run-android
IOS

  • Download Xcode
  • Instal : sudo gem install cocoapods
  • cd AwesomeProject
  • npx react-native run-ios
Untuk informasi lebih lengkap kamu bisa mengunjungi : https://reactnative.dev/ semoga tutorial dari konsepKoding.com dapat bermanfaat bagi kamu yang sedang mempelajari React Native.

Baca Juga :
#2 Tutorial React Native State Dan Props Serta Penjelasannya