Berbagai macam tutorial mengenai React Native sudah banyak tersebar di berbagai situs dan media online. Pada artikel kali ini, akan dibahas mengenai cara menginstall React Native di Mac dan Windows secara singkat dan jelas untuk memudahkan pengguna yang ingin mempelajari teknologi ini. Sebelum memulai, pastikan komputer yang digunakan memenuhi spesifikasi yang diperlukan untuk React Native.
Instalasi React Native pada Mac
Langkah pertama dalam menginstall React Native pada Mac adalah dengan menginstall Node.js dan Homebrew. Node.js adalah platform JavaScript yang memungkinkan pengembangan aplikasi di sisi server dan Homebrew adalah manajer paket open-source untuk MacOS.
Untuk menginstall Node.js, kunjungi https://nodejs.org/en/download/ dan download file installer Node.js yang sesuai dengan sistem operasi Mac yang digunakan. Setelah selesai mengunduh, instal Node.js dengan mengikuti petunjuk yang ada.
Setelah itu, install Homebrew dengan membuka Terminal dan mengetikkan baris perintah berikut:
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Setelah Homebrew selesai terinstall, ketikkan perintah berikut pada Terminal:
$ brew install watchman
Langkah selanjutnya adalah menginstall React Native CLI. CLI merupakan singkatan dari Command Line Interface atau antarmuka baris perintah. Ketikkan perintah berikut pada Terminal:
$ npm install -g react-native-cli
Setelah proses instalasi selesai, Anda sudah siap untuk membuat aplikasi React Native pada Mac Anda.
Instalasi React Native pada Windows
Menginstall React Native pada Windows sedikit lebih rumit dibandingkan pada Mac, namun masih cukup mudah diikuti jika langkah-langkahnya dipahami dan diikuti dengan benar. Pertama, pastikan bahwa Windows yang digunakan adalah Windows 7 SP1 ke atas.
Langkah pertama dalam menginstall React Native pada Windows adalah dengan menginstall Node.js. Kunjungi https://nodejs.org/en/download/ dan download file installer Node.js yang sesuai dengan sistem operasi Windows yang digunakan. Setelah selesai mengunduh, instal Node.js dengan mengikuti petunjuk yang ada.
Setelah Node.js terinstall, kunjungi halaman https://github.com/facebook/react-native/releases dan unduh file terbaru dengan format ZIP. Ekstrak file tersebut ke dalam direktori yang diinginkan, misalnya di C:\ReactNative\.
Buka Command Prompt sebagai Administrator dan masuk ke direktori React Native yang sudah diekstrak sebelumnya. Ketikkan perintah berikut:
cd C:\ReactNative\react-native-windows-master npm install npm run init npm run build
Setelah proses di atas selesai, Anda sudah siap untuk membuat aplikasi React Native pada Windows Anda.
Contoh Penggunaan React Native
Untuk membuat sebuah aplikasi React Native, buka Terminal atau Command Prompt dan ketikkan perintah berikut:
$ react-native init Nama_Aplikasi $ cd Nama_Aplikasi $ react-native run-ios #untuk aplikasi iOS atau $ react-native run-android #untuk aplikasi Android
Anda juga bisa membuat aplikasi React Native dengan menggunakan template dari situs-situs penyedia template React Native, seperti NativeBase (https://nativebase.io/), React Native Elements (https://react-native-elements.github.io/react-native-elements/) atau Native Starter Pro (https://strapmobile.com/native-starter-pro/).
Setelah membuat aplikasi dengan React Native, Anda bisa mulai mendesain UI (tampilan) dan mengatur logika bussines aplikasi sesuai kebutuhan Anda. Untuk UI, React Native sudah menyediakan berbagai macam komponen dan layout yang bisa Anda gunakan. Contohnya seperti komponen Text, View, Image, Button, TextInput, dan masih banyak lagi. Komponen-komponen tersebut bisa Anda kustomisasi sesuai kebutuhan aplikasi Anda.
Untuk contoh, di bawah ini adalah kode program untuk membuat aplikasi sederhana dengan React Native:
import React, Component from 'react';
import View, Text, StyleSheet from 'react-native';
export default class App extends Component
render()
return (
<View style=styles.container>
<Text style=styles.textStyle>Selamat Datang di PurbaPedia!</Text>
</View>
);
const styles = StyleSheet.create(
container:
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
,
textStyle:
fontSize: 24,
fontWeight: 'bold',
color: 'red',
,
);
Kode di atas adalah kode untuk membuat tampilan sederhana dengan text “Selamat Datang di PurbaPedia!” yang berwarna merah pada tengah layar. Kemudian, untuk menampilkan gambar di dalam aplikasi React Native, bisa disertakan komponen Image pada kode program dan file gambar yang ingin ditampilkan disimpan dalam folder yang sama dengan file JavaScript dari aplikasi tersebut. Berikut contoh kodenya:
import React, Component from 'react';
import View, Text, StyleSheet, Image from 'react-native';
export default class App extends Component
render()
return (
<View style=styles.container>
<Image
style=styles.logo
source=require('./logo.png')
/>
<Text style=styles.textStyle>Selamat Datang di PurbaPedia!</Text>
</View>
);
const styles = StyleSheet.create(
container:
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
,
textStyle:
fontSize: 24,
fontWeight: 'bold',
color: 'red',
,
logo:
width: 100,
height: 100,
marginBottom: 20,
,
);
Kode di atas menampilkan gambar dengan nama file logo.png pada direktori yang sama dengan file JavaScript dari aplikasi React Native. File gambar tersebut harus mempunyai ukuran yang sesuai dengan kebutuhan aplikasi. Selain itu juga bisa diatur tata letaknya menggunakan style pada komponen Image.
FAQ
1. Apa perbedaan antara React dengan React Native?
React adalah sebuah library JavaScript untuk membangun UI (User Interface) aplikasi web yang dikembangkan oleh Facebook. Sedangkan React Native adalah framework untuk mengembangkan aplikasi mobile menggunakan React dengan style yang sama dengan aplikasi native.
2. Apa saja jenis komponen yang tersedia di React Native?
React Native memiliki berbagai macam komponen yang bisa digunakan untuk membantu Anda dalam membangun UI aplikasi mobile. Beberapa di antaranya adalah Text, View, Image, Button, TextInput, ScrollView, FlatList, dan masih banyak lagi. Setiap komponen ini bisa dikustomisasi sesuai dengan kebutuhan aplikasi Anda.
Video Tutorial
Berikut ini video tutorial mengenai cara menginstall React Native pada Mac dan Windows:
