tarihinde Fatih Hayrioğlu

React ile kod yazmaya başladıktan sonra kullandığım editörde bazı eklemeler yaptım. Ben editör olarak Sublime Text kullanıyorum ve sizlere Sublime Text’te neler yaptığımı anlatacağım. Diğer editörler de benzer yoları izleyerek daha kullanışlı bir ortam oluşturabiliriz.

Renklendirme ve otomatik tamamlama

React ile yazdığımız kodları daha göze hoş ve renklendirilmiş olarak görmek ve otomatik tamamlama için ilk olarak Babel paketini yükledim. Bir kaç yerde sorun yaşadım ve çözümünü bulamadım. Bu eklentinin geliştiricisi uzun süredir geliştirmeyi durdurduğu için Js Custom paketini yükledim. Şu ana kadar bir sorununu görmedim. Öneririm.

React otomatik tamamlama için TypeScript React‘ı da öneriyorlar ama ben denemediğim için bu konuda birşey söyleyemiyeceğim. ES6 ototmaitk tamamlama paketi yeterli bence.

ESLint

Bir teknolojiye yeni girdiğinizde hata yapma oranınız daha fazla oluyor. Bu hataları her defasında tarayıcı konsolunda görmek zaman kaybına neden oluyor.

Bu sorunun çözümü: Linter kullanmak.

Sublime Text’te hata yakalama işini yapmak için ilk olarak Sublime Linter’ı kurmak gerekiyor. Daha önce bu konuyu yazmıştım. Sublime Text linting Daha sonra ESlint paketini kurup ayarlarını yapmak gerekiyor.

npm install babel-eslint eslint-config-airbnb eslint-plugin-jsx-a11y  eslint-plugin-react

Sonra uygulamanın an kalsöründe .eslintrc.json oluşturup, başlangıç olarak aşağıdaki bir içerik yazabilirsiniz.

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": ["react", "jsx-a11y", "import"]
}

Bir porojede birden fazla kişi çalışıyorsa bu hata düzeltme işini bu koda her giren kişinin yapması lazım. Eğer git kullanırsanız bu kolay. git ile gönderilen her kod öncesinde eslint kurallarını işletip hataları gösteren ve kodun yukarıya çıkmasını engelleyen bir yapı kurmak basit.

git precommit diye adlandırılan kodu yukarı gönderme öncesine aşağıdaki kodu eklemek yeterli.

  1. Projenizin olduğu yerde .git kalsörü olacaktır.
  2. .git/hooks kalsörüne geçin. pre-commit.sample adında bir dosya göreceksiniz.
  3. Bu dosyanın ismini pre-commit olarak değiştirin.
  4. İçindeki örnek kodları silin.
  5. https://gist.github.com/linhmtran168/2286aeafe747e78f53bf adresteki kodu içine kopyalayın.
  6. Son olarak chmod +x .git/hooks/pre-commit çalıştırın.
  7. Süper!

Hızlı yazım kolaylığı için snippet

Babel Snippets ve React ES6 Snippets paketlerini kurarak devamlı kullanılan react yapılarını kısayollar yardımıyla kullanabilirisiniz.

Kurulu bir projede çok ihtiyaç duymuyoruz ancak yeni proje oluştururken güzel işlevi var. connected komponenet, class yapısını üç karakter ile yazmak hız kazandırıyor.

Bunun dışında otomatik düzeltme için Prettier kullananlar da var ama ben henüz kurup denemedim.

VSCode kullananlar için https://flaviocopes.com/vscode-react-setup/ bu yazıyı öneririm.

Sağlıcakla kalın.

Kaynaklar

tarihinde Fatih Hayrioğlu

CSS Grid yazılarımıza devam ediyoruz. Css grid özellikleri yazımızda grid ögelerini yerleştirmenin birkaç yöntemi var demiştik, grid-template-area özelliği bu yöntemlerden biridir.

Bir önceki yazıda grid çizgi isimlendirmesi yardımıyla grid ögelerinin konumunu belirlemiştik. Bu makalede grid-area ile tanımladığımız grid alanlarını daha önce görülmemiş bir şekilde ASCII karakter dizilimiyle (görsel olarak) konumlandırmayı göreceğiz.

İlk olarak grid-area özelliğini öğrenelim.

grid-area özelliği

CSS grid ögesi özelliklerinden olan grid-area özelliği grid alanlarını konumlandırmak için kullanılır. Web sayfalarımızı oluştururken belli alanlara bölerek kodlarız. grid yapılarında bu alanları grid-area özelliğiyle belirler ve grid satır ve sütunları üzerine yerleştirmesini yaparız.

grid-area: satir-baslangici / kolon-baslangici / satir-sonu / kolon-sonu;

grid-area

Bir grid alanının, grid üzerindeki yerini dört nokta değeriyle konumlandırabiliyoruz. Bu tanımları grid çizgisini belirleyen rakamlar veya bir önceki yazımızda belirttiğimiz grid çizgi isimleriyle yapabiliriz. Bir yöntem daha vardır ki o da bu yazımızın konusu. grid-area özelliğine bizim belirleyeceğimiz bir isim tanımlamak ve sonra bu isimleri grid-template-area özelliğiyle ızgaramız üzerine yerleştirmek.

grid-area: ust-alan;

Bu isimlendirdiğimiz sayfa öğelerini daha sonra yerlerine oturtacağız.

header {
  grid-area: ust-alan;
}

aside {
  grid-area: sol-menu;
}

section {
  grid-area: icerik;
}

.banner-alani {
  grid-area: banner-alani;
}

footer {
  grid-area: alt-alan;
}

Sayfamızı oluşturan ögeleri / alanları isimlendirdikten sonra bu alanları kod yazarken kullanacağız.

grid-template-areas tanımı yaparken kodun görsel hali (sırası, boşluklar ve yeri) tarayıcının kodu yorumlamasında etkili oluyor. Görsel yapının tam oturması için özellik ve tanımın ayrı satırlarda tanımlanmak dah mantıklı.

Her bir grid alan ismi sayfadaki yerine göre kod blokunda yerleştirilir aralarında boşluk olur, her satır tırnaklarla belirtilir ve bir sonraki satır enter ile aşağı atılır.

grid-template-areas: 
  "ust-alan ust-alan ust-alan"
  "sol-menu icerik banner-alani"
  "alt-alan alt-alan alt-alan"

tanımıyla yerleşimimiz yapıyoruz. Kodumuzu uyumlu web öncelikli yaparsak.

grid-template-areas: 
  "ust-alan"
  "sol-menu"
  "icerik"
  "banner-alani"
  "alt-alan"

@media(max-width: 1024px) {
  grid-template-areas: 
    "ust-alan ust-alan ust-alan"
    "sol-menu icerik banner-alani"
    "alt-alan alt-alan alt-alan"
}

codepen örneklerinde masaüstü görünümünü görmek için zoom değerini 0.25x seçiniz.

Süper değil mi? Sihir gibi. Sayfa planlama sihirbazı.

Bu yapıyla farklı sayfa planlarını çok kolay bir şekilde kodlayabiliriz. Mesela alt-alan grid alanının birinci kolonu sol-menualanına üçüncü kolonunu da banner-alani‘na vermek için sadece iki değişiklik yapmamız yeterli.

grid-template-areas: 
  "ust-alan ust-alan ust-alan"
  "sol-menu icerik banner-alani"
  "sol-menu alt-alan banner-alani"

codepen örneklerinde masaüstü görünümünü görmek için zoom değerini 0.25x seçiniz.

Yapboz parçalarını yerleştirir gibi sayfamızı planlayabiliyoruz. Burada aklımızda olması gereken bir kuralı hatırlatmakta yarar var. Bu tanımlar kare veya dikdörtgen alanları tanımlamak için geçerlidir.

grid-template-areas

Yukarıdaki örnekler hep eşit kolonlu yapılar için verilmiş örnekler, gerçekte eşit olmayan kolonlar için boş alanlar tanımlamamız gerekir. Bu gibi boş alan tanımları için grid-template-areasözelliğinde boşluk gelen yerleri nokta (.) koyarak belirtiriz.

Bu özelliği başta tanımlarken görselliğin önemli olduğunu söylemiştik. Tek nokta kolon yapılarını eşit göstermediği için düzensiz görünebilir kolon genişliklerini eşitlemek için tek nokta yerine bitişik olarak kolon genişliği kadar (……) nokta koyabiliriz.

codepen örneklerinde masaüstü görünümünü görmek için zoom değerini 0.25x seçiniz.

Noktalar arasına boşluk koyarsak herbir nokta bir grid alanı anlamına gelir.

Bu özelliği anlamak için örnek kodlar üzerine değişiklik yaparak pekiştirin. Bu denemeler çok eğlenceli. :)

Grid’e devam edeceğiz.

Kalın sağlıcakla.

Serkan Bektaş’a teşekkürü unutmayalım.

Kaynaklar

tarihinde Fatih Hayrioğlu