React Javascript Kitaplığına Başlarken

WordPress dünyasında herhangi bir zaman geçirirseniz, muhtemelen Zac Gordon ile karşılaşmışsınızdır. Zac, WordPress'te Javascript'e odaklanan hevesli ve çekici bir öğretmendir. Matt Mullenweg'den "Javascript'i Derinlemesine Öğrenin" ifadesini ödünç aldı ve bunu kişisel sloganı haline getirdi.

Son birkaç yıldır Zac, size WordPress'te Javascript'i nasıl kullanacağınızı öğretmeye odaklanan video dersleri, çevrimiçi konferanslar, canlı görüşmeler ve podcast'ler üretti.

Zac'le "React Açıklaması" adlı bir kitap üzerinde çalıştığımızı söylemekten mutluluk duyuyorum. React, WordPress ekibinin yeni Gutenberg editörü için seçtiği kütüphanedir. Yalnız değiller - hem Drupal hem de Magento da React'i seçti.

Zac, Twitter'da @zgordon'da yazma ilerlemesini canlı tweetliyor. OSTraining podcast'inde Zac'in React hakkında konuşmasını da duyabilirsiniz.

Kitaptan alınan bu alıntıda Zac, size React ve bazı temel kavramlar hakkında üst düzey bir genel bakış sunar.

React nedir?

 // React ve Diğer Bileşenleri İçe Aktar
React'i 'react'ten içe aktarın;
'tepki-dom'dan { render } içe aktar;
Başlığı './Başlık'tan içe aktar;
MainContent'i './MainContent' dosyasından içe aktarın;
Altbilgiyi './Altbilgi'den içe aktar;

function Uygulama(){
  dönüş (
    <div className="app">
      <Başlık />
      <Ana İçerik />
      <Altbilgi />
    </div>
 );
}

ReactDOM.render( <Uygulama />, document.getElementById("root"));

 React'i "tepki"den içe aktar;
Reklamı "../Ad" dan içe aktar;
"../assets/logo.svg" dosyasından logoyu içe aktar;

varsayılan işlevi dışa aktar Header() {
dönüş (
<header className="app-header">
<Reklam />
<img src={logo} className="app-logo" alt="logo" />
<h1 className="app-title">Site Adı</h1>
</header>
);
}

 React'i 'react'ten içe aktarın;
içe aktarmak {
  Metin,
  Görüş,
  VrDüğme,
} 'react-360'dan;

class Slayt Gösterisi React.Component'i genişletir {
  // Kısa olması için kod kaldırıldı
  dönüş (
    <Görünüm stili={styles.wrapper}>
      <Stil={styles.controls}>
        <VrButton onClick={this.prevPhoto}>
          <Metin>{'Önceki'}</Metin>
        </VrButton>
        <VrButton onClick={this.nextPhoto}>
         <Metin>{'Sonraki'}</Metin>
        </VrButton>
      <Görüntüle>
        <Text style={styles.title}>{current.title}</Text>
      </Görüntüle>
    </Görüntüle>
  );
}

React Veri Akışı Açıklaması

React, verilerin bir uygulama üzerinden aşağı tek yönlü olarak geçmesi için bileşen hiyerarşisinde gerekli olan en yüksek noktada veri alma ve ayarlama kuralını takip eder.Hadi bu örneğe bir göz atalım ve ihtiyaç duyacağımız bazı veri türlerini hayal edelim. çeşitli bileşenler için.

 işlev Uygulama() {
  dönüş(
    <React.Fragment>
      <Başlık />
      <İçerik />
      <Kenar çubuğu />
      <Altbilgi />
    </React.Fragment>
  );
}

Sitenin adı gibi bir şeyin hem <Header /> hem de <Footer /> tarafından kullanılabilir olması gerekebilir. Belirli bir sayfanın ana içeriğinin <Content /> öğesine iletilmesi gerekir. Bazı ek pencere öğesi verilerinin <Kenar çubuğu /> bölümüne gitmesi gerekebilir.

 işlev Uygulama() {
  const siteTitle = getSiteTitle();
  const widget'ları = getWidgets();
  const mainContent = getPageContent();
  dönüş(
    <React.Fragment>
      <Başlık siteTitle={siteTitle} />
      <Content mainContent={mainContent} />
      <Kenar çubuğu widget'ları={widget'lar} />
      <Altbilgi siteTitle={siteTitle} />
    </React.Fragment>
  );
}

Bu öznitelik adları oluşturma ve onlara bir değer atama kuralı, verileri bir bileşene nasıl ilettiğimizdir.

Artık <Header /> ve <Footer /> siteTitle'a erişebilir, <Content /> mainContent'e erişebilir ve <Sidebar /> ihtiyaç duyduğu widget'lara erişebilir.

Önemli bir not, bir bileşene bu veri aktarma modelinin verileri yalnızca bir düzeyden geçmesidir. <Header /> içindeki bileşenler, siteTitle'a otomatik olarak erişemez.

 function Başlık(sahne) {
  dönüş(
    <başlık>
      <p>Burada {props.siteTitle} dosyasını görebiliriz.</p>
      <PageHeader siteTitle={props.siteTitle} />
      <PageSubHeader />
    </header>
  );
}

Burada <Header /> içinde props.siteTitle çağırabileceğimizi ve ona aktardığımız değere erişebileceğimizi görebilirsiniz. Ancak, <PageHeader /> bileşeni içinde siteTitle'a erişmek istiyorsak, bu bilgiyi de manuel olarak aktarmamız gerekir.

Bir bileşen, prop olarak bir değer aldığında, onu değiştirmemelidir. Aksesuarlar, bir bileşen ağacından değişmez veri olarak geçmelidir. Bu, bir pervaneye başvuran herhangi bir bileşenin, alt bileşenlerin üst öğesiyle aynı değere başvurmasını sağlar.

Bir prop'un değeri, yalnızca prop'un değerini orijinal olarak ayarlayan ve onu bileşen ağacından geçirmeye başlayan bileşende değiştirilmelidir. Yukarıdaki örnek kodumuzda, <App /> bileşeni siteTitle değerini değiştirebilir, ancak <Header /> veya <PageHeader /> bileşenleri değiştirmemelidir.

Bir React uygulamasında dinamik verilerin nasıl güncellendiğinin akışını anlamak, durum tartışmasını ve olay işleyicilerinin sahne olarak nasıl iletilebileceğini içerir.

React Bileşen Durumlarının Açıklaması

Öğrendiğimiz gibi, veriler aksesuarlar olarak bileşenler aracılığıyla değişmeden aşağı akar. Veriler, tüm alt bileşenlerin bilgi ihtiyacının sahne olarak iletilmesi için gerekli olan ağaçtaki en yüksek bileşene ayarlanır.

Bazı durumlarda, bu veriler bir kez alınır ve değiştirilmesi gerekmez. Çoğu durumda, bu verilerin dinamik kalması ve herhangi bir zamanda güncellenebilmesi ve bu güncellemenin tüm alt bileşenlere yansıtılması gerekir.

React'te değişen verileri takip etmek için bir React durum nesnesine ve durum değerini güncellemek için bir dizi yardımcı fonksiyona sahibiz.

İşte kendini güncelleyecek bir sayaç örneği. Sayacın değeri, bu bileşen içinde dinamik olan bir değerdir ve bu nedenle, duruma ne zaman güvenileceği konusunda iyi bir örnek teşkil eder. Durumlu bileşenler oluşturmak için işlevler yerine JavaScript sınıflarını kullanmamız gerektiğini unutmayın.

 class Counter, Bileşeni genişletir {
  durum= {
    sayaç:0
  };

  handleCount = () => {
    this.setState({
      sayaç: this.state.counter + 1
    });
  };

  render() {
    dönüş (
      <div>
        <h1>{this.state.counter}</h1>
        <button onClick={this.handleCount}>Sayım!!</button>
      </div>
    );
  }
}

Şimdi, bu durumun yalnızca bu bileşene yönelik olduğunu not etmek önemlidir. Sayaçtaki durumun değeri, alt veya üst bileşenler tarafından kullanılamaz.

Bu nedenle, aşağıdaki gibi daha karmaşık bir örnekte, alt öğeye bir destek olarak sayacın değerini aktarmamız gerekir.

 class Counter, Bileşeni genişletir {
  durum= {
    say:0
  };

  handleCount = () => {
    this.setState({
      say: this.state.count + 1
    });
  };

  render() {
    dönüş (
      <div>
        <PageHeader sayısı={this.state.count} />
        <button onClick={this.handleCount}>Sayım!!</button>
      </div>
    );
  }
}

<Counter /> bileşenindeki durumu her güncellediğimizde <PageHeader /> count prop güncellenir

 function PageHeader(sahne) {
  <h1>{props.count}</h1> döndür; 
}

Bu yaklaşımla ilgili güzel olan şey, durum güncellendiğinde, bir prop değeri durum olarak ayarlanmış herhangi bir alt bileşene otomatik olarak yeni bir değerin aktarılmasıdır.

Bu, dinamik veriler için tek bir doğruluk noktasına sahip olmamızı sağlar. Gerçeğin kaynağı, tek bir bileşenden yönetilen durumdaki değerdir. Bu değerin alt bileşenlerdeki tüm örnekleri, bu bileşenin dışında değiştirilmemesi gereken, sahne olarak alınan değişmez değerlerdir.

Hiyerarşide bu bileşenin üzerinde görünen bileşenler, yalnızca aksesuarlar aracılığıyla aktarıldığı için bu verilere erişemez. Verilere ihtiyaç duyan her şey için erişilebilir olması için neden hiyerarşide daha yüksek bileşenlerden durumu belirlemeye ve yönetmeye çalıştığımızı bir kez daha görüyoruz.

Uygulamanız üzerinden tonlarca sahne malzemesini manuel olarak geçirme gereksinimini ortadan kaldıran, üst düzey bileşenler ve bağlam API'si gibi başka mimari kalıplar da vardır. Bunları daha sonra daha derinlemesine inceleyeceğiz. Şimdilik, kısayolları kullanmaya başlamadan önce işlerin genel olarak nasıl çalıştığına dair bu üst düzey genel bakışı anladığımızdan emin olmak istiyoruz.

React'te Bileşen Durumlarını Güncelleme

Şimdi, bir alt bileşenden güncellenecek durumu tetiklemek istediğimizde ne olur?

Örneğin, yukarıdaki örnekte ana <Counter /> bileşenimizde sabit kodlanmış bir düğme yerine bir <Button /> bileşenine sahip olmak istediğimizi hayal edin. Bu aslında karmaşık uygulamalarda oldukça yaygındır.

Bunun React dünyasındaki çözümü, durumu setState ile güncelleyen olay işleyici işlevini bir prop olarak iletmektir. Daha sonra herhangi bir alt bileşenden çağrılabilir, ancak eylem, durumu ayarlayan ve onu güncelleme yeteneğine sahip olan orijinal bileşende gerçekleşir. Bunun için başka modeller de mevcuttur, ancak bu yaklaşım en temel olanıdır.

Fonksiyonları parametre olarak geçirmeye aşina değilseniz, tamamen geçerli bir Vanilla JavaScript'tir.

Durum güncellendiğinde, aksesuarlar aracılığıyla bileşen hiyerarşisinden geçirilecektir.

İşte bunun nasıl görüneceğine dair bir örnek.

 class Counter, Bileşeni genişletir {
  durum= {
    say:0
  };

  handleCount = () => {
    this.setState({
      say: this.state.count + 1
    });
  };

  render() {
    dönüş (
      <div>
        <PageHeader sayısı={this.state.count} />
        <Button handleCount={this.handleCount} />        
      </div>
    );
  }
}

function PageHeader( sahne ) { 
  dönüş( 
    <h1>{props.count}</h1>
 ); 
}

işlev Düğme( sahne ) {
  dönüş(
    <button onClick={props.handleCount}>Sayım!!</button>  
  );
}

Burada React'in veri akışını nasıl ele aldığına dair basit bir örnek görebiliriz. Veriler için tek bir doğruluk noktası vardır. Bu, durum kümesinde bulunur ve tek bir bileşenden güncellenir. Veriler, props aracılığıyla iç içe geçmiş bir bileşen ağacından tek yönlü bir akışla iletilir.

Durumun orijinal olarak ayarlandığı yer dışında bir bileşenden güncellenmesi gerekiyorsa, bir olay işleyicisi gerekli alt bileşene bir destek olarak aktarılabilir. Bu, verileri değişmez ve tek yönlü tutar, çünkü bir alt bileşen bir değişikliği tetiklese bile, bu değişiklik orijinal bileşende daha yüksekte gerçekleşir.

Aşağıdaki gibi bir durumdan bir prop değerini bir şeye atadığımızda, durum değiştiğinde o prop değeri otomatik olarak güncellenecektir.

 <PageHeader sayacı={this.state.count} />

Bu prop değerine başvuran diğer tüm alt bileşenler de güncellemeyi otomatik olarak alacaktır. Bu, React'teki veri akışının güzelliğidir.

Geçmişte JavaScript ile ilgili bu gibi sorunlara nasıl yaklaştığınıza bağlı olarak, buna alışmak biraz zaman alabilir. Ancak bunların hepsi, React'i açıklamak için daha derine inebilmemiz için iyi bir başlangıç ​​noktası olarak hizmet etmelidir.