Sıfırdan bir React uygulaması oluşturun (Bölüm 7): React ve Best Practices'i Kurma

Bu gönderi, kullanan kişiler için tasarlanmış başlangıç ​​seviyesindeki bir gönderi serisinin bir parçasıdır.
React için hazır araçlar, şablonlar veya kazan plakaları ancak React uygulamasının en baştan nasıl oluşturulacağını öğrenmek ve anlamak isteyin.

Bu serideki tüm gönderiler:
Bölüm 1: Giriş
Bölüm 2: Başlatma ve İlk Dosya
Bölüm 3: ES2015 Sözdizimini Kullanma
4. Bölüm: Stil Kılavuzunun Uygulanması
Bölüm 5: Express Server Kurma
Bölüm 6: Bir Modül Bundler Kullanmak
Bölüm 7: Tepki ve En İyi Uygulamalar
Bölüm 8: Redux’ü kurma
Bölüm 9: Router React'in Ayarlanması
Bölüm 10: TDD ve Jest Kurulumu

Tepki Ayarlama

Bu yazıda, React'i kuracağız ve çok basit bir bileşen yaratacağız, sonra React bileşenlerini geliştirirken aklınızda tutmanız gereken en iyi uygulamaların bazılarını gözden geçireceğiz. Burası eğlenceli kısmın başladığı yer, o yüzden hemen içeri girelim!

React ve React Dom paketlerini bağımlılıklar olarak kurun:

$ npm install - sakla tepki tepki-dom

Ardından index.js'i açın ve uygulamamızı temsil eden çok basit bir React bileşeni oluşturun. İndex.pug şablon dosyamızda id app ile zaten bir öğemiz var, bu yüzden uygulamayı monte etmek için onu kullanalım.

/ **
 * index.js
 * /
'tepki' den Tepki ithal etmek;
import {render} 'tepki-dom' dan;
const MainApp = () => (
  

Merhaba Tepki!

);
// uygulamayı oluştur
render (, document.getElementById ('app'));

Bu basit kod, durumsuz bir işlevsel bileşen MainApp oluşturur ve bunu bir id uygulaması olan bir DOM öğesine bağlar. Bu kod hemen çalışmaz ve paketi oluşturmaya veya sunucuyu başlatmaya çalışırsanız bir hata alırsınız.

Bu hatanın nedeni, Babil'in henüz anlamadığı index.js dosyamızda JSX sözdizimine sahip olmamızdır. Babel'in bu sözdizimini normal JavaScript ile yorumlamasına izin vermek için Babel için React preset ayarını kullanacağız.

Paketi bir bağımlılık olarak kurun:

$ npm install - kaydetme babel-preset-tepki

Ardından hazır ayarı .babelrc dosyasındaki hazır ayar listesine ekleyin:

{
  "hazır ayarlar": [
    "Es2015",
    "Aşamasında-0",
    "tepki"
  ],
  "eklentiler": ["dönüşümü-satır-ortamı-değişkenleri"]
}

Ayrıca, paketi oluşturmanızı önleyen bir hata da olmalı. Linter şikayet ediyor çünkü index.js, JSX sözdizimini içeren ancak jsx yerine js uzantısını kullanan bir JavaScript dosyasıdır.

Bu kuralın açıklamasını buradan okuyabilirsiniz. ‘Ne zaman kullanmıyorum’ bölümü, JSX sözdizimini içeren dosyaların uzantısını kısıtlamakla ilgilenmiyorsanız bu kuralı kullanmamanız gerektiğini söyler.

Bu kuralı kullanmaya devam edebilirsiniz ancak js uzantısını tüm dosyalar için kullanmayı tercih ediyorum, bu yüzden bu kuralı devre dışı bırakacağım:

{
  "genişletir": "airbnb",
  "env": {
    "es6": doğru
    "tarayıcı": doğru,
    "düğüm": doğru
  },
  "kurallar": {
    "react / jsx-dosya adı uzantısı": 0
  }
}

HMR'yi etkinleştirme

Sıcak Modül Değişimini Etkinleştirmek, bir kod bloğu eklemek kadar kolaydır:

/ **
 * index.js
 * /
'tepki' den Tepki ithal etmek;
import {render} 'tepki-dom' dan;
if (module.hot) {
  module.hot.accept ();
}
const MainApp = () => (
  

Merhaba Tepki!

);
// uygulamayı oluştur
render (, document.getElementById ('app'));

İpuçları ve En İyi Uygulamalar

Öğreticiye devam etmeden önce, React ile çalışma deneyimimden ve ayrıca web'de okuma ve aramadan öğrendiğim toplanmış ipuçları ve en iyi uygulamalar listesinden geçeceğiz. React bileşenlerinizi oluştururken bunları aklınızda bulundurun.

Bağımlılık İthalatları ve Yerel İthalat

Bağımlılık ithalatını yerel ithalattan yeni bir satıra ayırın. Bağımlılık ithalatı önce gelmeli.

React, {Bileşen} 'tepki' den ithalat;
'useful-module''den usefulModule alma;
myLocalModule öğesini './my-local-module' içinden içe aktarın;

Vatansız İşlevsel Bileşenler

Bileşen yalnızca oluşturucu bir bileşense veya bir Durum Nesnesi kullanmanız gerekmiyorsa, sınıf yerine düz bir JavaScript işlevi kullanın. Buna Vatansız İşlevsel Bileşen denir.

Yani bunu yapmak yerine:

React, {Bileşen} 'tepki' den ithalat;
sınıf MyComponent, Bileşen'i genişletti {
  render () {
    dönüş (
      
Merhaba!     );   } }
varsayılan ihracat MyComponent;

Bunu yap:

'tepki' den Tepki ithal etmek;
const MyComponent = () => 
Merhaba!
;
varsayılan ihracat MyComponent;

Ne kadar dağınıklığı gördün mü? İşlevin kendisini dışa aktararak da daha basit hale getirebilirsiniz:

'tepki' den Tepki ithal etmek;
varsayılan verme () => 
Merhaba!
;

Ancak, bunu yapmayı tercih etmiyorum çünkü hata ayıklamayı zorlaştırıyor. Geliştirme Aletlerini React'i işaretlerseniz, işlev adının gizli olduğu için bileşen adının "Bilinmiyor" olduğunu göreceksiniz.

Anonim İşlevsel Bileşen

Anonim bir işlev yerine normal bir adlandırılmış işlev kullanmak daha iyi bir yaklaşım olacaktır:

'tepki' den Tepki ithal etmek;
varsayılan işlevi dışa aktar MyComponent () {
  return 
Merhaba!
; }
Adlandırılmış İşlevsel Bileşen

Sunu Bileşenleri ile başlayın

Sunum bileşenleri tanımlamak için daha basit, anlaşılması daha kolay ve tekrar tekrar kullanılabilir çünkü bunlar uygulamanın geri kalanından bağımsızdır.

Uygulamanızı bir dizi sunum bileşenine ayırırsanız, hepsini tek bir sayfaya koyabilir ve tüm uygulama boyunca birleşik bir görünüm ve his elde etmek için tasarımlarını ve çeşitlemelerini düzenleyebilirsiniz.

Bileşeninizi sunum bileşeni olarak oluşturun ve yalnızca ihtiyacınız olduğunda durum ekleyin; bu da bizi bir sonraki ipucuna getirir.

Devlet Kullanımını En Aza İndirin

Bileşenlerinizde az miktarda durum kullanın ve veri yerine kullanıcı arayüzü için durum kullandıklarından emin olun, başka bir deyişle, eğer render () içinde kullanmıyorsanız, o durumda olmamalıdır. Sadece bileşeninizi yeniden oluşturmak istiyorsanız setState kullanmanız gerektiğini unutmayın.

Diyelim ki tek bir düğmeden oluşan bir bileşenimiz var. Bu düğme yalnızca bir kez tıklanabilir ve tıklandığında konsola bir mesaj kaydedilir:

React, {Bileşen} 'tepki' den ithalat;

sınıf MyComponent, Bileşen'i genişletti {
  durum = {
    clickedOnce: yanlış,
  };
  handleClick = () => {
    if (! this.state.clickedOnce) {
      console.log ( 'tıklandığında');
    }
    this.setState ({
      clickedOnce: doğru,
    });
  }
  componentDidUpdate () {
    console.log ( 'Güncellendi!');
  }
  render () {
    dönüş (
      
                    );   } }
varsayılan ihracat MyComponent;

Bu, düğmenin tekrar tıklanıp tıklanmayacağını belirleyen bir bayrak tıklatılarak durumu ayarlamak için durumu kullanan kötü bir uygulama örneğidir. Düğmeye her tıklandığında, gerek duymasa bile bileşen yeniden oluşturulur.

Uygulama düğme tıklamasıyla yeniden oluşturulur

Bu daha iyi olurdu:

React, {Bileşen} 'tepki' den ithalat;

sınıf MyComponent, Bileşen'i genişletti {
  clickedOnce = false;
  
  handleClick = () => {
    if (! this.clickedOnce) {
      console.log ( 'tıklandığında');
    }
    this.clickedOnce = true;
  }
  componentDidUpdate () {
    console.log ( 'Güncellendi!');
  }
  render () {
    dönüş (
      
                    );   } }
varsayılan ihracat MyComponent;

Bu uygulama, bir durum anahtarı yerine bir sınıf özelliği kullanır, çünkü clickOnce bayrağı bir UI durumunu temsil etmez ve bu nedenle bileşen içinde yaşamamalıdır. Bu yeni uygulamayla, düğmeyi bir kereden fazla tıklamak artık bir güncellemeyi tetiklemiyor.

PropTypes ve defaultProps öğelerini her zaman tanımla

Tüm bileşenlerin, bileşen içinde mümkün olduğu kadar yüksek tanımlanmış propTypes ve defaultProps olması gerekir. Bileşen dokümantasyonu görevi görürler ve dosyayı okuyan diğer geliştiricilere hemen görünür olmalıdırlar.

React.PropTypes, React.PropTypes farklı bir pakete taşındığından, bu paketi bir bağımlılık olarak yükleyelim:

$ npm install - satış prop türleri

Vatansız İşlevsel Bileşenler İçin:

İşlevler JavaScript'te bulunur; bu, bildirimden önce bir işlevi kullanabileceğiniz anlamına gelir:

'tepki' den Tepki ithal etmek;
PropTypes'i 'prop-type'lardan içe aktarma;
MyComponent.propTypes = {
  Başlık: PropTypes.string,
};
MyComponent.defaultProps = {
  Başlık: 'Basit bir sayaç',
};
varsayılan işlevi dışa aktar MyComponent (sahne) {
  dönüş 

{props.title}

; }

ESLint, işlevi tanımından önce kullanma konusunda şikayet eder ancak daha iyi bileşen dokümantasyonu için, .eslintrc dosyasını değiştirerek işlevler için bu linting kuralını devre dışı bırakalım:

{
  ...
  "kurallar": {
    "react / jsx-dosyaadı uzantısı": 0,
    "no-use-before-defa": [
      "hata",
      {
        "functions": yanlış
      }
    ]
  }
}

Sınıf Tabanlı Bileşenler için:

İşlevlerin aksine, JavaScript'teki sınıflar kaldırılmaz, bu nedenle sınıfı tanımlamadan önce MyComponent.propTypes = ... yapamayız ancak propTypes ve defaultProps öğelerini statik sınıf özellikleri olarak tanımlayabiliriz:

React, {Bileşen} 'tepki' den ithalat;
PropTypes'i 'prop-type'lardan al;
sınıf MyComponent, Bileşen'i genişletti {
  statik propTypes = {
    Başlık: PropTypes.string,
  };
  statik defaultProps = {
    Başlık: 'Basit bir sayaç',
  };
  render () {
    dönüş 

{this.props.title}

;   } }
varsayılan ihracat MyComponent;

Devleti Başlatma

Durum bileşen kurucu içinde başlatılabilir:

sınıf MyComponent, Bileşen'i genişletti {
  yapıcı (sahne) {
    Süper (sahne);
    this.state = {
      say: 0,
    };
  }
}

Daha iyi bir yol, durumu bir class özelliği olarak başlatmaktır:

sınıf MyComponent, Bileşen'i genişletti {
  yapıcı (sahne) {
    Süper (sahne);
  }
  durum = {
    say: 0,
  };
}

Bu çok daha iyi, daha temiz, daha okunaklı görünüyor ve aynı zamanda bileşen belgelerine de katkıda bulunuyor. Durum nesnesi propTypes ve defaultProps'tan sonra başlatılmalıdır:

React, {Bileşen} 'tepki' den ithalat;
PropTypes'i 'prop-type'lardan içe aktarma;
sınıf MyComponent, Bileşen'i genişletti {
  // propTypes önce gelir
  statik propTypes = {
    Başlık: PropTypes.string,
  };
  // defaultProps ikinci sırada geliyor
  statik defaultProps = {
    Başlık: 'Basit bir sayaç',
  };
  // yapıcı buraya geliyor
  constructor () {
    ...
  }
  // sonra devlet gelir
  durum = {
    say: 0,
  };
}

SetState işlevine geçin

React belgeleri this.state'e dayanıyor ve bu durum bir sonraki durumu hesaplamak için değerleri pekiştiriyor, çünkü React bunları asenkronize olarak güncelliyor. Bu, setState () işlevini çağırdıktan hemen sonra durumun değişmeyeceği anlamına gelir.

sınıf MyComponent, Bileşen'i genişletti {
  durum = {
    say: 10,
  }
  onClick = () => {
    console.log (this.state.count); // 10
    
    // sayım hemen değişmeyecek
    this.setState ({count: this.state.count + this.props.step});
    
    console.log (this.state.count); // hala 10
  }
}

Bu basit senaryolar için çalışır ve durum hala doğru bir şekilde güncellense de, daha karmaşık senaryolarda beklenmeyen davranışlara yol açabilir.

Bu senaryoyu inceleyin, tek bir düğme oluşturan bir bileşene sahipsiniz. Bu düğmeye tıklandığında bir handleClick yöntemi çağrılır:

sınıf MyComponent, Bileşen'i genişletti {
  statik defaultProps = {
    Adım 5,
  }
  statik propTypes = {
    adım: PropTypes.number,
  }
  
  durum = {
    say: 10,
  }
  
  handleClick = () => {
    ) (This.doSomething;
    this.doSomethingElse ();
  }
  doSomething = () => {
    this.setState ({count: this.state.count + this.props.step});
  }
  doSomethingElse = () => {
    this.setState ({count: this.state.count - 1});
  }
  render () {
    dönüş (
      
        

Geçerli sayı: {this.state.count}

                    );   } }

Düğme, tıklandığında handleClick () işlevini çağırır; bu da sırasıyla doSomething () ve ardından doSomethingElse () işlevini çağırır. Her iki işlev de durum içindeki sayım değerini değiştirir.

Mantıksal olarak, 10 + 5 15 olur, sonra 1 çıkar ve sonuç 14 olmalı, değil mi? Eh, bu durumda değil - ilk tıklamadan sonra sayma değeri 9, 14 değil. Bunun nedeni, do.somethingElse () işlevinin 15 değil, doSomethingElse () çağrıldığında yine de 10 olmasıdır.

Bunu düzeltmek için, bir nesne yerine bir işlevi kabul eden ikinci bir setState () formu kullanabilirsiniz. Bu işlev, önceki durumu ilk argüman olarak alır ve güncellemenin ikinci argüman olarak uygulandığı zamandaki aksesuarlar:

this.setState ((prevState, props)) => ({
  count: prevState.count + props.step
}))

Örneğimizi düzeltmek için bu formu kullanabiliriz:

sınıf MyComponent, Bileşen'i genişletti {
  ...
  handleClick = () => {
    ) (This.doSomething;
    this.doSomethingElse ();
  }
  doSomething = () => {
    this.setState ((prevState, props)) => ({
      count: prevState.count + props.step
    }));
  }
  doSomethingElse = () => {
    this.setState (prevState => ({
      sayısı: prevState.count - 1
    }));
  }
  ...
}

Bu uygulamayla sayım 10 ile 14 ile 18 arasında değişmektedir. Basit Matematik yine mantıklı!

Ok İşlevlerini Sınıf Özellikleri Olarak Kullanma

Bu anahtar kelime her zaman JavaScript geliştiricileri için kafa karıştırıcı olmuştur ve davranışları React bileşenlerinde kafa karıştırıcı değildir. Bu anahtar kelimenin bir React bileşeninde nasıl değiştiğini biliyor musunuz? Aşağıdaki örneği düşünün:

React, {Bileşen} 'tepki' den ithalat;
sınıf MyComponent, Bileşen'i genişletti {
  durum = {
    say: 0,
  };
  tıklamada() {
    console.log (this.state);
  }
  render () {
    dönüş (
      
        

Sayısı: {this.state.count}

                    );   } }
varsayılan ihracat MyComponent;

Düğmeye tıklamak bir hataya yol açar:

Yakalanmamış TypeError: Tanımsız "durum" özelliğini okuyamıyor

Bunun nedeni, bir sınıf yöntemi olarak onClick'in varsayılan olarak bağlı olmamasıdır. Bunu düzeltmenin birkaç yolu var. (amaçlanan, anladın mı?)

Bunun bir yolu, işlevi render () işlevinin içine geçirirken işlevi doğru bağlama bağlamaktır:

Veya render () içindeki bir ok işlevini kullanarak bağlamı değiştirmekten kaçınabilirsiniz:

Bununla birlikte, bu iki yöntemin hafif bir performans maliyeti vardır, çünkü işlev her işleme üzerinde yeniden tahsis edilecektir. Bu düşük performans maliyetinden kaçınmak için yapıcı içindeki işlevi ciltleyebilirsiniz:

React, {Bileşen} 'tepki' den ithalat;
sınıf MyComponent, Bileşen'i genişletti {
  yapıcı (sahne) {
    Süper (sahne);
    this.onClick = this.onClick.bind (this);
  }
  ...
  render () {
    ...
    
    ...
  }
}
varsayılan ihracat MyComponent;

Bu teknik daha iyidir, ancak kolayca taşınabilir ve şuna benzer bir şeyle sonuçlanabilir:

yapıcı (sahne) {
  // bu kötü, gerçekten kötü
  this.onClick = this.onClick.bind (this);
  this.onChange = this.onChange.bind (this);
  this.onSubmit = this.onSubmit.bind (this);
  this.increaseCount = this.increaseCount.bind (this);
  this.decreaseCount = this.decreaseCount.bind (this);
  this.resetCount = this.resetCount.bind (this);
  ...
}

Babel'i kullandığımız ve sınıf özelliklerini desteklediğimiz için sınıf yöntemlerini tanımlarken ok işlevlerini kullanmak en iyi yol olacaktır:

sınıf MyComponent, Bileşen'i genişletti {
  ...
  onClick = () => {
    // 'bu' korunmuş
    console.log (this.state);
  }
  render () {
    dönüş (
      
        

{this.state.count}                     );   } }

Sahne Nesnesini Yok Et

Bir bileşen birçok destek parçası olduğunda, her bir özelliği kendi çizgisine yerleştirerek destek nesnesini imha edin.

Vatansız İşlevsel Bileşenler İçin:

varsayılan işlevi dışa aktar MyComponent ({
  İsim,
  Soyadı,
  e,
  açıklama,
  onChange,
  onSubmit,
}) {
  dönüş (
    
      

{firstName}       ...        ); }

Varsayılan argümanlar, defaultProps'u bırakmak için bir bahane değildir. Daha önce belirtildiği gibi, propTypes ve defaultProps öğelerini her zaman tanımlamanız gerekir.

Sınıf Tabanlı Bileşenler için:

sınıf MyComponent, Bileşen'i genişletti {
  ...
  render () {
    const {
      İsim,
      Soyadı,
      e,
      açıklama,
      onChange,
      onSubmit,
    } = this.props;
    dönüş (
      
        

{firstName}         ...            );   } }

Bu daha temizdir, özellikleri yeniden sıralamayı kolaylaştırır ve Git için okunabilir bir fark oluştururken listeye / listesine özellikleri eklemeyi / kaldırmayı kolaylaştırır. Aşağıdakileri göz önünde bulundur:

Her bir özellik yeni bir hattayken, farketme daha okunur

Sağ tarafta, hangi özelliğin eklendiğini kolayca belirleyebilirsiniz, ancak sol tarafta yalnızca o satırda bir şeylerin değiştiğini bilirsiniz ve satırın hangi kısmının olduğunu anlamak için gerçekten dikkatlice bakmak zorundasınız. değişti.

Koşullu Renderleme

Bir koşula dayanarak iki bileşenden veya JSX kod bloklarından birini oluşturmanız gerektiğinde, üçlü bir ifade kullanın:

isLoggedIn
  ? 
Hoş geldiniz, {username}!
  :

Kod birden fazla satırdan oluşuyorsa, parantez kullanın:

isLoggedIn? (
  
    Hoşgeldin, {usename}!    ): (   

Bir koşula göre tek bir bileşen veya bir JSX kodu bloğu oluşturmanız gerekirse, bunun yerine kısa devre değerlendirmesi kullanın:

isComplete && 
İşiniz bitti!

Birden fazla satır için parantez kullanın:

tamamlandı && (
  
    Bitirdiniz!    )

Anahtar Öznitelik

Array.prototype.map ve benzer dizi yöntemlerini render () işlevinde kullanmak yaygın bir kalıptır ve anahtar niteliğini unutmak kolaydır. Uzlaşma yeterince zor, zorlaştırmayın. Anahtarı daima ait olduğu yere yerleştirmeyi daima unutmayın. (tekrar amaçlanan, anladın mı?)

render () {
  dönüş (
    
    {       {         items.map (item => (           
  •             {öğe adı}                    ))        }        ); }

Map (), filter () veya benzeri dizi yöntemlerini kullandığınızda, geri çağırma için ikinci parametre öğenin dizinidir. Bu endeksi anahtar olarak kullanmak genellikle kötü bir fikirdir. React, hangi öğelerin değiştiğini, eklendiğini veya kaldırıldığını ve anahtar değerinin sabit olması gerektiğini ve her bir öğeyi benzersiz şekilde tanımlaması gerektiğini tanımlamak için key niteliğini kullanır.

Dizinin dizildiği veya bir öğenin dizinin başına eklendiği durumlarda, dizini temsil eden öğenin aynı olmasına rağmen dizin değişecektir. Bu gereksiz render işlemlerine ve bazı durumlarda yanlış verilerin görüntülenmesine neden olur.

İlk oluşturulduğunda her öğe için benzersiz bir kimlik oluşturmak üzere UUID veya ShortID kullanın ve onu anahtar değer olarak kullanın.

Devlet normalleştirmek

Durum nesnesini normalleştirmeye çalışın ve mümkün olduğunca düz tutun. Verileri duruma yerleştirmek, güncelleştirmek için daha karmaşık bir mantığın gerekli olduğu anlamına gelir. Derinden iç içe geçmiş bir alanı güncellemenin ne kadar çirkin olacağını hayal edin - bekleyin, hayal etmeyin, burada:

// durum nesnesi
durum = {
  ...
  gönderiler: [
    ...,
    {
      meta: {
        id: 12
        Yazar: '...'
        kamu: yanlış,
        ...
      },
      ...
    },
    ...
  ],
  ...
};
// 'herkese açık' ifadesini 'gerçek' olarak
this.setState ({
  ...bu devlet,
  gönderiler: [
    ... this.state.posts.slice (0, dizin),
    {
      ... this.state.posts [index],
      meta: {
        ... this.state.posts [index] meta uzantılı,
        genel: doğru
      }
    },
    ... this.state.posts.slice (dizin + 1),
  ]
});

Bu kod sadece çirkin değil, aynı zamanda ilgisiz bileşenleri gösterdikleri veriler değişmemiş olsa bile yeniden oluşturulmaya zorlayabilir. Bunun nedeni, durum ağacındaki tüm ataları yeni nesne referansları ile güncellememizdir.

Durum ağacını yeniden yapılandırırsak aynı alanı güncellemek daha kolay olacaktır:

durum = {
  gönderiler: [
    10,
    11
    12,
  ],
  meta: {
    10: {
      id: 10,
      yazar: 'yazar-a',
      kamu: yanlış,
    },
    11: {
      id: 11
      yazar: 'yazar-b',
      kamu: yanlış,
    },
    12: {
      id: 12
      Yazar: 'author-c',
      kamu: yanlış,
    },
  },
}
this.setState ({
  meta: {
    ... this.state.meta,
    [id]: {
      ... this.state.meta [kimlik],
      genel: doğru
    }
  }
})

Sınıf isimlerini kullan

Koşullu bir sınıf adı kullanmanız gereken bir durumdaysanız, şuna benzer bir şey yazmış olabilirsiniz:

  ...

Birden fazla koşullu sınıf adınız varsa, bu gerçekten çirkinleşir. Üçlü kullanmak yerine, sınıf adı paketini kullanın:

sınıf isimlerini 'sınıf isimlerinden' al;
const classes = sınıf adları ('tab', {'is aktif': isActive});
  ...

Dosya başına bir bileşen

Bu zor bir kural değildir, ancak her bir bileşeni tek bir dosyada tutmayı ve bu bileşeni varsayılan olarak dışa aktarmayı tercih ederim. Bunun için özel bir nedenim yok ama daha temiz ve düzenli buluyorum - eğer bunu yaparsanız beşlik!

Sonuç

Bir React bileşeni geliştirmek için tek bir doğru yol yoktur. Yeniden kullanılabilir ve bakımı yapılabilir bileşenler geliştirmenize yardımcı olacak en iyi uygulama ve kalıplardan birkaçını inceledik ve ne tür kalıp ve uygulamaları tercih ettiğinizi ve neden tercih ettiğinizi çok merak ediyorum.

Bu serinin bir sonraki bölümünde, basit bir Yapılacaklar uygulaması oluşturacağız ve bu en iyi uygulama ve kalıplardan bazılarını uygulayacağız.

Bu makale faydalı mıydı? Lütfen aşağıdaki Clap düğmesine tıklayın veya daha fazla bilgi için beni takip edin.

Okuduğunuz için teşekkürler! Herhangi bir geri bildiriminiz varsa, aşağıdaki yorumunuzu bırakın

Bölüm 7-b'ye gidin: Basit bir Yapılacaklar uygulaması oluşturma (Yakında)