Yeni bir seriye hoş geldiniz. Bu seride sizi sıfırdan React js kütüphanesini proje yapabilecek seviyeye getirecek şekilde bir konu olacağını umuyorum. Direkt React başlamayı düşünüyorsanız bu hataya düşmeyip önce Javascript seviyenizi temel veya orta seviye kısaca proje yapabilecek seviyede olması lazım. Aşağıda da bahsedeceğim gibi ReactJs bir Javascript kütüphanesi yani temel işlerimi nasıl bilmiyorsak limit, türev gibi ileri matematik sorularını yapamazsak bu seriden de hiçbir şey anlamazsınız. Bu yüzden Javascript serime göz atmanızı öneririm 25 bölümden oluşan sıfırdan sizi proje yapma seviyesine getiren bir seri.
Sıfırdan İleriye Javascript Serisi
Javascript meselesini hallettiğimize göre gelelim ReactJs kütüphanesine bu nedir ve niye bu kadar popüler bir konuşalım.
Öncelikle Html-Css-Javascript serüvenlerinden sonra iş ilanları hep bir adet Javascript kütüphanesi bekler sizden. Bu React olabilir Vue olabilir Angular olabilir her biri farklı amaca hizmet ediyor. Bizim serimiz ise React ile olacaktır. Bu React dediğimiz kütüphane aslında 2011 yıllarında Facebook geliştiricileri uygulama performansını daha iyi seviyeye çıkarmak için yarattı. 2011'den bu yana kullanılıyor kısaca. Peki avantajlarına gelirsek ilk olarak her şeyi ama her şeyi parçalara bölüyoruz mesela navbar için ayrı bir dosya alınan api verileri için ayrı api çekmek için ayrı kısaca her şeyi parça parça bölerek yönetimini kolaylaştırıyor. Ek olarak birçok özelliği mevcut Boostrap gibi bir mui kütüphanesi, router dom daha say say bitmeyecek kütüphaneleri bunları da ilerleyen konularda göreceğiz.
Şimdi ilk olarak boş bir klasör oluşturup vs code atın. Klasör vs code üzerinde gördüğümüz anda hemen yukarıdaki seçeneklerde Terminal kısmı olacak. React için gerekli her şeyi bu terminalden indireceğiz ve bunu npm yani nodeJs ile yapacağız. Bu yüzden bilgisayarınızda NodeJs yok ise onu kuralım.
nodejs.org
Sitesinde direkt yeşil butonda indir seçeneği var ona tıklayıp klasik setup adımlarını yani next diyerek kurulum aşamalarını geçelim. En sonda NodeJs yükleme ekranı gelecek yükleme ekranı bittikten sonra NodeJs'in sisteme yüklenip yüklenmediğini kontrol etmek için cmd girip şu kodu yazalım.
Bu kodu yazdıktan sonra nodeJs sürümünüzü görüyor ise her şeye hazırız. Eğer error vs. aldıysanız tekrar kurun.
Nodejs ile de işimiz bittiğine göre ReactJs kuralım.
Vs code üzerinden terminale gelip şunu yazıyoruz
Vite dediğimiz şey aslında Live Server gibi bir şey. Canlı olarak yazdığımız kodları webte görüntüleyeceğiz. Bu kodu yazdıktan sonra bizden bir adet proje adı isteyecek. O adı kendiniz doldurup ilerledikten sonra bizden kütüphane seçmemizi isteyecek. Birçok Javascript kütüphanesini orada göreceksiniz. Yön tuşları ile React seçelim ve ilerledikten sonra bu sefer de bir varyan istiyor bunu Javascript varyantını seçin. Typescript şimdilik işimiz yok ama ileriki konularda öğreneceğiz. Bu süreye kadar her projede Javascript varyantını seçin. Daha sonra bize nasıl React dosyalarını indireceğimiz söyleyen kodlar verecektir.
Böylece projemizin dizinine giriş yaptık.
npm dosylarını dizine yüklüyoruz.
Böylece vite sunucsunu ayağa kaldırıyoruz.
Vite sunucusu ayağa kaldıktan sonra bize bir local adlı bir link verecek ctrl sağ clik yaparak sayfayı açalım.
Ve karşınızda bir React sayfası. Buraları birazdan düzelteceğiz. Şimdi gelelim vs code dosyalarına bir sürü klasör dosya var ne yapacağız der gibiyseniz sadece işlerimizi src klasöründe yapacağız.
Src klasörünü açtık hala çok şey var derseniz şimdi biraz sayfamızı toparlayalım. Her dosya açtığınızda bu anlatacağım şeyleri yapalım. Çünkü bizim karşılama sayfasıyla işimiz yok bu yüzden kodlarını sileceğiz.
İlk olarak app.css kodlarını tamamen silin, App.jsx bizim can damarımız. Burasını sadece sayfada göstermek istediğimiz dosyaları import ederek kullanacağız ama şimdilik aşağıdaki şekil olana kadar kodları silin.
index.css tüm kodlarını silin. Aşağıdaki görünümü elde edeceğiz.
Ek olarak main.jsx dosyasında <StrictMode> etiketlerini silin. Bunun sebebi console.log ifadelerini iki kez yazdırıyor.
Şimdi gelelim mantığına mantığı ne bunun. React bize diyor ki sen dosyalarında function kısmından return kısmına kadar Javascript kodlarını yaz. Return içinde ise Html kodlarını yaz diyor. Tamamen React dosya yapısı bundan ibaret başka hiçbir şey yok. Gelin bunu ispatlayayım si
Sıfırdan İleriye Javascript Serisi
Javascript meselesini hallettiğimize göre gelelim ReactJs kütüphanesine bu nedir ve niye bu kadar popüler bir konuşalım.
Öncelikle Html-Css-Javascript serüvenlerinden sonra iş ilanları hep bir adet Javascript kütüphanesi bekler sizden. Bu React olabilir Vue olabilir Angular olabilir her biri farklı amaca hizmet ediyor. Bizim serimiz ise React ile olacaktır. Bu React dediğimiz kütüphane aslında 2011 yıllarında Facebook geliştiricileri uygulama performansını daha iyi seviyeye çıkarmak için yarattı. 2011'den bu yana kullanılıyor kısaca. Peki avantajlarına gelirsek ilk olarak her şeyi ama her şeyi parçalara bölüyoruz mesela navbar için ayrı bir dosya alınan api verileri için ayrı api çekmek için ayrı kısaca her şeyi parça parça bölerek yönetimini kolaylaştırıyor. Ek olarak birçok özelliği mevcut Boostrap gibi bir mui kütüphanesi, router dom daha say say bitmeyecek kütüphaneleri bunları da ilerleyen konularda göreceğiz.
Şimdi ilk olarak boş bir klasör oluşturup vs code atın. Klasör vs code üzerinde gördüğümüz anda hemen yukarıdaki seçeneklerde Terminal kısmı olacak. React için gerekli her şeyi bu terminalden indireceğiz ve bunu npm yani nodeJs ile yapacağız. Bu yüzden bilgisayarınızda NodeJs yok ise onu kuralım.
Node.js — Run JavaScript Everywhere
Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.
nodejs.org
Sitesinde direkt yeşil butonda indir seçeneği var ona tıklayıp klasik setup adımlarını yani next diyerek kurulum aşamalarını geçelim. En sonda NodeJs yükleme ekranı gelecek yükleme ekranı bittikten sonra NodeJs'in sisteme yüklenip yüklenmediğini kontrol etmek için cmd girip şu kodu yazalım.
Kod:
node --versionBu kodu yazdıktan sonra nodeJs sürümünüzü görüyor ise her şeye hazırız. Eğer error vs. aldıysanız tekrar kurun.
Nodejs ile de işimiz bittiğine göre ReactJs kuralım.
Vs code üzerinden terminale gelip şunu yazıyoruz
Kod:
npm create vite@latestVite dediğimiz şey aslında Live Server gibi bir şey. Canlı olarak yazdığımız kodları webte görüntüleyeceğiz. Bu kodu yazdıktan sonra bizden bir adet proje adı isteyecek. O adı kendiniz doldurup ilerledikten sonra bizden kütüphane seçmemizi isteyecek. Birçok Javascript kütüphanesini orada göreceksiniz. Yön tuşları ile React seçelim ve ilerledikten sonra bu sefer de bir varyan istiyor bunu Javascript varyantını seçin. Typescript şimdilik işimiz yok ama ileriki konularda öğreneceğiz. Bu süreye kadar her projede Javascript varyantını seçin. Daha sonra bize nasıl React dosyalarını indireceğimiz söyleyen kodlar verecektir.
Kod:
cd + proje adıBöylece projemizin dizinine giriş yaptık.
Kod:
npm installnpm dosylarını dizine yüklüyoruz.
Kod:
npm run devBöylece vite sunucsunu ayağa kaldırıyoruz.
Vite sunucusu ayağa kaldıktan sonra bize bir local adlı bir link verecek ctrl sağ clik yaparak sayfayı açalım.
Ve karşınızda bir React sayfası. Buraları birazdan düzelteceğiz. Şimdi gelelim vs code dosyalarına bir sürü klasör dosya var ne yapacağız der gibiyseniz sadece işlerimizi src klasöründe yapacağız.
Src klasörünü açtık hala çok şey var derseniz şimdi biraz sayfamızı toparlayalım. Her dosya açtığınızda bu anlatacağım şeyleri yapalım. Çünkü bizim karşılama sayfasıyla işimiz yok bu yüzden kodlarını sileceğiz.
İlk olarak app.css kodlarını tamamen silin, App.jsx bizim can damarımız. Burasını sadece sayfada göstermek istediğimiz dosyaları import ederek kullanacağız ama şimdilik aşağıdaki şekil olana kadar kodları silin.
index.css tüm kodlarını silin. Aşağıdaki görünümü elde edeceğiz.
Ek olarak main.jsx dosyasında <StrictMode> etiketlerini silin. Bunun sebebi console.log ifadelerini iki kez yazdırıyor.
Şimdi gelelim mantığına mantığı ne bunun. React bize diyor ki sen dosyalarında function kısmından return kısmına kadar Javascript kodlarını yaz. Return içinde ise Html kodlarını yaz diyor. Tamamen React dosya yapısı bundan ibaret başka hiçbir şey yok. Gelin bunu ispatlayayım si
Olay bundan ibaret. Şöyle bir şey var Return bloğu içerisinde mutlaka bir div veya <> </> etiketleri olmalı yoksa html kısmı algılanmaz.
Giriş kısmı için bugünlük yeterli gibi duruyor. React yapısını bugün öğrendik biraz pratikle daha da oturacaktır. Başka bir konuda görüşmek üzere okuduğunuz için teşekkürler.
