Kenapa Harus Belajar Javascript? Karena React Native menggunakan Javascript sebagai dasar pengembangan frameworknya.
1. Dasar-dasar JavaScript
๐น Variabel & Tipe Data
-
var
,let
,const
- String, Number, Boolean, Object, Array, Null, Undefined
๐น Operator
-
Aritmatika:
+
,-
,*
,/
,%
-
Logika:
&&
,||
,!
-
Perbandingan:
==
,===
,!=
,!==
๐น Struktur Kontrol
-
if
,else if
,else
switch
-
Loop:
for
,while
,for...of
๐น Fungsi
function tambah(a, b) {
return a + b;
}
๐น Object & Array
const user = { nama: "Budi", umur: 20 };
const buah = ["apel", "mangga", "jeruk"];
2. JavaScript ES6
๐น Let & Const
Digunakan untuk mendeklarasikan variabel. let
dapat diubah nilainya, sedangkan const
bersifat konstan dan tidak dapat diubah setelah diberi nilai.
let nama = "Andi";
const umur = 21;
๐น Arrow Function
Cara penulisan fungsi yang lebih ringkas dan modern dibanding function
biasa.
const kali = (a, b) => a * b;
๐น Template Literal
Template literal adalah cara baru untuk menggabungkan string dengan variabel menggunakan backtick (\
). Lebih mudah dibanding menggunakan operator +
.
const nama = "Sari";
console.log(`Halo, nama saya ${nama}`);
โก๏ธ Penjelasan: ${}
digunakan untuk menyisipkan variabel atau ekspresi langsung di dalam string.
๐น Destructuring
Destructuring adalah fitur ES6 untuk mengambil nilai dari array atau object secara langsung ke dalam variabel dengan sintaks yang lebih singkat.
const [a, b] = ["merah", "biru"];
const { nama, umur } = { nama: "Ani", umur: 22 };
โก๏ธ Penjelasan: Dengan destructuring, kita bisa langsung mengambil nilai nama
dan umur
dari object tanpa perlu menulis obj.nama
atau obj.umur
.
๐น Spread & Rest Operator
Digunakan untuk menyalin atau menggabungkan array/object.
const angka = [1, 2, 3];
const angkaBaru = [...angka, 4, 5];
๐น Class
Cara mendefinisikan blueprint object dengan property dan method.
class Mobil {
constructor(merk) {
this.merk = merk;
}
jalan() {
console.log(`${this.merk} berjalan`);
}
}
๐น Import & Export (Modularisasi)
Digunakan untuk memisahkan kode ke dalam beberapa file agar lebih rapi.
// file math.js
export const tambah = (a, b) => a + b;
// file app.js
import { tambah } from './math';
3. Aplikasi di React Native
๐น Contoh Kode React Native
import React from "react";
import { Text, View, Button } from "react-native";
const App = () => {
const [count, setCount] = React.useState(0);
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Jumlah klik: {count}</Text>
<Button title="Tambah" onPress={() => setCount(count + 1)} />
</View>
);
};
export default App;
๐น Penerapan ES6 di React Native
- useState dengan destructuring โ mengambil nilai state dan fungsi setState dengan sintaks singkat.
-
Arrow function โ digunakan pada event handler
onPress
. - Template literal โ menampilkan teks dinamis dengan mudah.
Top comments (0)