DEV Community

sandatya widhi
sandatya widhi

Posted on

02. 📱 Pengenalan JavaScript & ES6 untuk React Native

#javascript #reactnative #beginners #tutorial

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;
}
Enter fullscreen mode Exit fullscreen mode

🔹 Object & Array 

const user = { nama: "Budi", umur: 20 };
const buah = ["apel", "mangga", "jeruk"];
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

🔹 Arrow Function

Cara penulisan fungsi yang lebih ringkas dan modern dibanding function biasa.

const kali = (a, b) => a * b;
Enter fullscreen mode Exit fullscreen mode

🔹 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}`);
Enter fullscreen mode Exit fullscreen mode

➡️ 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 };
Enter fullscreen mode Exit fullscreen mode

➡️ 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];
Enter fullscreen mode Exit fullscreen mode

🔹 Class

Cara mendefinisikan blueprint object dengan property dan method.

class Mobil {
  constructor(merk) {
    this.merk = merk;
  }
  jalan() {
    console.log(`${this.merk} berjalan`);
  }
}
Enter fullscreen mode Exit fullscreen mode

🔹 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';
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

🔹 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)