• to-do app yazmak kolaydır, ama enterprise ölçekte birşey yazmaya başladığınızda her takımda her yiğidin yoğurt yiyişi farklı olduğundan beyninizin ırzına geçme potansiyeli vardır. kodu öyle mi organize edelim, yok efendim state tree şöyle olsun, 50 tane child componenta babadan oğula proplarla su taşıyalım, yok onu da alalım higher order componenta sokup çıkaralım derken derdimiz projeyi bitirmek değil trivial ve özünde coder otuzbiri olan bu tarz tartışmalar haline gelir. dom'a alt tarafı bir <h1> tagi basmak için component yazan, utanmadan bunun unit testini ve integrasyon testini yazan, hatta bunun icin pull request yapan, ve hatta bu pull requeste aynı gereksizlikte yorumlar bırakan dallamalara bakakalırsınız

    3 ayda 10 kişi ile bitirilebilecek bir iş aylar sürer ve bittiği zaman yaptığınız bütün istişarelerin de her gün değişen javascript paradigmaların yine gerisinde kaldığını ve tam bir vakit kaybı olduğunu farkedersiniz. olsundur, ekmek kapısıdır, tost mu yapıyoz amk diyebilirsiniz birşey diyemem.

    react sonun başlangıcıdır, react pişmanlıktır
  • yerine alternatif olarak backend dilleri veya frameworkleri önerilen kütüphane. sen reactjs'yi boşver dostum direkt kodlamayı bırak. bunu kullanmayın pure js yazın dese anlayacağım, jquery kraldır dese haklılık payı olabilir diyeceğim, salla javascripti sadece html bas geç dese yine hak vermeye çalışacağım ama reactjs kullanma django, laravel kullan diyor adam. bunu da uzun uzun anlatıyor. bir de utanmadan laravel başlığına atıp takip ışığımızı yakıyor. yine kafalar pırıl pırıl.
  • "allahım senin gücün sonsuz, şu bizim landing page'i canlıya alıver amin" diyerek canlıya alabiliyorsunuz ancak duanızın tutması için bir uzmanın banka hesabına makul miktarda para yatırmanız gerekiyor.
  • facebook, instagram, netflix, airbnb, twitter gibi projelerde kullanilan kisitlayici bir view library :)
  • neredeyse öğrenmeye başlayalı 3 hafta olmuş. şu an kendisiyle beraber basit bir e-ticaret sitesi yapmaya çalışıyorum. jsx olayını çoğu kişi sevmemiş ben gayet alıştım. hooks'lar functional component yazarken gayet kolaylık sağlıyor. bu arada projemde kullandığım basit bir kaç kütüphaneden bahsedeyim.
    reactstrap : bu kütüphane ile bootstrapin birçok özelliğini component olarak kullanıyorsunuz benim hoşuma gitti.

    toastify : bu kütüphane ile çok hoş alert mesajları verebiliyorsunuz. görsel açıdan gayet hoş bir yapısı var. her projede kullanılmalı bence.

    redux : react projenizdeki tüm stateleri tek bir çatı altından yönetmek için kullanılıyor. sadece react için değil tüm javascript projelerinde kullanılabilir. ayrıca tüm stateleri yönetmek için redux kullanılması tavsiye edilmiyor.(ben demiyorum redux'ın yaratıcısı bunu diyor:).)

    redux-thunk : ya kardeşim iyi güzel de ben bu redux üzerinde ki stateleri asenkron olarak güncellemek istiyorum dersen de redux-thunk kullanabilirsin. redux-thunk kullanma mantığını şöyle açıklayabiliriz: basit bir temel redux yapısı ile, yalnızca bir action dispatch'leyerek senkron güncellemeler yapabilirsiniz. redux middleware sayesinde store'un kabiliyetleri artar ve middleware olarak kullanılcak şey ise redux-thunk'dur. bu size asenkron güncellemeler yapmanıza izin verir.

    react-draggable : bu güzel kütüphane ile de componentlerinizi sürükle bırak hale getirebilirsiniz.
  • ssg = static site generation = içeriğinin dinamik olmadığı klasik .html dosyalarından oluşan sitelerdir. akmaz, kokmaz, kırılmaz, bozulmaz. ama gel gör ki güncellemek için dosyaya kod ekleyip çıkarmak gerekir. dinamik değildir. arama motorlarının en sevdiği siteler bunlardır.

    ssr = server side rendering = tüm html-css-js içeriğinin serverden bir programlama dili ile oluşturulup belli bir kalıptaki (templatedeki) sayfaya göre render edilmesidir. mesela movies.php/id=1 ile id'si 1 olan filme göre tüm sayfa oluşturulup kullanıcıya gönderilir. laravel, django gibi kütüphanelerin yazılış amacı buydu zaten.

    csr = client side rendering = backend tarafından gönderilen json verilerle sitenin kullanıcı tarafında tekrar tekrar render edilmesidir. siz sayfayı yenilemeden modüler şekilde defalarca değiştirmiş oluyorsunuz.

    react bir csr kütüphanesidir. backend tarafının işinin azaltılıp neredeyse veritabanı ile bağlanmayı ister, hatta graphql* kütüphanesi bile var bu iş için. react amaç olarak veritabanı sonrasındaki bilginin (json) saf olarak alınıp, client tarafında render edilmesini amaçlamaktadır. haliyle biraz zahmetli olabilir. kendi içinde artı ve eksileri bulunmaktadır. mesela eksisi zaman alması, çok fazla uğraştırması çünkü sayfa yenilenmeden verileri alıp yeniliyorsunuz. bu nedenle tüm server datasında kontrole sahip olmanız gerekebiliyor. hatta en zahmetli yerlerinden biri de bu veriyi yönetmektir, yani state management (redux vb...).

    çalışma mantığı şu sen react ile siteyi yazıp build ediyorsun ve react sana birkaç kb/mb bir dosya veriyor. sen de o dosyayı basit bir index.html içinde gömüp kullanıcılara sunuyorsun. kullanıcılar senin siteni ilk açtığında aslında tüm yapıyı indirmiş olur. mantıken site ilk açıldığında gereksiz şekilde fazladan dosya iniyor. zaten csr siteler ilk açıldığında bir tık ağır yüklenir, ama yüklendikten sonra gel keyfim gel. burada ilk inen dosya sorun olarak gelebilir ama bu dosyası sunabileceğin react sunucular var: netlify, vercel, amazon s3 vb... ve neredeyse ücretsiz.

    bir diğer artısı server tarafından gelen veri saf olduğu için çok kolay şekilde mobil uygulama ayağını da geliştirmeye başlıyorsunuz çünkü json veri dönecek olan server zaten hazır. bir de tüm sistem modüler olduğu için yazması zor ama yönetmesi daha kolay oluyor. hatta sistem büyüdükçe büyük bir artıya dönüşüyor.
    bir diğer artısı ise siz html-css-js kodlarını serverdan göndermiyorsunuz bu nedenle maliyet kazancı oluyor. sen düz veri gönderiyorsun client (ki artık güçlü makinalardan oluşuyorlar) bunlarla ilgileniyor. bu sayede "server" yani bizim para verdiğimiz kısımdaki yük azalıyor. zaten react hiçbir zaman performans artışı falan vadetmiyor.

    performans olarak ssg > ssr > (react, vue, angular)

    eksi olarak html-css-js kodları client tarafında oluştuğu için arama motorları yakalayamıyor, bunun için react değil de nextjs bakılabilir. tabi kendi içinde farklı yapıları var. nextjs içinde hem ssr hem de ssg var. akıllı kullanıldığında açıkçası nextjs kraldır!
  • kullanım bakımından değil, öğrenme bakımından "angular2" ile kıyaslayacak olursak kesinlikle react ile başlamanızı öneririm.

    öncelikle sürekli google'da "react vs angular" şeklinde aramalar yaparak "bu yeni web düzeninde neler oluyor?" diye soruşturduğunuza eminim. daha sonra muhakkak ki "why i should learn react?" ya da "why i should learn angular?" şeklinde de aratmışsınızdır. eğer ki "what i should learn after javascript" şeklinde arattıysanız eğer muhtemelen "angular" ve "react" arasında bir seçim yapmanızı öneren quora cevaplarınıza da denk gelmişsinizdir.

    internette bu kadar çok bilgi varken "angular" ile "react" arasındaki farkları saymak istemiyorum. artık her sitede bu konu hakkında bilgi var.

    buraya "abi internette herkes 'codecademy' sitesinden javascripti öğren, gerisi gelir dedi. baktım gelmiyor." diyenler için bu metni yazıyorum. eğer codecademy sitesinden öğrendiğiniz javascript ile işe kalkışıyorsanız angular size göre değil. aksine, sizi paklayacak ve bir şeyler yapabildiğinizi hissettirecek olan framework react'tır.

    öncelikle codecademy'den javascript öğreniniz. daha sonra yine codecademy'den react ile işe başlayınız. codecademy'de işleri öğrenirken göreceksiniz ki aslında react o kadar da zor bir şey değil. angular2 kadar zorlamıyor. öğrenebilmek için bir sistemi var, önce required ile başlayıp createclass'a geliyorsunuz işte. fakat angular2'nin öğrenme sistemi çok farklı, o kadar çok kavram var ki kendinizi boğuluyor gibi hissedebilirsiniz.

    codecademy'den aldığınız bilgi yetersiz gelebilir. ben codecademy'den sonra udemy'den bir ders satın aldım. adı the complete react web app developer course

    eğer ki ingilizceniz varsa, udemy'de bu dersi satın alabilirsiniz. aman diyeyim öyle hemen atılmayın, internette "udemy coupon" şeklinde aratıp kupon bulun. verdiğim paketi 15$'a satın alabilirsiniz, yüksek ücret ödemenize gerek yok. ha eğer ki "ben eğitimime para harcamak istemiyorum, ücretsiz olanı yok mu?" bunun derseniz malum ortamlarda kursun torrenti de var. ismini aratmanız yeterli.

    verdiğim adresteki adam konuyu bilal'e anlatır gibi anlatıyor ve inanın bana hiç zorlanmayacaksınız.

    edit: arkadaşlar önerdiğim bu dersin tarihi geçti. bu derste react'in 15. sürümü anlatılıyor ama react'in 16.3.0 sürümü çıktı. 16.2.0 ile 16.3.0 arasındaki farklar bile çok fazla. lütfen alternatif bir eğitime yönelin.
  • acaba bu ne zaman ölecek de yerine işte daha hızlısı daha performanslısı, öğrenmesi en kolayı diye başka bir js kütüphanesi pazarlanacak diye merakla beklediğim facebook ürünü.

    umariz ki uzun ömurlü olur tabi ama teknolojinin eli ayağı çok oynamaya başladı artık.

    yaşasın vanilla.js!
  • kendi kendinize takılırken "eheh negzel lan" moduna sokarken gerçek hayatta bir boka yaramayan bir diğer js oyuncağı. azalarak bitmesi muhtemel. şimdi birileri gelip dünya devleri bunu kullanıyor diye bik bik ötecek olsa da faydasından çok zararı olduğu gerçeği değişmiyor. gözümde hep startup oyuncağı olarak kalacak.
  • codecademy ile giriş aşamasında güzelce öğrenilebilecek javascript kütüphanesi.

    bir de benim gibi yeni başlayıp node.js falan nedir bilmeyenler kurulumu yabancılayabilir. kurulum için çok döküman gördüm fakat en iyi anlatan yine codecademy olmuş. şimdi vereceğim link 4 sayfadan oluşuyor. ama adım adım anlattığı için. zaten son sayfada kendileri de söylüyor:
    " çok şey yapmışız gibi görünüyor.bunun sebebi adım adım tarif ettiğimiz için.yoksa şu şekilde yapıp şu kodları yapıştırın desek ahan da şu kadar tutuyor " deyip toplam yarım sayfaya sığdırmışlar *.

    tabi bu bahsettiğim kurulum codecademy kursu bittikten sonra anlatılıyor. zaten orda etkileşimli bir şekilde yapıyorsunuz. önce kursu alın yani. ama eğer direk kurulum istiyorsanız:

    (bkz: https://www.codecademy.com/articles/react-setup-i)

    çok sonra gelen edit: yukarıdaki kurulum aşamaları kalktı gibi. create-react-app npm paketini kurduktan sonra tek komutla minimum gereksinimleri karşılayan bir react app sini hazır oluşturabilirsiniz. google'a sormanız yeterli. (bkz: https://github.com/facebook/create-react-app)
hesabın var mı? giriş yap