React Native'de Styled Components


Görsel Referansı


Merhabalar, bugün sizlere Frontend geliştiricilerin sıkça kullandığı bir yapı olan Styled Components’ten ve sağladığı avantajlardan bahsedeceğim. Dilerim okurken keyif alırsınız. Hadi başlayalım!


Styled Components Nedir?


Styled Components; Javascript dosyalarınız içerisinde component'lerinize stil vermek için CSS kodu yazmanıza olanak sağlayan bir kütüphanedir.

Styled Components’in Sağladığı Avantajlar Nelerdir?


1) Component'lerin Daha Okunabilir Olmasını Sağlar


Bir component'e stil vermek istediğimizde inline-style dediğimiz, component’i kullandığımız yerde stil verirsek bu ilgili yerde kod kalabalığına yol açacak ve kodun okunmasını zorlaştıracaktır. Styled Components sayesinde component'e vermek istediğimiz stilleri başka bir yerde CSS ile yazarak kodun okunabilirliğini artırabiliriz. Tek yapmamız gereken stil vereceğimiz component'ten inject edilmiş yeni bir styled component yaratmak.

Aşağıda iyi ve kötü örnek olmak üzere 2 ayrı örneği görebilirsiniz.


İyi örnek:

import {SafeAreaView, View, Text} from 'react-native';
import styled from 'styled-components';

const StyledView = styled(View);
  background-color: orange;

const App = () => {
  return (
    <SafeAreaView>
      <StyledView>
        <Text>Styled Components</Text>
      </StyledView>
    </SafeAreaView>
  );
};

export default App;

Kötü örnek:

import {SafeAreaView, View, Text} from 'react-native';

const App = () => {
  return (
    <SafeAreaView>
      <View style={{backgroundColor:'orange'}}>
        <Text>Styled Components</Text>
      </StyledView>
    </SafeAreaView>
  );
};

export default App;

2) CSS’in Daha Kolay Silinmesini Sağlar


Styled Components’te stil verilmiş her component başka bir component’e bağlı olduğu için stil verdiğiniz component’in hangi component’e bağlı olduğunu biliyor olacaksınız ve o stillendirmeye ihtiyaç duymuyorsanız neyi sileceğinizi bilmek sizin için daha kolay olacaktır. Ayrıca stil verdiğiniz component’i silmek istediğinizde onu inject ettiğiniz component değil sadece stillendirilmiş component ve onun içine yazdığınız CSS’ler silinecektir.


3) Tekrar Kullanım Kolaylığı Sağlar