DEV Community

sandatya widhi
sandatya widhi

Posted on

02. ๐Ÿ“ฑ Pengenalan JavaScript & ES6 untuk React Native

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)