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

Januari 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

FEBRUARI 1, 2025

Membuat Peta Lokasi Sederhana...

Anda ingin Membuat Peta Lokasi Sederhana dengan PHP dan Leaflet JS? Saya akan menjelaskan...

00

NOVEMBER 20, 2024

Tutorial PHP dan MySQL...

Tutorial PHP dan MySQL Membuat Aplikasi CRUD – Ingin belajar membuat aplikasi CRUD...

00

JULI 22, 2024

Cara Membuat Custom Plugin...

Cara Membuat Custom Plugin WordPress Sendiri – Dalam tutorial ini, kita akan...

00

JULI 18, 2024

Cara Membuat Log Aktivitas di...

Cara Membuat Log Aktivitas di Aplikasi Web Menggunakan PHP – Dalam tutorial ini,...

00

FEBRUARI 20, 2024

Cara Bikin QrCode Otomatis...

Cara Bikin QrCode Otomatis Pake Laravel 8! – Hai, kawan-kawan kode! Jadi, pernahkah...

00

JANUARI 8, 2024

5 Langkah Mudah Buat Website...

5 Langkah Mudah Buat Website Kamu Nongkrong di Halaman 1 Google! – Heya, Sobat...

00

Recent Posts

  • 120+ ChatGPT Prompts for Content Creators [Free PDF Download]

    Mei 7, 2025
  • Download Source Code Laravel CRUD Builder Otomatis

    April 17, 2025
  • Reddit Stock (RDDT): What Investors Need to Know Ahead of the Next Earnings Report

    Februari 13, 2025
  • Joann Stores Closing: Crafting and Communities Throughout the United States

    Februari 13, 2025
  • Download Source Code File Manager – Host dan Share File

    Februari 4, 2025
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.