Javascript

18 Ağustos 2019

# Javascript, Ecmascript

Javascript ilk olarak 1995 yılında Netscape browser’a eklenmiştir.

Client tabanlı bir object-oriented programlama dilidir.  Ancak sunucu tarafında da javascript çalıştırılabilmektedir. Browser’ların yanı sıra başka uygulamalarda javascript’i kullanabilirler.

Livescript, javascript’in bir önceki adıdır. Mocha ‘da livescript’den önceki ismidir.

Ecma standartlar belirleyen içerisinde büyük ve orta ölçekli önemli firmalarında olduğu bir oluşum.  Ecma-262 ‘de Ecma tarafından yayınlanmış bir standart dokümanı. Bu doküman ilk olarak 1997 yılında yayınlanmıştır. Bu yazıyı yazdığım tarihte 10. sürümü yayınlanmış gözüküyor.

Ecma-262 standart dokümana uyan scripting dillere ecmascript diller deniliyor. Ecmascript ise dil tanımlarını içeriyor, yani ecmascript bir programlama dili değildir. Ecma-262 çoğu zaman Ecmascript Standartı olarakta lanse ediliyor.

Javascript Mozilla tarafından 1.8.5 sürümüne kadar geliştirilmeye devam etmiştir. ES5 ‘e yakın sürümüdür de diyebiliriz.

Javascript’de şu anda kullanılan standart ECMAScript(ES) standartıdır.

ES5, 2009 sonrası çıkmış modern browser’larca full desteklenmektedir.

2015 yılında yapılan bir değişiklikle ES6 ile birlikte resmi olarak artık sürüm isimleri yıllarına göre çağrılmaktadır. ES6 aslında EcmaScript 2015 ‘dir.

Kullanmış olduğunuz browser’ın bir javascript engine’i bulunmaktadır. Bu engine hangi ES standartlarını desteklediği de ve bunların tamamını kapsayıp kapsamadığı da önemlidir. Çünkü kodu işletecek engine olduğundan desteklemesi de önemlidir.

Browser’lar sürümler güncellendikçe yeni EcmaScript standartlarını da engine’lerine eklemektedir.

# Operators

1 + 2

1-2

3 * 2

12 / 12

12 % 12

2**3

# Special Numbers

Infinity , -Infinity , NaN (Not a Number) değerleri normal sayılar gibi değildirler.

Infinity – 1 -> Infinity

-Infinity -> -Infinity

Infinity + 1 -> Infinity

Infinity / Infinity -> NaN

Infinity % Infinity -> NaN

0 / 0 -> NaN

# String Values

Tek tırnak, çift tırnak, “ şeklindeki tırnakla string tanımı yapılabilir.

“gokhan kesici”

‘gokhan kesici’

`gokhan kesici`

Escaping karakterleri de stringler içerisinde kullanabilirsiniz.

“gokhan \nkesici”

# String Operations 

String’ler de bölme, çarpma veya çıkarma yapılamaz. Ancak toplama yani concatenate yapılabilir.

“gokhan”+”kesici” -> “gokhankesici”

“gokhan” – “kesici” -> NaN

“gokhan”*2 -> NaN

“gokhan”/”gokhan” -> NaN

# Variables in Strings

String içerisinde değişken kullanmak isterseniz “şeklinde string oluşturup ${degisken} şeklinde kullanabilirsiniz.

`4 bölü 2 eşittir ${4/2}`

`4 bölü 2 eşittir ${degisken1}`

# Unary operators

Sembollerle ifade edilmeyen keyword ‘lerle ifade edilen operatorlere denir.

typeof 2 -> number

typeof “gokhan” -> string

# Compression Operators, Boolean Values

2>1 -> true

2 >= 1 -> true

2<1 -> false

2 <= 1 false

2 == 2 -> true

NaN == NaN -> false

# Logical Operators

true && false -> false

true || false -> true

!true -> false

true ? 1:2 -> 1

false ? 1:2 -> 2

null || “gokhan” -> gokhan

“gokhan” || “kesici” –> gokhan

# Empty values

İki adet boş anlamında değer vardır. Biri null, diğer ise undefined.

undefined değeri tanımlanmamış anlamında iken, null ise değer boş olarak tanımlanmış demektir.

Bir değişken tanımı yapılıp bir değer atanmazsa bu otomatik olarak undefined’dır.

null obje tipindedir, undefined ise undefined tipindedir.

# Automatic Type Conversion

Javascript’de otomatik tip dönüşümleri otomatik de gerçekleşmektedir.

Örneğin bir string de çıkarma işlemi yapılamaz demiştik. Ancak otomatik tip dönüşümü olduysa yapılabilir.

8 * null –> null 0 gibi davranır.

“2” – 1 –> “2” sayı gibi davranır. Sonuç 1

“5” + 1 –> Sonuç 51. 1 değeri string gibi davranır.

false == 0 –> false 0 gibi davranır. Sonuç true.

null == undefined –> true döner.

null == 0 –> false döner tip dönüşümü yapılmaz.

# Scopes, Variables

Değişkenlerin görünürlüğünü kılan şeye scope denir.

JS’de iki çeşit scope vardır. Global ve local.

Fonksiyon içindeki değişkenler function(local) scope’dur. Ve fonksiyon dışından erişilemezler.

Fonksiyon dışında değişkenler global scope’dur. Her yerden erişilebilirler.

EsmaScript 2015 ile birlikte block scope adında yeni bir scope daha geldi. Block scope { } ‘u kapsar.

Değerleri tutmak için var, let, const kullanabiliriz.

var, EcmaScript 2015 öncesi de vardı ve var değişkeninin block scope’u bulunmaz. Yani { } bloğu içinde bir var değişkeni tanımlıysa buna blok dışından erişilebilir.

{ var marka = "mercedes";}
console.log(marka); //mercedes

let, EcmasScript 2015 ile birlikte gelen bir keyword. let keywordü block scope’a sahiptir. Block dışından erişilemez.

{let  marka = "mercedes";}
console.log(marka); //erişilemez

Fonksiyon içerisinde let ve var function scope ‘dur. Fonksiyon dışından erişilemezler.

Dongü içerisinde block scope işler.  blok içerisinde let li deklarasyona erişim sağlanamaz. var’a ise erişim sağlabilir.

var i = 2;
for (let i=0; i<1; i++){
    console.log(i); // 0
}
console.log(i); // 2

Deklare edilmemiş atama işlemleri global scope’dur.

function f() {i = 2;}
f();
console.log(i); //2

const, EcmaScript 2015 ile birlikte gelen bir keyword’dür. const’da let gibi block scope’dur.

const herhangi bir değer olmaksızın deklare edilemez. Örneğin aşağıdaki ifade yanlıştır.

const pi;
pi=3.14;

const deklare edilirken bir değerle deklare edilmelidir.

const pi = 3.14;

const değişkenin refere ettiği primitive değer değiştirilemez. Aşağıdaki ifade hata döndürür.

const pi = 3.14;
pi = 3.1415; // hata alırız

const değişkeni değeri bir dizi , obje ise, objenin özelliğindeki , dizinin eleman değerleri değiştirilebilir.  const değişkeni tekrardan tanımlanamaz.

const araba = {marka:"mercedes"};
araba.marka = "bmw";
console.log(araba.marka);
araba = {marka:"mercedes");

# Assigment Operators

let degisken1 =  100;
degisken1 += 2;
degisken1 -= 1;
degisken1 /= 1;
degisken1 *= 2;
degisken1 % = 2;
console.log(degisken1);

# Environment 

Javascript kodunun çalıştığı ortamdır. Örneğin browser bir ortamdır. Browser ile erişebileceğimiz fonksiyonlar, değişkenler vs. tanımlıdır.

# Envoriment Functions Calling

Çalıştığımız ortama bağlı olarak tanımlı fonksiyonları aşağıdaki gibi çağırabilirsiniz.

prompt("Adiniz Soyadiniz");

# console.log()

Browser’da veya node.js’de farketmeksizin javascript çalıştıran konsola bir şey yazdırmanın yöntemidir.

Bilindiği üzere browser’larda genellikle developer tools altında console mevcuttur.

# if/else statement

let number = Number(prompt("Sayi giriniz"));
if (!Number.isNaN(number)){
console.log("Sayinin karesi" + number * number );
}
else {console.log("lutfen sayi giriniz")}

# while loop

let a = 0;
while (a<3){
    console.log(a);
    a = a+1;
}

#do while loop

do while loop ‘un normal while loop’dan farkı en az bir kere çalışması.

let a = 0;
do {
    console.log(a);
} while (a > 1)

# for loops

for (let a=0; a < 3; a++){
    console.log(a)
}

# switch case

let num = prompt("Lütfen bir sayı giriniz");
switch (num) {
    case "1":
        console.log('kazandiniz');
        break;
    default:
        console.log('tekrar deneyiniz');
        break;
}

# Comment 

Javascript’de satır bazlı yorum satırı // ifadesinden sonra girilebilir./* */ arasına yazılan ifadeler ile de çok satırlı yorumlar yazılabilir.

/*
Gokhan Kesici
Example
 */
let sayi = 2; // ornek
console.log(sayi)

# Functions

const karesi = function (x) {
    return x*x;
}
console.log(karesi(3));

Ya da

function karesi(x) {
    return x*x;
}
console.log(karesi(3));

# Arrow Functions

Yukarıdaki iki gösterim haricinde üçüncü bir fonksiyon tanımlama yöntemi daha mevcuttur. function kelimesinin yerine => ifadesini kullandığımızı düşünebilirsiniz.

const karesi =  (x) => { return x*x;}
console.log(karesi(3));

Ya da aşağıdaki gibi direkt aşağıdaki gibi de kullanabiliriz.

const karesi = x => x * x;

# Factory Functions

Bir fonksiyon içerisinde kullanılan başka bir fonksiyonunun return değer olarak verildiği fonksiyonlardır.

function f(a) {
    return b => b * a;
}
x = f(2);
y= x(3)
console.log(y);

# Binding

Her değişkenin bir scope’u vardır. Fonksiyon ve blokların dışındaki değişkenler global scope, fonksiyon ve bloklar içindekiler local scope’dur.

let ve const ifadeleri bloklar içerisinde local ‘dir. var ise blok sonrasında da kalıcılığına devam eder.

let x = 1;
if (true){
    let a = 2;
    var b = 3;
    const c = 4;
    console.log(x+a+b+c); //çalışır.
}
console.log(x+b); // çalışır
console.log(x+a); // hata alır
console.log(x+c); // hata alır

# List Data Type

let mylist = [1,2,3];
console.log(mylist.length);
console.log(mylist[2-1]);

# Object Value

Objelere obje.ozellik seklinde ulaşabiliriz. Ya da obje[“ozellik”] seklinde ulasabiliriz. Obje içerisindeki bir key/value çiftini silebilir, yeni bir key/value çiftini ekleyebiliriz.

let araba = {
    marka : "BMW",
    model : "5.20",
    renk : "beyaz",
    isim : function () {
        return this.marka + " " + this.model;
    }
};
console.log(araba.marka); // ozellige erisim
console.log(araba["model"]); //ozellige erisim
console.log(araba.isim()); // behavior/metot erisimi
delete  araba.renk; // ozellik silme
araba.yil = "2015" // yeni ozellik 
console.log(araba);
Object.assign(araba,{model:"3.20", motor:"2.0"}); // yeni özellik ve güncelleme
console.log(araba);
console.log(Object.keys(araba)); // sadece key'ler
console.log(Object.values(araba)); // sadece value'ler

Mutability 

Sayilar, stringler, boolean değerleri immutable yani değiştirilemezler.

Objeler, listeler mutable tiplerdir.

# Array Loops

let myarray = [1,2,3,4]
for (let i = 0; i < myarray.length; i++) {
    let num = myarray[i];
    console.log(num);
}

Yukarıdaki döngüyü aşağıdaki gibi de yazabilirdik.

let myarray = [1,2,3,4]
for (let num of myarray) {
    console.log(num);
}

# Any Number Arguments

Fonksiyonların alabileceği argüman sayısını kısıtlamadan … ile çok fazla argüman almasını sağlayabiliriz.

function max(...sayilar){
    let sonuc = -Infinity;
    for(let sayi of sayilar){
        if(sayi > sonuc) sonuc= sayi;
    }
    return sonuc;
}
console.log(max(4,2,3,5,21,31,13,17));

… ‘yı include işlemi içinde kullanabiliriz.

let a = [1,2,3];
console.log([...a,4,5]);

# JSON

Json veri depolamak ve transferi için en çok tercih edilen formatlardan biri. Kendince kuralları mevcut. Bildiğimiz javascript’deki object’den biraz farklı.

Örneğin object’de key çift tırnaksızken json’da key değeri çift tırnak ile belirtilmeli. Mesela object’de metot kullanılabilir ken , json’da metot kullanılmaz. Dönüştürmek için bazı araçlara ihtiyaç duyabiliriz.

Javascript ‘de json formatına dönüştürmek için JSON.stringify , parse etmek için ise JSON.parse kullanabiliriz.

let araba = {
    marka : "mercedes",
    model : "a180",
    renk : "kırmızı" //metal kırmızısı
};
araba = JSON.stringify(araba);
console.log(araba);
console.log((JSON.parse(araba)['marka']));

# Class

Class, Ecmascript 2015 ile gelen bir keyword. Class’lar ile object tipinde yeni instance’lar oluşturabiliriz. Instance oluştururken new keyword ile ilgili class çağrılmalıdır.

class araba {
    constructor(marka) {
        this.marka = marka;
    }
     goster() {
        console.log(this.marka);
    }
}
a = new araba('Mercedes'); // yeni bir instance
a.goster();

Yukarıdaki örnekte fark etti iseniz goster metotu için function ifadesini kullanmadık. Class keyword’u ile bir class oluşturulduğunda function ifadesini kullanmayız.

constructor fonksiyonu ise obje oluşturulmak istediğinde otomatik çağrılan init fonksiyonumuz. Her object oriented dilde bu tarz yapılar mevcut.

this ifadesi ise instance’in kendisi anlamına gelmektedir. Instance dışında biri tarafından ilgili özelliğe erişilemez. Python’daki self gibi düşünebilirsiniz.

İlgili goster metotu sadece içeriden çağrılsın, obje tarafından çağrılmasın istiyorsanız ki bu da mümkün yanına static ifadesini getirmelisiniz. Class’ı direkt çağırabilirsiniz.

class araba {
    constructor(marka) {
        this.marka = marka;
    }
     static goster(x) {
        console.log(x.marka);
    }
}
var a = new araba('Mercedes');
araba.goster(a); // calisir
a.goster(); //calismaz, hata alirsiniz.

# new 

Yeni bir obje oluşturmak için kullanılır. Örneğin aşağıdaki iki şey farklıdır.

var a = "gokhan";
var b = new String("gokhan");

a değişkeni string tipindedir, b ise bir obje tipindedir. Obje bildiğiniz üzere yeni properties’ler alabilirler.  Yani gidip b.soyad = “kesici” şeklinde bir tanım yapılabilir.

# Prototype

Javascript’e objelere yeni property’leri eklenmesi için ve sonrasında diğer objelerinde bunu kullanmasını istiyorsak prototype kullanabiliriz. Ayrıca javascript enginler oluşturulan bu property ve metotları prototype ‘a bakarak bulurlar.

function f() {
    var a = 1;
    this.b = 2;
}
f.prototype.c = 3;
var i = new f();
var ii = new f();
console.log(i.a); //undefined
console.log(i.b); // 2
console.log(i.c); // 3
console.log(ii.c); //3
console.log(f.prototype)

Her fonskiyon prototype objesine sahiptir. Fonksiyon’dan üretilen  obje,instance’da __proto__  adlı bir attribute’e sahiptir. Bu attribute’de fonksiyonun prototype’ını işaret eder.

console.log(typeof f.prototype); //object
console.log(typeof i.prototype); //undefined
console.log(typeof i.__proto__); //object

Objelerin prototype’ına erişmek __proto__ yerine Object.getPrototypeOf(obj) kullanırız.

console.log(typeof Object.getPrototypeOf(i)); //object

# Inheritance, extends, super()

Başka bir class’dan miras almak için yani onun özelliklerini kendi classına dahil etmek , superclass oluşturmak için extends keywordünü kullanabiliriz.

class A {
       b = 10;
}
class B extends A {
        c = 15;
}
var a  = new B();
console.log(a.b + a.c)

Aşağıdaki örnekte ise B class’ı oluşturulduğunda A classı inherent edilecektir. super() burada önemlidir. Çünkü super() metodu ile a değerine erişebilirdik. Aksi durumda B’nin constructor’ı A’yı override edeceğinden a ‘ya erişemeyecektik.

class A {
    constructor() {
        this.a = 10;
    }
}
class B extends A {
    constructor() {
        super();
        this.b = 15;
    }
    goster(){
        console.log(this.a + this.b);
    }
}
var test =  new B();
test.goster();

# Getter / Setter

Obje tipindeki değişkenlerin değerlerini kontrollü bir şekilde çekmek ve yazmak için get/set keywordü ile tanımlı fonksiyonları kullanmak en güzel yöntemlerden biridir.

class araba {
    constructor(marka){
        this.marka = marka;
    }
    get model(){
        return this.marka;
    }
    set model(x){
        this.marka = x;
    }
}
a = new araba('mercedes');
console.log(a.marka); //get
a.model="bmw"; //set
console.log(a.marka); //get

# Strict Mode 

ES5 ile birlikte gelen bir özelliktir. use strict direktifi kullanılır. Kodun strict mode da çalışmasını sağlar.

Strict mode şunu yapar. Örneğin var, let, const gibi ifadeler kullanmadan bir değişken tanımladık. Bu değişken global scope olur. Deklare olmadığında hata fırlatmasını istiyorsak strict mode aktif edilir.

"use strict";
a = 2;
console.log(a); // hata alır.

Bunun yanı sıra bir değişkenin, fonksiyonun silinmesini , duplice paramtreler kullanılmasını, read-only property yazılmasına, get only property yazılmasına, silinmemesi gereken property’lerin silinmesi vs. gibi bir çok diğer kısıtlandırmaları da beraberinde getirir.

# Regex

Regex bir çok dilde kullanılan önemli bir araçtır ve string pattern’ler belirleyip bu patternleri text içerisinde bulmamıza yarar.  pattern’imizi // şeklinde belirleyip regex kabul eden fonksiyonlarda kullanabiliriz.

var mypattern = /gokhan/gi;
var cumle = "Merhaba ben Gokhan Kesici, gokhan Kesici";
var ara = cumle.search(mypattern);
var esles = cumle.matchAll(mypattern);
var testet = mypattern.test(cumle);
var bul = mypattern.exec(cumle);
console.log(ara); //12
console.log(testet); //true
console.log(bul[0]); //Gokhan
console.log(esles.next().value[0]); //Gokhan
console.log(esles.next().value[0]); //gokhan

# Hoisting

Bir çok dilde değişkenler, fonksiyonlar yukarıdan aşağıya doğru okunan kod yaklaşımındada önce deklare edilir sonra kullanılır.  Ancak javascript’de böyle bir zorunluluk yoktur. Buna yaklaşıma hoisting denir.

Örneğin aşağıdaki kod uygun bir koddur.

x=5;
f();
function f() {
    console.log("Hoisting works.")
}
var x;
console.log(x);

Ancak aşağıdaki kod uygun bir kod değildir. Çünkü y deklare edilip bir değer ataması yapılmıştır.

x=3;
console.log(x+y); //NaN
var x;
var y=2;

# Function Closure

Bir teknik bir yaklaşımdır.  Değişkenlerinizin , fonksiyonlarınızın durumunu korumak için kullanılır. İç içe fonksiyonlar kullanarak gerçekleştirebiliriz.

function Outer() {
    var i = 0;
    function Inner() {
        return i +=1;
    };
    return Inner;
}
var counter = Outer();
console.log(counter());
console.log(counter());
console.log(counter());

# Modules 

Javascript başta modüler değildi sonrasında modüler yapıyı sağlayan framework ve kütüphaneler çıktı. Ancak native olarak EcmaScript 2015 ile birlikte modüller geldi.

Bu yazıyı yazdığım tarih itibariyle popüler modern tarayıcılar EcmaScript 2015 modüllerini destekliyor. Malesef IE desteklemiyor.

Modül kullanımı için iki temel keywordümüz bulunuyor.  Biri import diğeri export.

export ifadesini hangi değişken, sınıf, fonksiyonların dışarıya sunulacağını belirlemek için kullanırız.

import ifadesini de nelerin içeriye dahil edileceği belirlemek için kullanırız.

//variables.js
var a = 2; // export edilmis
var b = 3; // export edilmemis, erisilemez
var c= function () {
    console.log("module1");
}; // export edilmis 
export {a,c}

//main.js
import {a,c} from './variables.js';
console.log(a);
c();

Yukarıdaki örnekte variables.js diye bir dosyamız ve içerisinde değişkenleri tanımladık. Sonrasında bunların main.js’mize import edip kullandık.

Şimdi browser’ımızda destekliyorsa main.js ‘mizi çalıştıracaktır. Type olarak module girmeyi unutmayalım yeter.

<script type="module" src="./main.js"></script>

Tabi bu daha yaygınlaşmış bir özellik değil.  Module kullanma ihtiyacınız olursa RequireJS gibi diğer araçları da kullanabilirsiniz.

# HTML DOM

Browser’lar Bir web sayfası yüklendiğinde html parse edilip sayfanın bir modeli oluşturur. Buna HTML Document Object Model (DOM) denir.

HTML DOM , html elementleri, özellikleri, metotları veya eventleri demektir.

Javascript, HTML DOM’a erişip sayfa yapısını , içeriğini değiştirebilir, yeni şeyler ekleyebilir, silebilir.

Örneğin test id ‘li element’in içeriğini değiştirelim.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="test">Merhaba</p>
<script>
    document.getElementById("test").innerHTML = "Merhaba Dunya";
</script>
</body>
</html>

# Browser Object Model  (BOM)

Browser objelerine de javascript ile erişebiliriz.  Onları yönetebiliriz.

Örneğin sayfanın yüklendiği pencerede alert oluşturalım.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    window.alert("Hosgeldiniz");
</script>
</body>
</html>

# Node.js , npm

Javascript ilk brwoser’lara gelmişti. JS dosyamız client’ın browser’ında çalışıyordu.

Node.js ile birlikte js ‘ler sunucu ortamında çalıştırılıp içerik kullanıcıya sunulabilir.

Node.js asenkron programlama mantığı ile çalışır. Bu sebeple bir istek bitmeden diğer istek gelebilir ve bu istekte karşılanır.

Node.js yükleyip yukarıda örneklerde verdiğimiz örnekleri js dosyalarını direkt çalıştırabilirsiniz.

Node.js ‘de moduler yapıyı desteklemektedir. JS dosyaları modüler olarak oluşturulabilir.

Node.js ile birlikte bir çok built-in module de gelir. Bunun yanı sıra başkalarının yazdığı modulleri de kullanabilirsiniz.

Npm bir paket yöneticisidir. Javascript paketlerini indirip projenizde kullanabilirsiniz.

# Ajax

Bir web sayfasını tekrar yüklemeden sunucuya tekrar tekrar istekler yapmak  ve sunucudan gelen yanıtı içeride işletmek için kullanırız.

Ajax bunu nasıl sağlar. Ajax bunu browser’larda XMLHttpRequest diye bir api var. Bu api ye erişip sunucuya istekler gönderebiliyoruz.

Örneğin Google Chrome’da Developer Tools / Network’den XHR altında Ajax istekleri görülebilir.

<!DOCTYPE html>
<html>
<body>
<div id="test">
    <button type="button" onclick="loadDoc()">Icerik degis</button>
</div>
<script>
    function loadDoc() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("test").innerHTML =
                    this.responseText;
            }
        };
        xhttp.open("GET", "test.html", true);
        xhttp.send();
    }
</script>
</body>
</html>

# HTML events

HTML elementlerinde browser’da sayfada bir tıklama, yüklenme, mouse hareketi gibi bir hareket/olay yaşandığında bir javascript kodu çalıştırabilir, çeşitli aksiyonlar aldırabiliriz.

Örneğin aşağıdaki butona tıklandığında loadDoc() fonksiyonu çalışacaktır.

<button type=”button” onclick=”loadDoc()”>Icerik degis</button>

# Jquery

Jquery bir javascript kütüphanesi ve özellikle javascript’de çok güzel animasyonlar yapabileceğiniz kullanımı basit olduğundan çok popüler.

Javascript’de yazabileceğiniz kodları çok daha basit halleriyle yazabilirsiniz.

# React 

React, Facebook tarafından geliştirilmiş javascript kütüphanesidir.

Bir MVC framework değildir. React’in odaklandığı konu View’dir.