Turkhackteam.net/org - Turkish Hacking & Security Platform  
Geri git   Turkhackteam.net/org - Turkish Hacking & Security Platform >
Programlama
> Javascript > React

React içinde css yazalım.(Styled-Components)

React

Yeni Konu aç Cevapla
 
Seçenekler
Alt 12-09-2018 23:40   #1
  • Teğmen
  • Üye Bilgileri
Üyelik tarihi
03/2017
Mesajlar
Konular


  
React içinde css yazalım.(Styled-Components)



Merhabalar hepinize, bu konumda css yazmanın bir başka yönetimi söyleyeceğim. React yazanlar bilir, jsx yapısı sayesinde javascript içinde html yazıyoruz.(Sırf bu jsx yüzünden react sevmeyen var neymiş efenim js içinde html yazılırmıymış). Al sana şimdide css yazacağız gelişen teknoloji insanlara kolaylık sağlıyor ama bazıları hala geri kafada.

Bir butonu gerekirse 10 kere kopyala yapıştır yapar ama genede kullanmaz yeni teknolojileri neyse. Styled-Components adında bir modülümüz mevcut react-native için de uyumlu olduğu yazıyor kendi sitesinde ama ben bugün react için kullanacağım. Alıştığınızda eminim bırakamayacaksınız. Başlayalım.

Kod:
npm i --save styled-components
diyerek projemize dependencies olarak kuralım. Sonra projemize dahil edelim ben create-react-app ile hızlıca bir proje oluşturdum. Sizde öyle yapıp test edebilirsiniz.

Kod:
import styled from 'styled-components';
Evet import ettik şimdi kullanmaya başlayalım. Kullanımı çok basit class üzerinde bir sabit değişken oluşturup kullanıyorsunuz bir örnek gösterelim hemen.

Kod:
const Title = styled.h1`
  color: blue;
`;
Açıklayalım isterseniz burada Title adında bir değişken oluşturduk styled.h1 demek(yukarıda ben styled-components styled diye import ettiğim için böyle yazdım.) bana bir h1 tagı oluştur `` arasında ise bu h1 tagının özellikleri rengi boşlukları margin padding gibi css kodları yer alıyor. He bu arada `` yapmasını bilmiyor olabilirsiniz. Klavyede Alt gr ve ;(noktalı virgül) tuşuna 2 kere basarak oluşturabilirsiniz. Bilmemek ayıp değil sonuçta.

Şimdi bu değişkenimizi kullanalım. Aynı react component kullanır gibi kullanıyoruz zaten bu yüzden ben çok sevdim kendisini

Kod:
<Title> Tht </Title>
Şeklinde kullanıyoruz. Peki burada ürettği html çıktısı nasıl oluyor derseniz.

Kod:
<h1 class="sc-bdVaJa lpjCXg">Tht</h1>
class ismini unique bir değer ile oluşturmuş tasarımı çalan kişiye de zorluk olacak tüh





Umarım anlamışsınızdır. İsterseniz div oluşturup içine h1 tagı şeklinde bir kullanım da yapabilirsiniz. Size kalmış birşey artık. Bu arada değişken isimlerini büyük harfle başlatmayı unutmayın yoksa çalışmaz .

Diyelim ki bir title var bu bazı yerleri sitenizin sağında aynı solunda margin 10px bu gibi durumlarda acayip kolaylık sağlıyor bizlere şöyle bir kullanım mevcut.

Kod:
const Title = styled.h1`
  color: ${props => props.mavi ? 'blue': 'red'};
  font-size: ${props => props.big ? '70px': '40px'};
`;
Kod:
<Title mavi>Merhaba</Title>
        <Title mavi big>Merhaba</Title>


Burada diyor ki props es6 bilenler anladı zaten props değeri alacaksın bu değerde(props.mavi) varsa rengi blue olsun yoksa kırmızı tek satırlık if else yazdık burada aslında. Diğeri ise big props varsa 70px yoksa 40px olsun font boyutu diyor yani kısaca özelleştirebiliyorsunuz css.

Diyelim ki bir butonunuz veya bir text alanınız var ve bunun rengi font tipi felan hep aynı ama boyutu bazı yere göre değişiyor ee bu sefer hep tekrar tekrar yazacakmıyız hayır tabikide şöyle bir güzellik daha var.


Kod:
const Deneme = styled.div`
  background-color: burlywood;
  padding: 15px;
`;

const Deneme2 =styled(Deneme)`
  margin: 30px;
`;
Kod:
<Deneme2>Deneme 2</Deneme2>
Diyorum ki Deneme de ne özellik var ise onların hepsini al deneme2'ye aktar birde margin yok ise bunuda ekle varsa yeni değerini bu yap diyor ve kullanıyorum.




Mesela Sürekli tekrar eden bir html kodunuz vardır sadece bunun css'lerinde ufak değişiklik istiyorsunuzdur o zamanda böyle bir kullanım yapabilirsiniz. React, Es6 hakim olanlar hemen anlayacaktır.


Kod:
const Title = ({ className, children }) => 
  <p className = {className}>
     {children}
  </p>
;

const StyledTitle = styled(Title)`
  color: blue;
  font-size: 50px;
`;
Kod:
<Title>Merhaba</Title>
<StyledTitle>Merhaba 2</StyledTitle>
Ve daha nice özellikleri mevcut arkadaşlar buraya kadar anlayan herkes kendi sitesinde kullanıma bakarak ileri seviye konuları da eksik anlatmadığım nice özellikleri de anlayabilir. Sanırım bu 2. türkçe kaynak bunun hakkında ilk kaynak

Css in JavaScript — Styled-Components çok güzel bir türkçe kaynak bende buradan öğrenmiştim ismini. Bu modülün asıl yararlanmanız gereken yer burasıdır. Zaten solda kod sağda canlı gösterme yeri eminim ki hemen çözeceksiniz bunuda kalın sağlıcakla.
    
 Offline  
 
Alıntı ile Cevapla
Alt 12-09-2018 23:43   #2
  • Teğmen
  • Üye Bilgileri
Üyelik tarihi
04/2012
Nereden
IIS
Mesajlar
Konular


  


hocam bunun kaynağı bir tutorialı varmı ögrenmek istiyorum .NetCorede kullanmak için elinize sağlık bu arada.
    


___________________________________________

Hepinize Benden Öpücükler Gün Gelir Devran Döner...
 Offline  
 
Alıntı ile Cevapla
Alt 12-09-2018 23:50   #3
  • Teğmen
  • Üye Bilgileri
Üyelik tarihi
03/2017
Mesajlar
Konular


  


Alıntı:
ibanez75612´isimli üyeden Alıntı Mesajı göster
hocam bunun kaynağı bir tutorialı varmı ögrenmek istiyorum .NetCorede kullanmak için elinize sağlık bu arada.
Neyin kaynağını arıyorsunuz react yoksa styled-componetin mi?
    
 Offline  
 
Alıntı ile Cevapla
Alt 12-09-2018 23:57   #4
  • Teğmen
  • Üye Bilgileri
Üyelik tarihi
04/2012
Nereden
IIS
Mesajlar
Konular


  


Alıntı:
Phoique 7´isimli üyeden Alıntı Mesajı göster
Neyin kaynağını arıyorsunuz react yoksa styled-componetin mi?
react hocam
    


___________________________________________

Hepinize Benden Öpücükler Gün Gelir Devran Döner...
 Offline  
 
Alıntı ile Cevapla
Alt 13-09-2018 00:01   #5
  • Teğmen
  • Üye Bilgileri
Üyelik tarihi
03/2017
Mesajlar
Konular


  


Alıntı:
ibanez75612´isimli üyeden Alıntı Mesajı göster
react hocam
React kaynak öyle bol değil malesef. Türkçe kaynak sınırlı ingilizce biliyor veya az da olsa anlıyorsan zaten heryer ingilizce kaynak he ben türkçe kaynak olsun react+redux olsun diyorsan udemy üzerinden kurs alabilirsin 25 tl almıştım ben mesela türkçe kurs gerçekten çok faydası oldu kurs alamam diyorsan türkçe başlangıç için bile adam gibi kaynak yoktu en son.Bu arada ben her türlü yardımcı olurum react öğrenen herkese.
    
 Offline  
 
Alıntı ile Cevapla
Cevapla

Bookmarks

Seçenekler


Bilgilendirme Turkhackteam.net/org
Sitemizde yer alan konular üyelerimiz tarafından paylaşılmaktadır.
Bu konular yasalara uygunluk ve telif hakkı konusunda yönetimimiz tarafından kontrol edilse de, gözden kaçabilen içerikler yer alabilmektedir.
Bu tür konuları turkhackteamiletisim [at] gmail.com mail adresimize bildirebilirsiniz, konular hakkında en kısa sürede gerekli işlemler yapılacaktır.
Please Report Abuse, DMCA, Harassment, Scamming, Warez, Crack, Divx, Mp3 or any Illegal Activity to turkhackteamiletisim [at] gmail.com

Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz.
Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.



         

Powered by vBulletin® Copyright ©2000 - 2018

TSK Mehmetçik Vakfı

Türk Polis Teşkilatını Güçlendirme Vakfı



Google+
film izle

wau

Search Engine Friendly URLs by vBSEO 3.6.0 ©2011, Crawlability, Inc.