Tutorial ReactJS Bagi Pemula Part 2

Jika anda sebelumnya belum membaca tutorial Part 1 silahkan klik dahulu Tutorial ReactJS Bagi Pemula Part 1 , jika anda sudah membaca nya mari kita lanjutkan belajar react js.

Sekarang saya akan mengenal kan React ES6

ES6 singkatan ECMAScript 6.

ECMAScript telah dibuat untuk menstandarisasi JavaScript, and ES6 adalah versi ke 6 dari ECMAScript, dibuat pada tahun 2015, juga dikenal sebagai ECMAScript 2015.

---

Kenapa harus mempelajari ES6?

React menggunakan ES6, dan kamu harus familiar dengan skrip seperti:

• Classes
• Arrow Functions
• Variables (let, const, var)

Pertama kita pelajari bagaimana membuat class di react. dengan membuat class kita bisa membuat objek di dalam class tersebut. Contoh membuat objek mobil seperti coding di bawah ini :

class Car {
  constructor(name) {
    this.brand = name;
  }
}

mycar = new Car("Ford");

Lalu di dalam sebuah class kamu bisa membuat method. kita contoh kan membuat method “present”

class Car {
  constructor(name) {
    this.brand = name;
  }
  
  present() {
    return 'I have a ' + this.brand;
  }
}

mycar = new Car("Ford");
mycar.present();

Membuat Class Inheritance

untuk membuat class inheritance gunakan sintaks : extends

Contoh membuat class “model” akan menurunkan method dari class “Car”

class Car {
  constructor(name) {
    this.brand = name;
  }

  present() {
    return 'I have a ' + this.brand;
  }
}

class Model extends Car {
  constructor(name, mod) {
    super(name);
    this.model = mod;
  }  
  show() {
      return this.present() + ', it is a ' + this.model
  }
}
mycar = new Model("Ford", "Mustang");
mycar.show();

super() method mengacu pada parent class agar bisa menggunakan method dan properti yang ada di parent class.

Mengenal Arrow Functions

sebelumnya kita menulis fungsi seperti ini :

hello = function() {
  return "Hello World!";
}

dengan menggunakan Arrow Function

hello = () => {
  return "Hello World!";
}

menjadi lebih pendek penulisan koding nya, jika hanya 1 statement maka bisa langsung tanpa menggunakan kurung kurawal

hello = () => "Hello World!";

kalau ingin ditambahkan parameter, bisa di masukkan kedalam tanda kurung awal.

hello = (val) => "Hello " + val;

Jika hanya 1 parameter , tanda kurung nya bisa dihilangkan loh.

hello = val => "Hello " + val;