Kafanızı bu beş faktörle tepki verir

Sep 11, 2025

Nasıl Yapılır

Reakti Verme, Facebook'tan kullanıcı arabirimleri oluşturmak için JavaScript kütüphanesi ve bir şans verene kadar fındık gibi görünüyor. Beş anahtar kavramları anladığınızda işler çok daha kolaylaşır. Bunlara beş zihin vardiyası diyoruz. Onlar şunlardır: bileşenler, jsx, durum, yaşam döngüsü yöntemleri ve tek yönlü veri akışı.

01. Bileşenler

Bileşenler daha karmaşık işlevsellik sağlamak için birleştirilebilecek kod parçalarıdır. Başvurunuzu bileşenlere bölediğinizde, güncelleme ve sürdürmeyi kolaylaştırır. Reaksiyonda, bileşenler daha da önemlidir: Sadece onları programlamazsınız, bu bileşenlerin nasıl bir araya geldiğini düşünerek uygulamanızı tasarlarsınız.

Bir örnek olarak aşağıdaki arayüzü kullanalım. Üç parçaya nasıl bölünebileceğini görebilirsiniz: Yeni bir randevu rezervasyonu için bir kutu, mevcut randevuları görüntülemenizi sağlayan bir liste görünümü ve onlara bakmak için bir arama kutusu.

An image showing how easy it is the structure an app into reusable components. — Bu uygulamanın yeniden kullanılabilir bileşenlere nasıl yapacağınızı kolayca görebilirsiniz.

HTML'de, bu uygulamayı böyle bir dizi unsur olarak düşünebilirsiniz:

 & lt; div id = "petappointments" & gt;
  & lt; div sınıf = "addAnpointments" & gt; & lt; / div & gt;
  & lt; div class = "searchAppointments" & gt; & lt; / div & gt;
  & lt; div class = "listappointments" & gt; & lt; / div & gt;
& lt; / div & gt;

Ve bu da reaksiyonda yaptığınız şey. Bir PetAppointments bileşenini çağıran tek bir etiket (& lt; div id = "PetAppointments" ve GT; bu, diğer alt bileşenleri gerektiği gibi çağırır. Böyle bir yapılandırma nesnesi boyunca geçmek için, reaksiyon nesnesinin CreateClass yöntemini kullanırsınız.

 var Maininterface = reaact.createClass ({
  kılmak: işlev () {
    dönüş (
      & lt; div classname = "arayüz" & gt;
        & lt; addappointment / & gt;
        & lt; searchappointments / & gt;
        & lt; listappointments / & gt;
      & lt; / div & gt;
    )
  } // render
}); //Ana arayüz

Reaktdom.render (
  & lt; anaInterface / & gt;
  belge.getElementbyid ('PetAppointments')
); // render

İki render yöntemi vardır. MainInterface sınıfında, tarayıcıya gönderilecek maddeleri ve reaktvom.render yöntemi,

Bileşenler, kodu yazıp bakımı kolaydır. Uygulamalarınızı bir dizi bileşik olarak düşünmeyi ve düzenlemeyi öğrendikten sonra, bina kompleksi uygulamaları daha kolay hale gelir.

02. JSX

Jsx Muhtemelen en büyük zihin değişimlerinden biri ve kütüphanenin bu kadar garip görünmesinin nedenlerinden biridir. JSX, XML kodunu JavaScript ile birleştirmenize olanak sağlayan JavaScript'e bir uzantıdır.

Bu, html içinde JavaScript eklemenizi sağlayan bıyık gibi fışkırtma dillerinde olan şeylerden bir çeşittir. Ancak JSX, Javascript'e çevirilir (transpiled). Yani sadece bir şablon inşa etmiyorsunuz, ancak bir dizi JavaScript ifadesine dönüştürülen bir yapı. Şablonlama dillerinin aksine, çalışma zamanında yorumlanmak zorunda değildir. Bir örneğe bakalım.

 & l li scresname = "PET-MEDIA MEDIA" KEY = {DISPIT} & GT;
  & lt; div classname = "PET-info Media-Body & GT;
    & lt; div classname = "PET-HEAD" & GT;
      & lt; span classname = "PET-NAME" & GT; {this.state.data [index] .PetName} & lt; / span & gt;
      & lt; span classname = "APT-TARİH-sağ" & GT; {this.state.data [index] .aptdate} & lt; / span & gt;
    & lt; / div & gt;
    & lt; div classname = "Owner adını" & gt; & lt; span classname = "Etiket-item" & GT; sahibi: & lt; / span & gt;
    {this.state.data [index] .Ownername} & lt; / div & gt;
    & lt; div classname = "apt-notes" & gt; {this.state.data [index] .ptnotes} & lt; / div;
  & lt; / div & gt;
& lt; / li & gt;

Randevularımızı çıkarmak için bu kodu kullanabiliriz. Bu, düzenli bir şablonlama dilini kullanmak gibi bir şey hissediyor, bu yüzden JSX ile ilgili birkaç küçük özelliği öğrenmek dışında, hızlı bir şekilde toplayabilirsiniz.

JSX kullanan garip kısım, dilin kendisini öğrenmez; JavaScript kodunuza html koymanın gerçeğinin üstesinden gelinmesi gerektiği gibi görünüyor ... iyi, yanlış. Ancak, tek bir yerde yaşayan her bileşen için tüm kodlara sahip olmak gerçekten güzel.

03. Devlet

An image displaying the user clicking on a red X – which is captured at the component level. — Kırmızı XS'den birine tıklamak, bileşen düzeyinde yakalanır, ancak ana bileşende sahne aracılığıyla bir yönteme referanslar.

Üçüncü Mind Shith, reaksiyonda devletle çalışmayı öğreniyor. Devlet, başvurunuzun en üstteki bileşeninde saklanır ve uygulamanızda neler olduğunu yönetir. Uygulamanız başladığında ne olacağını yapılandırabileceğiniz GetInInstate adlı özel bir yöntem var.

Numune başvurumda, ilk durum böyle kuruldu:

 var Maininterface = reaact.createClass ({
  getinitialstate: fonksiyon () {
    dönüş {
      aptbussisible: false,
      Orderby: 'PetName',
      OrderDir: 'Asc',
      QueryText: ''
    } //dönüş
  }, // getinitialstate

Uygulamam için global değişkenler kurmaya benziyor gibiyim ama bu değişkenleri değiştirmek, bileşenlerin nasıl yapıldığını kontrol eder. Uygulamamda bir şey değişkenin değerini değiştirirse, bileşenlerim yeniden oluşturur. Örneğin, siparişin değeri değişirse, randevuların listesi yeniden sıralayacaktır.

Bir bileşen yazdığınızda, uygulamanın durumunu değiştirmek kolaydır. Bileşenleri yazmak daha kolaydır, çünkü sadece bileşenin ne yaptığına odaklandınız. İşte benim uygulamamın son listesi bileşeni:

 Var reakt = gerektirir ('tepki');
var aptlist = reakt.createClass ({

  Handledelete: Function () {
    this.props.ondelete (this.Props.Whichitem)
  }

  kılmak: işlev () {
    dönüş(
      & l li scresname = "PET-MALID MEDIA" & GT;
        & lt; div classname = "Media-sol" & gt;
          & lt; button classname = "PET-DELETE BTN BTN-XS BTN-DANGE" ONCLICK = {this.handledelete} & gt;
          & lt; span classname = "Glifikon Glifikon-Kaldır" & GT; & LT; / Button & GT;
        & lt; / div & gt;
        & lt; div classname = "PET-info Media-Body & GT;
          & lt; div classname = "PET-HEAD" & GT;
            & lt; span classname = "PET-ADI" & GT; {this.Props.Singleitem.PetName} & lt; / span & gt;
            & lt; span className = "APT-TARİH-sağ" ve GT; {this.props.singleitem.aptdate} & lt; / span & gt;
          & lt; / div & gt;
          & lt; div classname = "Owner adını" & gt; & lt; span classname = "Etiket-item" & GT; sahibi: & lt; / span & gt;
          {this.Props.SingleItem.OwnNername} & lt; / div & gt;
          & lt; div classname = "apt-notes" & gt; {this.props.singleitem.aptnotes} & lt; / div & gt;
        & lt; / div & gt;
      & lt; / li & gt;
    ) // dönüş
  } // render
}); // aptlist

module.exports = aptlist;

Bileşen sadece iki şeyle ilgilidir. İlk önce, uygulamanın mevcut durumuna göre randevuların listesini gösteren. İkincisi, kırmızı 'X'lerden birine tıklayınız.

'X' üzerine tıklamak, uygulama durumuna bir değişiklik yapacak, bu bileşenin yeniden oluşturmasına neden olacaktır. Verilerde neler olduğu konusunda endişelenmiyorum, sadece mevcut verilerin nasıl görüntüleneceği ile.

Liste bileşeni yalnızca bir şeylerle ilgilidir. Başka bir yerde olanlar için endişelenmek zorunda değil. Uygulamalar inşa etmenin mükemmel bir yoludur ve takıldığında, neden kodunun neden üstün bir yol olduğunu göreceksiniz.

04. Tek yönlü veri akışı

An image showing the user inputting information into a search component, demonstrating how React will re-render specific data on the go. — Burada arama bileşeni yalnızca verilerin durumunu değiştirmekle ilgilidir. Liste, sinekteki yeni verilerle tekrar telafi edecek

Bir sonraki zihin kayması tek yönlü veri akışını sevmeyi öğrenmektir. Reaksiyonda, başvurunuzun durumu en üstteki bileşende bulunur. Bir alt bileşende değiştirmeniz gerektiğinde, en üstteki bileşene bir referans oluşturur ve orada tutun. Bu alışmak biraz zor. İşte bir örnek:

 Var reakt = gerektirir ('tepki');
var aptlist = reakt.createClass ({
  Handledelete: Function () {
    this.props.ondelete (this.Props.Whichitem)
  }
  kılmak: işlev () {
    dönüş(
      & l li scresname = "PET-MALID MEDIA" & GT;
        & lt; div classname = "Media-sol" & gt;
          & lt; button classname = "PET-DELETE BTN BTN-XS BTN-DANGE" ONCLICK = {this.handledelete} & gt;
          & lt; span classname = "Glifikon Glifikon-Kaldır" & GT; & LT; / Button & GT;
        & lt; / div & gt;
      & lt; / li & gt;
      ...
    ) // dönüş
  } // render
}); // aptlist

module.exports = aptlist;

Bu, randevuların bir listesini oluşturan modülün basitleştirilmiş bir versiyonudur. Listemiz, bir olay işleyicisini yönettiğimiz bir silme düğmesine sahiptir. Bu, ONClick'in özel bir reaksiyon sürümüdür. Etkinlik işleyicimiz, alt modül için yerel olan HandleDelete işlevini çağırır. Yerel fonksiyonumuz, sahne adı verilen bir nesnede başka bir işleve bir referans oluşturur. Sahne, ana modüllerin alt modüllerle nasıl iletişim kurduğudur.

Ana modülde, modülü göstermek için kullandığınız etikete bir öznitelik oluşturacaksınız. Tıpkı bir html etiketine bir özniteliğe geçmek gibi görünüyor:

 APTLLIST ONDELETE = {this.DelleMeMessage} / & gt;

Ve sonra, uygulamanın durumundaki değişikliği ele almak için ana bileşende kendi yönteminizi oluşturursunuz. Ana modüldeki durumu tutmak, alt modüllerinizin daha verimli hale getirilmesine yardımcı olur. Kodu korumak daha kolaydır, çünkü eylemin çoğu bir yerde gerçekleşir.

05. Yaşam Döngüsü Yöntemleri

Reakt ile ilgili en iyi şeylerden biri, modüllerinizin işlenmesini yönetme şeklidir. Modülleriniz, DOM'u güncelleme konusunda endişelenmenize gerek yok, yalnızca başvurunuzun durumuna tepki veriyor. Durum değiştiğinde, reaksiyon uygulamanızın bileşenlerini yeniden oluşturur. Bunu sanal dom olarak adlandırılan dom'un kendi versiyonunu yaratarak yapar.

Ancak bazen işleme ömrü ile yanıt olarak bir şeyler yapabilmeniz gerekir. Yaşam döngüsü yöntemlerini girin. Bunlar, reaksiyona, uygulamanın yürütülmesindeki farklı noktalarda görevleri ele almasını isteme yollarıdır.

Örneğin, AJAX istekleri aracılığıyla dış verileri yüklemenizi sağlayan LifeCyle yöntemleri vardır:

 ComponentDidmount: Function () {
  this.ServerRequest = $ .get ('./ js / data.json', işlevi (sonuç) {
    var tempapts = sonuç;
    this.setstate ({
      MyAppointments: Tempapts
    }); // setstate
  } .bind (buna));
}, // ComponentDidmount

Burada, ComponentDidmount, ilk işleme tamamlandıktan sonra bir şey yürütmenizi sağlar. Bu, AJAX içeriğini yüklemek, zamanlayıcıları kurmak ve benzeri bir yer. Uygulamanın yürütülmesini farklı noktalarda yakalamanıza izin veren birçok yaşam döngüsü yöntemi vardır. Uygulamaları inşa ederken, React'ın sanal domundan dolayı gereklidirler.

Rething reakt

REACT, Web Uygulamalarıyla Çalışma şeklinizin yeniden düşünülmesini gerektirir, ancak bu beş zihin değişiminin faydalarına odaklanmaya odaklanırsanız, kütüphanenin neden bu kadar inanılmaz derecede popüler hale geldiğini ve arayüzleri oluşturmanın harika bir yoludur.

Ray Villalobos'un gösterdiği bu makale - başlangıçta NET'in 286 sayısında yayınlandı, dünyanın web tasarımcıları ve geliştiricileri için dünyanın en çok satan dergisi. Net'e abone olun .

Reaksiyon becerilerinizi daha da iyileştirmek ister misiniz?

Image with the details on Kristijan Ristovski’s workshop – Learn How to Think in React – at Generate London on 19-21 September 2018. — Kristijan Ristovski atölyesine veriyor. 19-21 Eylül 2018 tarihleri arasında Londra'yı Nasıl Tecr.

Reakt hakkında daha fazla bilgi edinmekle ilgileniyorsanız, biletinizi aldığınızdan emin olun. 19-21 Eylül 2018 tarihleri arasında Londra'yı oluşturun . REACT AKADEMİ'Yİ KURULDUĞU YAPILAN Sizzy.co ve ok-google.io Kristijan Ristovski atölyesini sunacak - tepki vereceklerini öğrenecek - en iyi uygulamaları araştıracak ve size bir uygulama inşa etme sürecinde karşılaşabileceğiniz gerçek sorunlara çözümler için çözümler öğreteceklerini öğrenmek.

19-21 Eylül 2018 tarihleri arasında Londra'yı oluşturur. Şimdi biletini al .

İlgili Makaleler:

10 Uzman Reactjs Bugün Bilmeniz Gereken İpuçları
Reaksiyona sahip bir gösterge paneli uygulaması oluşturun
Reaksiyona sahip basit bir müzik çalar kurmak

Kafanızı bu beş faktörle tepki verir

01. Bileşenler

02. JSX

03. Devlet

04. Tek yönlü veri akışı

05. Yaşam Döngüsü Yöntemleri

Rething reakt

Reaksiyon becerilerinizi daha da iyileştirmek ister misiniz?

Nasıl Yapılır - En Popüler Makaleler

Nasıl Test Edilir Siteleri ve Uygulamaları

Blender'in Eevee ile iç mekanların nasıl oluşturulması

Houdini 17'de Arazi Yapı

Adım Adım: Corel Painter'da Yağ Boya Nasıl Yapılır

Bir AR uygulaması nasıl oluşturulur

VR kreasyonlarınızı geliştirmek için 5 ipucu

Daha Hızlı Web Siteleri Nasıl Yapılır

Photoshop'ta bir Snapchat Geofilter Nasıl Oluşturulur

Kategoriler