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

Sayfa planlama sihirbazı grid-template-areas

CSS Izgara ile sihirbazlık yapıyoruz. grid-template-areas ve grid-area özelliklerini açıklıyoruz. Devamını oku

SVG ikonlarımıza gölge vermek

05 April 2019 tarihinde yayınlandı.