Hallo sahabat React pada pembahasan kali ini kita akan mencoba membuat aplikasi Portal berita yang tampilanya seperti Whatsapp

 

Untuk membuat aplikasi mobile dengan React native bagi temen-temen yang memiliki spek komputer terbatas tidak perlu hawatir dengan React native Expo, walaupun Ram kita cuma 2 GB DAN 4 GB , kita sudah bisa membuat aplikasi tanpa membuat  komputer ngehang.

Untuk membuat aplikasi dengan React native ada beberapa Tools dan aplikasi yang perlu kita siapkan.

 

Tools dan aplikasi yang Harus disiapkan:

1. Harus memiliki laptop atau Komputer
2. Harus memiliki aplikasi Visual studio code Sebagai text editor agar lebih mudah
3. harus sudah terinstall nodejs, untuk nodejs sendiri kami sarankan menggunakan versi 10.16.3 agar lebih stabil, cara install nodejs pada windows
4. install Expo, silahkan buka google play dan cari expo, penjelasan tentang expo adalah aplikasi yang di gunakan untuk menjalankan atau testing aplikasi yang kita buat sebelum kita build menjadi  apk

 

Jika Tools dan software yang di butuhkan sudah terinstall semua selanjutnya kita akan memulai langkah awal membuat projeknya .silahkan buka cmd dan jalankan perintah berikut:

Cara install expo cli di windows

npm i -g expo-cli@3.5.0

jika expo cli sudah terinstall selanjut nya kita akan membuat projek baru

“buka kembali cmd nya”

penjelasan dari perintah diatas :

C:\Users\admin>i:       => artinya kita masuk ke Directori I Yang ada di komputer kita itu berbeda beda ya, ada y C:\Users\asus>D:

I:\>mkdir recatnative  => mkdir adalah perintah untuk membuat folder di dalam drive I dengan nama folder yaitu reactnative

I:\reactnative>expo init cloningwa   => expo init cloningwa artinya kita akan membuat projek baru dengan nama cloningwa di dalam folder reactnative

Jika projek reactNativenya sudah kita buat, selanjutnya kita akan coba memanggil api news nya dari https://newsapi.org/s/indonesia-news-api . jika masing bingung cara ambilnya silahkan baca kembali artikel membuat portal berita dengan React js  ,   

untuk tampilan detail nya seperti gambar di bawah ini di url : https://newsapi.org/docs/endpoints/top-headlines

 

 

jika sudah memiliki key dari new api langkah selanjutnya kita akan coba install Native Base, Jika ada pertanyaan kenapa harus install native base kan kita sudah install react native, jika temen temen belajar web , di web ada yang namanya HTML , CSS dan bootstrap , kalo kita ibaratkan React Native saja itu di ibaratkan sebagai HTML dan CSS nya , jadi kalo kita mau buat elemen di dalam web atau di dalam aplikasi kita harus susah payah ngoding dan membutuhkan waktu yang lumayan lama,

 

Tapi dengan native base kita membuat aplikai jadi lebih cepat dan menghemat tenaga, native base kalo di dunia web itu mirip dengan boostrap ibarat mah kalo kata orang tinggal comot koding alias copas , untuk lebih detail nya tentang native base klik link ini y, native base

 

Kursus React Native

cara install native base

silahkan buka kembali terminal nya y , masukan perintah berikut

I:\reactnative\cloningwa>npm install native-base –save

perintah diatas kita install untuk menambahkan package dan memanggil modul dari native basenya

 

kemudian kita akan install recat native link

I:\reactnative\cloningwa>react-native link

react native link kita install untuk membuat link antar halaman agar bisa berfungsi dengan baik , kalo di web biasanya kita menggunakan tag <a href=””>

 

jika sudah silahkan cek file package.json apakah sama dengan yang saya install

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~36.0.0",
    "expo-font": "~8.0.0",
    "native-base": "^2.13.8",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-link": "^4.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "babel-preset-expo": "~8.0.0"
  },
  "private": true
}

untuk scripny seperti diatas y.

kemudian temen-temen di dalam folder cloningwa silahkan buat folder src detailnya lihat gambar di bawah y,

 

kemudian di dalam folder scr buat folder lagi dengan nama :

1. components

2. config

3. service

4. tabs

jika takut salah cek kembali gambar di atas y .