React / React ES6

React ES6

React ES6 kullanır ve bazı yeni özelliklere aşina olmalısınız

Classes

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

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

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
  }
}
const mycar = new Model("Ford", "Mustang");
mycar.show();

super() metodu, üst sınıfa (parent class) referans verir.
Yapıcı (constructor) metot içerisinde super() metodunu çağırarak, üst sınıfın yapıcı metodunu çağırır ve üst sınıfın özelliklerine ve metotlarına erişim sağlarız.

Arrow Functions

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

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

hello = val => "Hello " + val;

this Kullanımı

Normal fonksiyonlara kıyasla, arrow fonksiyonlarında `this` ifadesinin ele alınış biçimi de farklıdır.
Kısacası, arrow fonksiyonlarında `this` bağlamı (binding) oluşmaz.

Normal fonksiyonlarda `this` anahtar sözcüğü, fonksiyonu çağıran nesneyi (örneğin `window`, `document`, bir buton veya herhangi başka bir nesne) temsil ederdi.
Arrow fonksiyonlarında ise `this` anahtar sözcüğü, her zaman arrow fonksiyonunu tanımlayan nesneyi temsil eder.

Aradaki farkı anlamak için iki örneğe göz atalım.

Her iki örnekte de bir metot iki kez çağrılır: ilki sayfa yüklendiğinde, diğeri ise kullanıcı bir butona tıkladığında.
İlk örnekte normal bir fonksiyon, ikinci örnekte ise bir arrow fonksiyonu kullanılır.

Sonuçlar, ilk örneğin iki farklı nesne (`window` ve buton) döndürdüğünü, ikinci örneğin ise `Header` nesnesini iki kez döndürdüğünü göstermektedir.

Normal bir fonksiyonda this, fonksiyonu çağıran nesneyi temsil eder: [object HTMLButtonElement]

class Header {
  constructor() {
    this.color = "Red";
  }

//Regular function:
  changeColor = function() {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();

//The window object calls the function:
window.addEventListener("load", myheader.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

Oklu fonksiyon (arrow function) kullanıldığında, `this` —fonksiyonu kim çağırmış olursa olsun— Header nesnesini temsil eder: [object Object]

class Header {
  constructor() {
    this.color = "Red";
  }

//Arrow function:
  changeColor = () => {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();


//The window object calls the function:
window.addEventListener("load", myheader.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

Değişkenler

const x = 5.6;

const, oluşturulduktan sonra değeri asla değiştirilemeyen bir değişkendir.
const, blok kapsamına (block scope) sahiptir.
const anahtar sözcüğü biraz yanıltıcıdır.
Sabit bir değer tanımlamaz; bir değere yönelik sabit bir referans tanımlar.

Bu nedenle şunları yapamazsınız:
Sabit bir değere yeniden atama yapmak
Sabit bir diziye yeniden atama yapmak
Sabit bir nesneye yeniden atama yapmak

Ancak şunları yapabilirsiniz:
Sabit bir dizinin elemanlarını değiştirmek
Sabit bir nesnenin özelliklerini değiştirmek

map() in React

const fruitlist = ['apple', 'banana', 'cherry'];

function MyList() {
  return (
    <ul>
      {fruitlist.map(fruit => 
        <li key={fruit}>{fruit}</li>
      )}
    </ul>
  );
}

const users = [
  { id: 1, name: 'John', age: 30 },
  { id: 2, name: 'Jane', age: 25 },
  { id: 3, name: 'Bob', age: 35 }
];

function UserList() {
  return (
    <ul>
      {users.map(user => 
        <li key={user.id}>
          {user.name} is {user.age} years old
        </li>
      )}
    </ul>
  );
}

map() metodu üç parametre alır:

currentValue - İşlenmekte olan mevcut eleman
index - Mevcut elemanın indeksi (isteğe bağlı)
array - map metodunun üzerinde çağrıldığı dizi (isteğe bağlı)

const fruitlist = ['apple', 'banana', 'cherry'];

function App() {
  return (
    <ul>
      {fruitlist.map((fruit, index, array) => {
        return (
          <li key={fruit}>
            Name: {fruit}, Index: {index}, Array: {array}
          </li>
        );
      })}
    </ul>
  );
}

Dizileri Parçalara Ayırma (Destructuring)

const vehicles = ['mustang', 'f-150', 'expedition'];

// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];

const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;

const vehicles = ['mustang', 'f-150', 'expedition'];
const [car,, suv] = vehicles;

function dateInfo(dat) {
  const d = dat.getDate();
  const m = dat.getMonth() + 1;
  const y = dat.getFullYear();

  return [d, m, y];
}
const [date, month, year] = dateInfo(new Date());