WordPress geliştiricilerine tepki vermenin temelleri
Tork için son yazımda, WordPress’in yeni Gutenberg editörünün React’i nasıl kullandığını yazdım. Ayrıca WordPress geliştiricilerinin tepki vermeyi öğrenmesi gerekip gerekmediği fikrimi de verdim. Gutenberg blokları yapmak için tepki vermenize gerek olmasa da, bunu yapmanız için bazı nedenler veriyorum. Bu nedenle sizin için mantıklısa, iyi haber, bu, React ile başlamanız ve Gutenberg’in gelişimi için React kullanımı hakkında bir dizi yeni yazı başlatmanız için bir gönderidir. Bu serinin ilk birkaç bölümünde başlamadan önce, tarayıcılar için güvenli olan JavaScript kullanmaya devam edeceğim. Ama çok endişelenmeyeceğim. IE8’e söz veremem, ancak bu kod modern bir tarayıcıda çalışacaktır.
Evet, çapraz tarayıcı uyumluluğu konusunda endişelenmelisiniz. Bu tepki olan bir şeydir ve oluşturma aracınız çok yardımcı olabilir. Bu ilk birkaç yayındaki temel bilgileri inceledikten sonra, Safari’nin yeteneklerinin hangi sürümüne dair daha az endişe ile bu sorunların çoğunu aşabilirsiniz. Ama şimdilik, görmezden gelelim ve basit kalalım. Hello World’deyiz, üretime hazır bir web uygulaması değil. React/ Reactdom Halo World şimdilik, sadece React’i kullanmaya ve Codepen’de çalışmaya devam edeceğiz. Bazı temel reaksiyonları tartıştıktan sonra, aynı kodu Gutenberg bloğunda nasıl kullanacağınızı göstereceğim. Her Codepen’e bir bağlantı var. Her birini görebilir veya Hello World ile başlayabilir ve derlediğim her adımı oluşturabilirsiniz.
Bu arada, bu kodepenlerin tümü React belgelerindeki ilk kodepenlere dayanmaktadır. React dokümantasyonu çok iyi ve oynayabileceğiniz codepen dolu. Şiddetle tavsiye edilir. Amacım bunu WordPress konseptine olabildiğince çabuk uygulamak, ancak benzer bir konsept gösteriyorum, her iki yayınımı da okumanızı ve React sitesinde reaksiyona giriş yapmak için interaktif öğretici React’i takip etmenizi öneririm. Merhaba En Temel Dünya React, içeriği ekrana sunmanın süper lüks bir yoludur. Ekran HTML belgeleriyle yapıldığında, örneğin tarayıcıya yüklenmiş bir web sitesi ise, ekrana tepki vermek için Reactdom kullanırız. Nasıl çalıştığına dair süper temel bir örnek: https: //codpen.io/josh412/pen/vgkoom? & Editors = 0010# react.dom.render () iki argüman gerektirir. Birincisi, oluşturulacak HTML veya reaksiyon bileşenidir. İkincisi, onu oluşturan DOM düğümüdür. Bu kod, öğelerin içeriğini React uygulamasıyla “kök” kimliğiyle değiştirir. Bu temel bir uygulamadır, sadece bir dize, ancak bu oluşturabileceğimiz bir uygulamadır. Reaktom React’den ayrı. Reactdom hakkında size gösterdiğimden daha fazlasını bilmenize gerek yok. Karmaşıklık seviyesinin ötesine geçmeniz gerekmiyorsa, React sizin için bir tarayıcı ile tüm etkileşimleri yönetebilir. Ayrıca, Reactdom gibi React Native ile aynı bileşenleri, ancak HTML kullanmayan hücresel uygulamalar için kullanabilirsiniz. Ayrıca, Gutenberg Block ile çalışırken, büyük olasılıkla asla buna ihtiyacınız olmayacak, WordPress onu ele alıyor.
Testi tartıştığımda bu serinin ilerleyen saatlerinde, bileşenlerinizi sahte bir DOM’da nasıl oluşturacağınızı göstereceğim. Bu, arayüzünüzün nasıl görüntülendiğini içeren bir yazma testi yapar. React.CreateElement ile merhaba demek önceki örnekte, bir dizeyi oluşturacak içerik olarak kaçırdık. İyi yapılandırılmış bir HTML’ye sahip olabilmemiz ve React kullanarak performans ve uyumluluğun faydalarından yararlanabilmemiz için React’in bizim için HTML’mizi oluşturmasına izin vermeye başlayalım. React’in HTML oluşturmak için iki temel yolu vardır. Bir HTML öğesi oluşturmak için React.CreateElement işlevini ilk kullanan görelim. İşte React.Createelement.https: //codepen.io/josh412/pen/qmazwb? & Editors = 0010 kullanılarak yeniden yazılan merhaba dünyamızın bir örneği bu işlev üç argüman alır. Birincisi element türüdür. İkinci Seviye HTML başlık öğesinde içeriği oluşturmaya reaksiyonu söylemek için “H2” i geçtim. İkinci argüman, HTML özniteliklerinin nesnesidir. Şimdilik atla. Bir sonraki argüman içeriktir. Bir dize geçtim, ama çocuklardan bir dizi geçirebilirim. Örneğin, siparişlerin bir listesini yapmak için Li öğesinin dizisini UL öğesine devam ettireceğiz. Bunun gibi: https://codepen.io/josh412/pen/boqxey Nesne, öğe için HTML öznitelikleri içerir. Sınıf ve kimlik özniteliğini listemize ekleyelim:
https://codepen.io/josh412/pen/gdlvjv Sınıf özniteliği, “className” nesnesine bir anahtar ekleyerek ayarlanır. Mümkünse React HTML’yi takip eder. JavaScript “Class”, ES6 sınıfına html “sınıfı” özniteliği değil, bu nedenle React bunun etrafında çalışır. HTML’de onClick özniteliğini herhangi bir öğeye devam ettirebiliriz. React de böyle çalışır. Örneğin, bir düğmeye bakalım:
https://codepen.io/josh412/pen/mqjgwv?&editors=0010 Bu durumda, “OnClick” özelliğini ekledik. Bu işlev olayın nesnesinden geçer. Varsayılan eylemleri önlüyorum ve sonra uyarıları tetikliyorum. React.CreateElement ne yapar? Bu işlev, HTML öğeleri gibi nesneleri yapar. Ama React Magic ile emildi. Bu nesneye her verdiğiniz veriler, React HTML’nizi en iyi şekilde günceller. Daha sonra tartışacağız. Şimdilik, çok fazla endişelenmeyin, bu sadece bir sihirli HTML. “Her ileri teknoloji sihirden ayırt edilemez.” – Arthur C. Clarke
JSX’e ne dersin? Genellikle React Createelement ile yazılmaz, çünkü çok zahmetli olacaktır. Tersine, HTML ve JavaScript arasında bir haç gibi JSX kullanma eğilimindeyiz. Hello World örneğimizdeki değişkenleri nasıl kullanacağımızı görelim. Değişkenleri kullanmak, verileri dinamik olarak güncellemek için React’i kullanan ilk adımdır: https://codepen.io/josh412/pen/mqjmwr?edors=0010 Ek operatörlerle bir dize ile temasa geçerek sorunları çözüyorum. Başarılıydı, ancak şablon dilini kullanmayı tercih ediyorum. Örneğin, JSX. Şuna bakalım: https: //codepen.io/josh412/pen/yxadyw? & Editors = 0010 Bej ne yapıyor? JSX aslında React.CreateElement için farklı bir sözdizimidir. Webpacks veya parseller gibi araçlar oluştururken JSX’i React.CreateElement kullanan işlevlerle derler. JSX, React.CreateEdeememem için sadece bir kısayol. Onsuz, React yazmak zahmetli olacak. Vuejs ayrıca bir oluşturma işlevine sahiptir. Vuejs, oluşturma Vue işlevine derlenen tek bir dosya bileşeninin kullanımını teşvik eder. React ile temel bir WordPress Post Bileşeni yapın İlk bileşenimizi yapalım. React bileşeni, kullanıcı arayüzünün bazı bölümlerini oluşturmak için yeniden kullanılabilen bir JavaScript işlevidir. WordPress API REST tarafından döndürülen WordPress yayınlarını görüntülemek için “Post” adlı bir bileşen oluşturarak başlayalım:
Bu işlev “sahne” argümanı alır. Öğretim yardımcıları önemli bir reaksiyon kavramıdır. Bu, bileşene iletilen geçerli veri durumudur. React sahne indirmekle ilgilidir, zamanla göreceksiniz. Normal bir işlev gibi görünmeye başladı, ancak JSX’i iade ettik. JSX HTML’ye benziyor, büyük fark, yayın başlığını görüntülediğimiz yer. Sabit kodlama yazı başlığı yapmak yerine, PROPS nesnesinin referanslarını eklemek için kıvırcık braketler kullanıyoruz, bu durumda props.post.title.rendered. Bu, Hello World’ümüze daha önce eklenen yeni bir bileşendir: https://codepen.io/josh412/pen/gxjbox https://codepen.io/josh412/pen/mqjmeg?edors=0011’in bir post desteği var Bileşende ölçeklenmez. Değişkene geçelim ve posta içeriğini ekleyelim. https://codepen.io/josh412/pen/mqjmeg Bileşenlerden bileşenleri, yineleyicileri kullanarak derler Son bölümde, tekrar kullanımı kolay olacak şekilde reaksiyonda bileşenler yaptığımızı söylüyorum. Şimdi yayınları görüntülemek için bir bileşenimiz var, bir yayın listesini görüntülemek için tasarlanmış diğer bileşenlerde tekrar kullanalım. Bu bize bir yuva bileşeninin nasıl yapılacağını ve React’teki öğeler koleksiyonu aracılığıyla nasıl yineleme yapacağımızı gösterecektir. Yinelemeyi daha derinden tartışacağım. Şimdilik, işleri olabildiğince basit hale getirelim. İşte gönderme bileşenleri:
