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);
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());
Objeleri Parçalama (Destructuring Objects)
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// Destructuring
let {firstName, lastName, age} = person;
//You can now access each variable separately:
document.getElementById("demo").innerHTML = firstName;
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// Destructuring
let {firstName} = person;
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// Destructuring
let {firstName, lastName, age, country = "Norway"} = person;
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
car: {
brand: 'Ford',
model: 'Mustang',
}
};
// Destructuring
let {firstName, car: { brand, model }} = person;
let message = `My name is ${firstName}, and I drive a ${brand} ${model}.`;
Props Destructuring
function Greeting({ name, age }) {
return <h1>Hello, {name}! You are {age} years old.</h1>;
}
function Greeting(props) {
return <h1>Hello, {props.name}! You are {props.age} years old.</h1>;
}
import { createRoot } from 'react-dom/client'
function Greeting({ name, age }) {
return <h1>Hello, {name}! You are {age} years old.</h1>;
}
createRoot(document.getElementById('root')).render(
<Greeting name="John" age={25} />
);
useState Hook Destructuring
import { createRoot, useState } from 'react-dom/client'
function Counter() {
// Destructuring the array returned by useState
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}
createRoot(document.getElementById('root')).render(
<Counter />
);
Spread Operator
const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];
//1, 2, 3, 4, 5, 6
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;
document.write("<p>" + one + "</p>");
document.write("<p>" + two + "</p>");
document.write("<p>" + rest + "</p>");
//1
//2
//3,4,5,6
const myVehicle = {
brand: 'Ford',
model: 'Mustang',
color: 'red'
}
const updateMyVehicle = {
type: 'car',
year: 2021,
color: 'yellow'
}
const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle};
//Object { brand: "Ford", model: "Mustang", color: "yellow", type: "car", year: 2021 }
