React Kullanarak En İyi Uygulamaları Şekillendirme

Pankaj Patel Unsplash tarafından fotoğraf

Web'de çalışmanın en zevkli bölümlerinden biri, böyle görsel bir ortamda çalışmanızdır. Görsellik yönünün büyük kısmı açıkça göründüğü gibi. Bir web sayfasını biçimlendirmek, yazı tipi ve renkler gibi şeyleri değiştirmek için ilk işaretleme ve nitelik ekleme köklerinden günümüzün Basamaklı Stil Sayfalarına kadar geldi. Şimdi bizim Web uygulamaları ve JS Frameworks dünyasında, web gelişti ve en iyi uygulamalara sahip. Bu özellikle React gibi bir çerçevede çalışırken geçerlidir.

Bir web sayfanızı nasıl tepki veriyor?

Tepki, kendi başına ve başka bir araç olmadan, öğeleri stillendirmenin iki yolunu destekler: stil desteği, stil etiketi ve CSS stil sayfaları. Style prop, CSS özelliklerinin ve değerlerinin JS nesnesini alır ve sonuçta bunu, bir öğenin stillerini satır içi olarak çevirir, şunun gibi:

// JSX
   Kırmızı Metin   // DOM
   Kırmızı Metin

Yalnızca satır içi stiller olduğu için, hala en yüksek özelliği elde edersiniz, ancak stile erişiminiz hakkında sınırlısınız.

Stil etiketi ve CSS stil sayfaları tam HTML işaretlemesiyle çalışmakla aynı şekilde çalışır. En büyük fark, sınıf yerine theclassName prop kullanmanız gerektiğidir. Hem id prop hem de className prop, bunun gibi bir dize olarak değerlendirilen bir dize veya ifadeyi alır:

// JSX
// DOM

CSS'yi ölçekte korumak oldukça zorlayıcı olabilir, böylece React topluluğu, CSS'yi ölçekte korumada geliştirici deneyimini geliştiren araçlar geliştirmiştir. Birkaç tane yaratılmış, ancak en büyüğü muhtemelen CSS modülleri ve JS in CSS (ve daha özel olarak tasarlanmış bileşenler / duygu).

CSS Modülleri, bir CSS dosyasına JS Modülü gibi davranmanıza izin verir. Bir CSS dosyasını içe aktarırsınız ve CSS dosyasındaki sınıflar, bir JS nesnesindeki özellikler gibi değerlendirilir:

css '.
// DOM

Sonunda kullanılan sınıfın, sınıfın artı bir karma değer olduğunu fark edeceksiniz. Bu karma bizim app benzersiz olduğundan emin olmak için sınıfa eklenir.

Bu, geliştiricinin uygulamanın tüm kapsamını ve yazdığımız CSS'nin Cascade'in geri kalanını nasıl etkileyeceğini bilmesine gerek kalmamasını sağlar. Aslında, CSS modüllerini kullanırken her bir bileşenin kendisiyle ilişkilendirilmiş kendi CSS dosyasına sahip olması normaldir. CSS Modüllerinin bir derleme işleminin bir parçası olarak etkinleştirilmesi gerekir, örneğin araçtan yararlanabilmek için Webpack'te.

Tarz-Bileşen ve Duygu, CSS modülleriyle aynı hedefi gerçekleştiren, ancak farklı şekilde yürüten iki popüler kütüphanedir. Her iki kitaplık da ES6'da tanıtılan etiketli yazılı hazır bilgi sözdiziminden faydalanır. Basitçe söylemek gerekirse, etiketlenmiş şablon değişmezleri, şablon değişmez dizeleriyle çağrılan işlevlerdir. İşlev, şablon değişmezlerini ayrıştırır ve buna göre davranabilir.

Bu kitaplıkların çalışması, CSS'yi bir şablon dizgisi olarak yazmanızdır, işlev şablon dizgesini ayrıştırır, belgenin stil etiketine enjekte eder ve zaten içine enjekte edilen uygun sınıfa sahip bir bileşen döndürür. İşte nasıl çalıştığına bir örnek (örnek tarz bileşenleri kullanıyor, ancak duygu neredeyse aynı bir API kullanıyor):

'stilli-komponentlerden' ithal tarz;
const Layout = styled.div`
   ekran: ızgara;
`;
// DOM

Gördüğünüz gibi, CSS Modülü ile aynı hedefe ulaşır, ancak kapsamda oluşturulmuş sınıfı oluşturma zamanında oluşturmak yerine, çalışma zamanında CSS'yi oluşturur. Bu, bu yazının kapsamı dışındaki pek çok harika özelliğe izin verir, ancak bunları stil bileşenleri ve duygularla ilgili olarak incelemenizi tavsiye ederim.

Tüm bu stil biçemleriyle, stilin en iyi yolu nedir? Çok öznel ve geliştirici veya geliştirici ekiplerinin tercihine gerçekten bağlı. Bununla birlikte, ortaya çıkmış en iyi uygulamaların olduğu söylenebilir.

Satır İçi Stilleri Artık “Kötü” Değil

CSS öğrenirken öğrendiğim ilk şeylerden biri, satır içi stillerin kötü olduğu, iyi ölçeklenemediği ve ne pahasına olursa olsun kaçınılması gerektiğidir. Ancak neden “kötü” sayıldığının nedenlerini anlamak önemlidir.

Satır içi stilleri kötü olarak kabul edilir, çünkü satır içi stilleri yalnızca bu belirli öğeye uygulanır. Birincil düğme gibi aynı stili tekrarlamanız gerekirse, uygulamanızın bir bölümünden diğerine kopyalayıp yapıştırmanız gerekir. Şimdi, süpürme stilindeki değişimleri ve sadece iki element arasında kısmen aynı olan stilleri hesaba kattığınızda, sürdürülecek bir kabusunuz olur.

Bileşen tabanlı bir çerçevede, React gibi, bu artık bir faktör değildir. Stilli bir elemana birden fazla yerde ihtiyacınız varsa, aynı bileşeni her iki yerde de kullanırsınız. Stil her iki öğe için deðiþirse, güncellemek için hala sadece bir bileþeniniz olur, böylece doğrudan HTML ile çalþtýðýnýz gibi ölçeklendirme konuþlarýnýz olmaz.

Satır içi stiller, stillerin sahne parçalarıyla yapılandırılabilir olmasına da izin verir. Belirli öğeleri, bileşeninizin kullanıcısı tarafından yapılandırılacak aksesuarlar aracılığıyla gösterebilirsiniz. Sitenizde evrensel olarak kullanılan stil sabitleri varsa, bunlar stil sabitleri klasöründe tutulabilir ve içeri aktarılabilir. İşte bunların nasıl yapılabileceğine bir örnek:

Bu yöntem mükemmel değil. Satır içi stilleri, örneğin sözde seçicilere veya medya sorgularına erişim vermiyor. Ancak artık satır içi stilleri kullanmak hiç de fena değil ve kesinlikle geliştiricinin araç kutusunun bir parçası olmalıdır.

Bileşenler kendilerini konumlandırmamalı

Bileşen tabanlı bir çerçevede, React gibi endişelerimizi bileşen düzeyinde ayırırız, stilleri içerir. Bir bileşen nerede oluşturulduğunu veya kardeşlerinin kim olduğunu bilmiyor. Ayrıca nasıl konumlandırıldığını da bilmiyor. Ana-babası örneğin flex-box, css-grid, float veya mutlak pozisyon kullanıyor olabilir. Dolayısıyla, marj, pozisyon, esneklik veya bunun gibi başka bir özellik gibi değerleri ayarlamanızın bir yolu yoktur.

İkilem, CSS'nin bileşen tabanlı bir çerçeve etrafında tasarlanmamış olması ve bu özelliklerin çoğunun çocuk düzeyinde ayarlanması gerektiği, yani çocuğun bilmemesine rağmen çevresi hakkında “bilmesi” gerektiği anlamına geliyor. .

Bunu nasıl çözeceğiz? Bunu yapmamızın 3 yolu var. Bunun bir yolu, stillerin şu şekilde enjekte edilmesine izin vermek için className ve / veya stil sahne öğelerini göstermektir:

const Widget = ({className = '', ... sahne}) =>
         
//veya
const Widget = ({style = {}, ... sahne}) =>
        

Bunun olası tarafı, özellikle bir tasarım sistemi içinde çalışırken genellikle istenmeyen bir durum olan üzerine yazılması için diğer stillerinizi açmasıdır. Buna karşı korunmak için üzerine yazmak istemediğiniz stilleri en son olarak yazabilirsiniz. Böyle yapabilirsiniz:

const Widget = ({className = '', ... sahne}) =>
         
//veya
const Widget = ({style = {}, ... sahne}) =>
        

Bunu yapmanın başka bir yolu, marj veya pozisyon gibi spesifik değerleri açıkça ortaya koymaktır. Bileşeniniz pervanenin doğru olduğundan ve uygulandığından emin olmak için mantık yapabilir. Bu size daha fazla kontrol sağlar ancak sizi bir Bileşen yazarı olarak ortaya çıkarmayı seçtiğiniz her pervane ile başa çıkmaya zorlar.

Üçüncü bir yöntem, Bileşeninizi, bu konumlandırmayı yerleşik yapan “sarmalayıcılar” içinde oluşturmaktır, şunun gibi:

const Layout = () => (
   
     
        
     
   
);

Bu, belirli alanları göstermek zorunda kalmadan daha fazla kontrol sağlar. Ancak, her yere bu paketleyicilerin birçoğu varken çok fazla dolaylı neden olabilir. Sarıcı cehenneme karşı savaşmanın en iyi yolu, bunları bir Yüksek Sipariş Bileşeni kullanmak gibi kendi bileşenlerine oluşturmaktır.

Stiller Uzatılmalıdır

Ben zaten bir keresinde Tepki Öğelerinizde çok fazla şey yapmaya çalışmakla ilgili görevimde bulundum. Bileşeninize stil eklemek için kullanabileceğiniz birçok araç vardır ve bu stillerin nasıl uygulandığını, öğelerinizi birlikte oluştururken genellikle önemli değildir. Bileşenlerimiz şöyle daha az görünmelidir:

const SideBar = ({title}) => (
   
     

        {Başlık}            
                   ):

Ve dahası şöyle:

const SideBar = ({title}) => (
   
     
        {Başlık}
     </ Title>
     <Vücut>
        <Widget />
     </ Body>
   </ Kapsayıcı>
):</pre><p>İkinci örnek, SideBar Bileşenini oluştururken doğru soyutlama seviyesidir. SideBar Bileşeni'ni oluştururken, stilin nasıl eklendiğini gerçekten umursamıyorum, yalnızca stilin eklendiğini. İlk örnek daha gürültülü ve bileşenin ne yaptığını anlama yeteneğimi yavaşlatıyor.</p><p>Bir web sayfasını biçimlendirmek, bir web sayfası için çok önemlidir. Web sayfamızın görünüşü bir web sitesini bozabilir veya bozabilir. Neyse ki, kullanıcılarımızın kullanmayı sevdiği şaşırtıcı görünen bir web sitesi sunmamıza yardımcı olabilecek birçok araç ve en iyi uygulamalara sahibiz.</p></div><ins data-zxname="zx-adnet" data-zxadslot="ZX-SMR53" data-zxw="970" data-zxh="250" data-overlay="true"></ins><div class="neighbor-articles"><h4 class="ui header">Ayrıca bakınız</h4><a href="/deal/why-smart-people-believe-the-dumbest-things-bba912/" title="Akıllı İnsanlar Neden En Aptal Şeylere İnanıyor?">Akıllı İnsanlar Neden En Aptal Şeylere İnanıyor?</a><a href="/deal/the-5-step-guide-to-develop-the-best-inspirational-routine-a2ac71/" title="En İyi İlham Verici Rutini Geliştirmek İçin 5 Adımlı Kılavuz">En İyi İlham Verici Rutini Geliştirmek İçin 5 Adımlı Kılavuz</a><a href="/deal/how-not-writing-that-vulnerable-story-today-is-the-best-self-care-tool-63de26/" title="Günümüzde Bu Hassas Hikayeyi Yazmamak, En İyi Öz Bakım Aracıdır">Günümüzde Bu Hassas Hikayeyi Yazmamak, En İyi Öz Bakım Aracıdır</a><a href="/deal/hi-it-s-me-your-best-friend-depression-567553/" title="Selam benim. En iyi arkadaşın depresyonun.">Selam benim. En iyi arkadaşın depresyonun.</a><a href="/deal/christmas-gift-ideas-365-of-the-best-gifts-from-10-to-1000-f75250/" title="Noel Hediyesi Fikirleri: En İyi Hediyelerin 365'i 10 ile 1000 $ arası +">Noel Hediyesi Fikirleri: En İyi Hediyelerin 365'i 10 ile 1000 $ arası +</a></div></main><div class="push"></div></div><footer style="height:50px">finleyandoliver.com<!-- --> © <!-- -->2020<!-- --> <a href="https://th.finleyandoliver.com/deal/styling-best-practices-using-react-ce4247/" title="https://finleyandoliver.com">finleyandoliver.com</a></footer></div></div></div></body></html>