Cara Install React Native
React Native adalah salah satu teknologi untuk membuat aplikasi mobile yang sangat populer saat ini. React Native memungkinkan pengembang untuk membuat aplikasi yang dapat berjalan di Android maupun IOS sekaligus. Pengembangan aplikasi dengan React Native juga terbilang lebih mudah dan cepat karena memungkinkan untuk menggunakan kode yang sama untuk kedua platform.
Untuk memulai menggunakan React Native, pengembang perlu melakukan beberapa tahapan installasi terlebih dahulu. Berikut adalah beberapa langkah yang perlu diikuti untuk melakukan instalasi React Native di Windows dan MacOS.
Instalasi React Native di Windows
Berikut adalah langkah-langkah untuk menginstall React Native di Windows:
Persiapan
Sebelum melakukan installasi React Native, pastikan komputer telah memenuhi persyaratan sistem yang dibutuhkan untuk menjalankan React Native:
- Windows 7 atau yang lebih baru, 64-bit
- Node.js v10.13.0 atau yang lebih baru
- Python 2 versi 2.7 atau Microsoft Visual Studio dan C++ Build Tools
- JDK 8 atau yang lebih baru
Install Node.js
Node.js adalah platform yang digunakan untuk menjalankan JavaScript di luar browser. Sehingga, untuk menjalankan aplikasi React Native, Node.js harus diinstall terlebih dahulu. Berikut adalah langkah-langkah menginstall Node.js di Windows:
- Download file installer Node.js untuk Windows dari website resminya di https://nodejs.org/en/download/
- Pilih versi yang sesuai dengan sistem operasi
- Jalankan file installer yang telah didownload
- Pilih opsi “Run as Administrator”
- Pilih folder tempat untuk menginstall Node.js
- Klik Next dan Install
- Setelah selesai, cek apakah Node.js sudah terinstall dengan menggunakan perintah “node -v” di Terminal atau Command Prompt.
Install JDK
JDK (Java Development Kit) dibutuhkan saat menggunakan React Native karena Android SDK bergantung pada JDK. Berikut adalah cara menginstall JDK di Windows:
- Download JDK dari website Oracle di https://www.oracle.com/java/technologies/javase-downloads.html
- Pilih versi JDK sesuai dengan sistem operasi
- Jalankan file installer
- Pilih folder tempat untuk menginstall JDK
- Setelah selesai, cek apakah JDK sudah terinstall dengan menggunakan perintah “java -version” di Terminal atau Command Prompt.
Install Android Studio
Android Studio adalah Integrated Development Environment (IDE) resmi untuk pengembangan aplikasi Android. Untuk menginstall React Native di Windows, Android Studio harus diinstall terlebih dahulu karena React Native akan mengakses Android SDK yang terdapat di Android Studio. Berikut adalah cara menginstall Android Studio di Windows:
- Download file installer Android Studio dari website resminya di https://developer.android.com/studio
- Pilih versi yang sesuai dengan sistem operasi
- Jalankan file installer yang telah didownload
- Pilih opsi “Run as Administrator”
- Klik Next dan Install
- Setelah selesai, cek apakah SDK Manager sudah terinstall dengan menggunakan perintah “sdkmanager –version” di Terminal atau Command Prompt.
Set up Environment Variable
Setelah berhasil menginstall Node.js, JDK, dan Android Studio, selanjutnya adalah mempersiapkan lingkungan kerja atau environment variable. Berikut adalah langkah-langkahnya:
- Buka Control Panel > System and Security > System
- Pilih Advanced System Settings
- Pilih tab Advanced
- Klik tombol Environment Variables
- Tambahkan variabel path dengan nilai: C:\Program Files\nodejs\ (atau sesuaikan dengan tempat instalasi Node.js)
- Tambahkan variabel JAVA_HOME dengan nilai: C:\Program Files\Java\jdk1.8.0_261\ (atau sesuaikan dengan tempat instalasi JDK)
- Tambahkan variabel ANDROID_HOME dengan nilai: C:\Users\Nama_User\AppData\Local\Android\Sdk\ (atau sesuaikan dengan tempat instalasi Android SDK)
- Tambahkan variabel Path dengan nilai: %JAVA_HOME%\bin;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;
- Klik OK untuk menyimpan perubahan.
Install React Native Command Line Interface (CLI)
Setelah semua persiapan telah dilakukan, selanjutnya adalah menginstall React Native CLI. Berikut adalah langkah-langkahnya:
- Buka Command Prompt
- Jalankan perintah berikut:
- Tunggu hingga proses installasi selesai
- Setelah selesai, cek apakah React Native CLI sudah terinstall dengan menggunakan perintah “react-native –version”.
“`
npm install -g react-native-cli
“`
Buat Project React Native Pertama
Setelah berhasil menginstall React Native CLI, selanjutnya adalah membuat project React Native pertama. Berikut adalah langkah-langkahnya:
- Buka Command Prompt
- Buat folder baru dan masuk ke dalam folder tersebut dengan perintah:
- Jalankan perintah berikut untuk membuat project baru:
- Tunggu hingga proses installasi selesai. Hal ini memakan waktu beberapa menit.
- Jalankan perintah berikut untuk memulai aplikasi:
- Jalankan perintah berikut di tab Command Prompt yang berbeda untuk menjalankan aplikasi:
- Tunggu beberapa saat, dan aplikasi akan terbuka di emulator atau smartphone yang terhubung dengan komputer.
“`
mkdir projectName
cd projectName
“`
“`
react-native init projectNama
“`
“`
npx react-native start
“`
“`
npx react-native run-android
“`
Instalasi React Native di MacOS
Berikut adalah langkah-langkah untuk menginstall React Native di MacOS:
Persiapan
Sebelum melakukan installasi React Native, pastikan komputer telah memenuhi persyaratan sistem yang dibutuhkan untuk menjalankan React Native:
- macOS High Sierra atau yang lebih baru
- Node.js v10.13.0 atau yang lebih baru
- Python 2 versi 2.7 atau yang lebih baru (Jika belum terinstall)
- JDK 8 atau yang lebih baru
Install Homebrew
Homebrew adalah package manager untuk MacOS yang akan digunakan untuk menginstall Node.js. Berikut adalah langkah-langkah menginstall Homebrew:
- Buka Terminal
- Jalankan perintah berikut:
- Tunggu hingga proses installasi selesai.
“`
/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
“`
Install Node.js
Node.js adalah platform yang digunakan untuk menjalankan JavaScript di luar browser. Sehingga, untuk menjalankan aplikasi React Native, Node.js harus diinstall terlebih dahulu. Berikut adalah langkah-langkah menginstall Node.js di MacOS:
- Buka Terminal
- Jalankan perintah berikut:
- Tunggu hingga proses installasi selesai.
“`
brew install node
“`
Install Watchman
Watchman adalah tool untuk memantau perubahan pada file. Watchman sangat diperlukan saat mengembangkan aplikasi dengan React Native. Berikut adalah cara menginstall Watchman:
- Buka Terminal
- Jalankan perintah berikut:
- Tunggu hingga proses installasi selesai.
“`
brew install watchman
“`
Install JDK
JDK (Java Development Kit) dibutuhkan saat menggunakan React Native karena Android SDK bergantung pada JDK. Berikut adalah cara menginstall JDK di MacOS:
- Buka Terminal
- Jalankan perintah berikut:
- Tunggu hingga proses installasi selesai.
“`
brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8
“`
Install Android Studio
Android Studio adalah Integrated Development Environment (IDE) resmi untuk pengembangan aplikasi Android. Untuk menginstall React Native di MacOS, Android Studio harus diinstall terlebih dahulu karena React Native akan mengakses Android SDK yang terdapat di Android Studio. Berikut adalah cara menginstall Android Studio di MacOS:
- Download file installer Android Studio dari website resminya di https://developer.android.com/studio
- Pilih versi yang sesuai dengan sistem operasi
- Drag file installer ke folder Applications
- Buka Android Studio
- Pilih Configure > SDK Manager
- Pilih tab SDK Platforms dan centang kotak Show Package Details
- Pilih SDK Platform yang dapat diinstall
- Pilih tab SDK Tools dan centang kotak Show Package Details
- Pilih Android SDK Build-Tools, Android SDK Platform-Tools, dan Android SDK Tools
- Klik Apply dan OK
Install React Native Command Line Interface (CLI)
Setelah semua persiapan telah dilakukan, selanjutnya adalah menginstall React Native CLI. Berikut adalah langkah-langkahnya:
- Buka Terminal
- Jalankan perintah berikut:
- Tunggu hingga proses installasi selesai
- Setelah selesai, cek apakah React Native CLI sudah terinstall dengan menggunakan perintah “react-native –version”.
“`
npm install -g react-native-cli
“`
Buat Project React Native Pertama
Setelah berhasil menginstall React Native CLI, selanjutnya adalah membuat project React Native pertama. Berikut adalah langkah-langkahnya:
- Buka Terminal
- Buat folder baru dan masuk ke dalam folder tersebut dengan perintah:
- Jalankan perintah berikut untuk membuat project baru:
- Tunggu hingga proses installasi selesai. Hal ini memakan waktu beberapa menit.
- Jalankan perintah berikut untuk memulai aplikasi:
- Jalankan perintah berikut di tab Terminal yang berbeda untuk menjalankan aplikasi:
- Tunggu beberapa saat, dan aplikasi akan terbuka di emulator atau smartphone yang terhubung dengan komputer.
“`
mkdir projectName
cd projectName
“`
“`
react-native init projectNama
“`
“`
npx react-native start
“`
“`
npx react-native run-ios
“`
FAQ
1. Apa beda React Native dan React.js?
React Native dan React.js keduanya digunakan untuk pengembangan aplikasi web, namun memiliki perbedaan mendasar dalam hal platform yang digunakan. React.js digunakan untuk membuat aplikasi web yang berjalan di browser, sedangkan React Native digunakan untuk membuat aplikasi mobile yang berjalan di Android dan IOS.
React.js menggunakan HTML, sedangkan React Native menggunakan komponen UI yang disediakan oleh sistem operasi. Hal ini memungkinkan pengembang untuk membuat tampilan aplikasi mobile yang mirip dengan aplikasi native bawaan dari sistem operasi.
Untuk menggunakan React Native, pengembang juga perlu mengetahui syntax dasar React.js. Namun, pengembangan aplikasi dengan React Native jauh lebih mudah dan cepat karena dapat menggunakan kode yang sama untuk Android dan IOS.
2. Bisa ga menggunakan React Native di Windows 7?
React Native membutuhkan Node.js v10.13.0 atau yang lebih baru untuk dapat berjalan. Namun, Node.js tidak dapat diinstall di Windows 7 karena Node.js membutuhkan Windows 10 atau yang lebih baru.
Hal yang sama juga berlaku untuk Android Studio yang digunakan untuk mengakses Android SDK. Android Studio tidak dapat diinstall di Windows 7 karena membutuhkan Windows 8.1 atau yang lebih baru.
Jadi, untuk menggunakan React Native, disarankan untuk menggunakan sistem operasi yang lebih baru seperti Windows 10 atau MacOS High Sierra.
Berikut adalah persyaratan sistem minimal yang dibutuhkan untuk menjalankan React Native:
- Windows 10 64-bit atau MacOS High Sierra atau yang lebih baru
- Node.js v10.13.0 atau yang lebih baru
- Python 2 versi 2.7 atau Microsoft Visual Studio dan C++ Build Tools (hanya untuk Windows)
- JDK 8 atau yang lebih baru
Video Tutorial
Berikut adalah video tutorial singkat mengenai cara install React Native di Windows dan MacOS: