React'ta CSS modülleri ile stil çalışmalarına başlangıç

Bu ve sonraki derslerde, React bileşenlerini stilize etmek için modern ve etkili bir yaklaşım olan CSS modüllerinin kullanımını ele alacağız.

CSS modülleri bu yaklaşımda, sınıf adları ve animasyonların yerel kapsamda olduğu, derlenmiş ayrı CSS dosyalarıdır, bu da farklı bileşenlerden gelen sınıf adları arasında çakışmaları önler.

Başlangıç olarak, basit React uygulamamız buttons'ı oluşturup çalıştıralım. Bunun için test adında boş bir klasör oluşturalım, içine girelim ve terminale aşağıdaki komutları yazalım:

terminalnpx create-react-app buttons
cd buttons
npm start

React sürümünüz yeterince yeni ise, yani Create React App v2 ve üstünü destekliyorsa, ekstra bir ayar yapmanıza gerek yoktur, çünkü bu durumda CSS modülleri otomatik olarak desteklenecektir. Kontrol etmek için package.json dosyasına bakın, eğer react-scripts bağımlılığının sürümü 2.x.x veya üzeriyse, her şey yolundadır. Aksi takdirde React'inizi güncelleyin.

CSS modülleri yöntemiyle stilize edeceğimiz uygulamamız üç buton içerecek.

CSS dosyalarını şu kurala uygun şekilde adlandıracağız: [isim].module.css.

Şimdi src içinde components klasörünü oluşturalım ve içine butonlarımızın CSS stilleri için Buttons.module.css dosyasını ekleyelim:

Buttons.module.css.btn1 {
  background-color: orange;
  border: 2px solid brown;
  color: white;
}

.btn2 {
  background-color: red;
  border: 2px solid green;
  color: yellow;
}

.btn3 {
  background-color: brown;
  border: 2px solid yellowgreen;
  color: orange;
}

Ayrıca components klasöründe, React bileşeni için boş bir Buttons.js dosyası oluşturalım. Oluşturulmuş App.js dosyasını şimdilik dokunmayın, ona daha sonra döneceğiz!

Buttons.js dosyasına CSS stillerinin olduğu dosyayı mutlaka içe aktarın ve bu stilleri class özniteliği kullanarak her butona uygulayın:

Buttons.jsimport styles from "./Buttons.module.css";

const Buttons = () => (
  <>
    <button class={styles.btn1}>btn1</button>
    <button class={styles.btn2}>btn2</button>
    <button class={styles.btn3}>btn3</button>
  </>
);

export default Buttons;

Bu arada, stil nesnesini içe aktarırken styles kelimesini kullanmak zorunda değilsiniz, size uygun gelen bir isim verebilirsiniz.

Bir sonraki derste uygulamamızı tamamlayacağız.