• Tentang Kami
  • Portofolio
  • Paket Web
  • Promo
    • Hosting Terbaik Unlimited
  • Tutorial Website
  • GRATISAN
  • Lokasi
  • Artikel

data@sundakreatif.com

0878 231 791 22

Jasa Pembuatan WebsiteJasa Pembuatan WebsiteJasa Pembuatan Website
Menu
  • Tentang Kami
  • Portofolio
  • Paket Web
  • Promo
    • Hosting Terbaik Unlimited
  • Tutorial Website
  • GRATISAN
  • Lokasi
  • Artikel

Tutorial ReactJS Bagi Pemula Part 2

  • Home
  • Blog
  • Tutorial ReactJS Bagi Pemula Part 2

Tutorial ReactJS Bagi Pemula Part 2

Categoriestutorial website

Yudith Hentreisa

January 9, 2020

0 0

Share this post

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");
Coba Koding Sendiri

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();
Coba Koding Sendiri

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();
Coba Koding Sendiri >>

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!";
}
Coba Koding Sendiri

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

hello = () => "Hello World!";
Coba Koding Sendiri

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

hello = (val) => "Hello " + val;
Coba Koding Sendiri

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

hello = val => "Hello " + val;
Coba Koding Sendiri

Tags: belajar dasar react, belajar reactjs, react es6

Related Post

MAY 28, 2022

Konsep Javascript Yang Semua...

Konsep Javascript Yang Semua Programmer Harus Ketahui! – Ketahui konsep JavaScript...

00

MAY 19, 2022

Menggunakan If/Else di CSS

Menggunakan If/Else di CSS -Seperti yang kita ketahui, tidak ada pernyataan bersyarat...

00

MAY 18, 2022

CSS : Cara Menghilangkan...

Cara Menghilangkan Scrollbar di Browser – Ada banyak waktu ketika kita perlu...

00

MAY 15, 2022

6 Fitur JavaScript ES12

6 Fitur JavaScript ES12 -Kembali pada tahun 2015, ES6 yang revolusioner diperkenalkan...

00

JULY 31, 2021

Cara Cek File Exist dengan

Cara Cek File Exist dengan PHP – Sering kali Anda perlu memindahkan file atau...

00

JULY 12, 2021

Perbedaan PHP isset() vs....

Perbedaan PHP isset() vs. empty() vs. is_null() – Anda akan menggunakan variabel di...

00

Recent Posts

  • Jasa Input data ke google spreadsheet dari web php codeigniter atau laravel

    July 13, 2022
  • Cara Memasarkan Bisnis Kecil

    June 5, 2022
  • 4 Ekstensi Google Chrome yang Meningkatkan Pekerjaan Coding Saya

    June 3, 2022
  • Konsep Javascript Yang Semua Programmer Harus Ketahui!

    May 28, 2022
  • 6 Tips Mengembangkan Logika dalam Coding

    May 25, 2022
Sundakreatif.com merupakan Jasa pembuatan website yang sudah dimulai sejak tahun 2009 (Sebelumnya bernama hentreiza-web.com). Sudah berpengalaman membuat lebih dari 400+ website.Berkreasi untuk mewujudkan keinginan Anda dalam membangun website sesuai dengan kebutuhan Anda.

LIVE CHAT (Klik Gambar)


Hubungi Kami

Sundakreatif.com

Lokasi : Bandung / Cimahi
SMS/WA : +6287823179122
LINE : Hentreiza
EMAIL : HENTREIZA @ GMAIL.COM
Comodo SSL

© 2016 Jasa Pembuatan Website, All Rights Reserved.