Merhaba arkadaşlar bugünkü konumuz React şu sıralar kendisi ile baya haşır neşir olduğum çok tatlı bir kütüphane. React kısaca bahsetmek gerekirse facebook tarafından bazı problemleri çözmek için yazılan bir kütüphanedir. Açık kaynak kodlu bir projedir. Javascriptin gücünü bir kere daha görüyorsunuz. React kendi sitesinde yazan tanıma göre "kullanıcı arayüzleri oluşturmak için bir JavaScript kütüphanesi" şeklindedir.
Facebook gerçek zamanlı veri akışını bu şekilde çözüme kavuşturmuştur. Real-time projelere çözüm nitelikli olan react çokta hızlı bir şekilde kullanıcıya sonuç gösterir. Sadece real-time çözüm değil bir web tasarımda tekrar eden elementleri(h1, br) bir class şeklinde yazarak tekrar tekrar yazmaktan kurtarır. Mesela bootstrap ile küçük kartlardan yaptınız. Bunu tasarım yaparken birkaç kere daha yazmanız gerekir ama bunu react ile class yazıp classı tekrar tekrar kullanarak daha az kod yazmış, karmaşıklığı önlemiş olursunuz. Bu arada React mvc yapısının v(View) kısmı ile ilgilenir.
React size tanımda saçma, belki biraz zor ve değişik birşey gibi görünebilir doğru sayılabilir çünkü banada zor geliyordu ecmascript 6 bilmeniz gerekir. Zor gibi görünsede öğrenmenizi kesinlikle tavsiye ederim. Bu konuda react, component, state, props gibi konularına girmek istemiyorum. Gözle görünür bir sonuç olarak proje nasıl oluşturacağız onu anlatacağım.
Gelelim kurulumuna gene bizi düşünüp react, react-dom felan kurmayın biz sizin yerinize kuralım der gibi bir oluşturucu yayınlamışlar. Bilgisayarınızda nodejs kurulu olması gerekir. Cmd açıp
Kod:
[COLOR="DeepSkyBlue"]npm install -g create-react-app[/COLOR]Yazarak kuruyoruz. Kurulum uzun sürebilir internetinize bağlı olarak. Şimdi ise bir react projesi oluşturalım. İlgili klasöre cmd gittikten sonra
Kod:
[COLOR="DeepSkyBlue"]create-react-app[COLOR="Red"] tht[/COLOR][/COLOR]Diyerek ilgili klasörde tht adında bir klasör oluşturup içine react ile ilgili dosyaları kuruyor npm paketleri otomatik olarak yüklüyor. Adamlar bizi düşünüp bunuda yapmış
. React projesi oluşturmak biraz zaman alabilir birkaç paket yüklüyor çünkü sabırlıca bekleyin.
Şimdi oluşturduğu tht klasörünün içine girelim cmd ile
Kod:
[COLOR="DeepSkyBlue"]cd tht[/COLOR]Şimdi start verelim bakalım nasıl görünüyor.
Kod:
[COLOR="DeepSkyBlue"]npm start[/COLOR]Varsayılan tarayıcınızda otomatik olarak açılması gerekir react projeniz eğer açılmaz ise http://localhost:3000 yazarak girebilirsiniz.
Şimdi projemizi bir ide veya editor yardımı ile açalım. Ben visual studio code kullanıyorum. Kısaca çalışma mantığını ve klasörüleri açıklamak gerekirse;
Şöyle bir klasör yapısı mevcuttur. Kodları ve ne işe yaradıklarını da anlatırsam konu uzun süreceği için klasörleri anlatıyorum ve mantığından kısaca bahsedip konuyu bitiriyorum.
node_modules: Npm paketlerinin bulunduğu klasördür burası bizi ilgilendirmez her nodejs, react, electron projelerinde bulunur.
public: içerisinde html dosyayı bulunduran klasördür.
src: React kodlarının bulunduğu klasördür.
package.json: Projenin adı, sürümü, kurulduğu npm paketleri vs bulunduran json dosyasıdır. Diğer Readme dosyası felan açıklamacağım.
Şimdi nasıl çalıştığına gelirsek public içindeki index.html dosyasının içine body kısmına bir div oluşturup bu dive id="root" vererek react componentleri yani elementleri bu alanda çalışır. Src klasörünün içinde app.js adında bir component oluşmuş mesela bunun içine girerseniz html, js karışık kodlar görürsünüz buna jsx deniyor. Javascriptin içinde html yazmaya bu app.js bir component yani bir evin odası gibi düşünün evin temeli src klasörünün içindeki index.js dosyasıdır. Burada index.js klasörünü açarsanız javascript bilenler az çok anlayacaktır.
ReactDOM.render(<App />, docu ment.getElementById('root'));
index.html klasöründeki divin içine oluşturduğum app componentini yerleştir diyor burada.
Arkadaşlar olabildiğince mantığını anlatmaya çalıştım. Tek tek kodları anlatmak isterdim ama konu uzayacak zor göründüğüne bakmayın çözemeyeceğiniz birşey yok sizin. Anlamadığınız veya kafanıza takılanı mutlaka sorun konu altına Eğer şöyle bir konu da açabilir misin gibi konu istekleriniz var ise belirtin javascript hakkında. Görüşmek üzere...
Son düzenleme:
