WordPress Kullanıcıları için JS React: Temel Giriş
15 yıldan fazla bir süredir, WordPress, bir sayfa portföyünden tüm e -ticaret platformuna kadar bir şey oluşturmanıza izin veren en popüler ve eksiksiz CMS çözümü haline geldi. WordPress, güncellemeler, yangın, yazar, DB katmanları ve çoğu ön uç gibi tüm arka uç altyapısı için PHP kullanır. Bununla birlikte, diğer popüler çerçeveler gibi, WordPress de son zamanlarda gelişmek zorunda kaldı. Web için JavaScript uygulamalarının yanı sıra masaüstü bilgisayarların ve orijinal hücresel uygulamaların artan potansiyeli ve gücü göz önüne alındığında, WP REST API, WordPress PHP çekirdek mirası ile JavaScript’in canlanması arasındaki boşluğu kapatmaya çalışır. Bunun iki nedenden dolayı WordPress için büyük bir adım olduğuna inanıyorum:
Mevcut WP web sitesi, daha iyi bir UI deneyimi oluşturmak için React/Vue veya diğer ön uç kitaplıklarını kullanabilir.
Tersine, web geliştiricileri, seçtikleri bir yığınla kolayca entegre edilebilecek sektör standartları olmadan CMS alırlar.
Bu herkes için bir kazan-kazan durumu. Bu makalede, enerjimizi arka uç WordPress için Frevend React’i inşa etmek için odaklayacağız. Ama önce WordPress API dinlenmesine bakalım. WP Rest Rest API uygulaması API’sının temelleri birkaç yıl önce başladı ve başlangıçta bağımsız bir özellik eklentisi olarak tasarlandı. WordPress V4.4, ‘Clifford’ kod adı ile API REST’den gerçek altyapıyı WordPress’in çekirdeğine tanıttı. Gerçek bitiş noktası, ‘Vaughan’ kod adı ile WordPress v4.7’de ortaya çıktı. WP API, WordPress’i kullanımı kolay ve kararlı ve dostça JSON olmak için başsız bir CMS olarak kullanmanıza olanak tanır.
WordPress’i bir JavaScript yığını ile entegre edecekseniz JSON JSON tercih edilen bir formattır. JSON XML’ye benzer, çünkü bize okunması çok kolay sözdizimini kullanarak verileri verimli bir şekilde aktarma yeteneği sağlar. JSON aslında JavaScript nesnelerinden metin tabanlı gösterimlerden oluşan bir dizedir. Bu, verileri bir dizi anahtar değeri çiftinde saklar. WP gönderilerinden basit JSON örnekleri şöyle görünebilir – {id: 1,
“Başlık”: {
“Rendered”: “Merhaba Dünya”
},
“İçerik”: {
“Rendered”: “WordPress’e hoş geldiniz. Bu senin ilk
İleti. Düzenleyin veya silin, ardından bloglamaya başlayın! ”
}
}
WP REST API’sini kullanarak Complete JSON yanıtı genellikle meta veriler gibi yayınlarla ilgili ek bilgiler içerir. Uygulamanız için bir ön uç veya eklenti teması oluşturmak için ihtiyacınız olan her şeye sahipsiniz.
WordPress’in son noktasının son noktasına halk için çok kolay erişilebilir. WordPress’in en son sürümünü çalıştırırsanız, URL’nin sonuna yalnızca/wp-json/wp/v2 eklemeniz gerekir. Örneğin, LocalHost’unuzda bir WordPress örneği hazırladıysanız, temel uç noktasına 127.0.1/wp-json/wp/v2 adresinden erişebilirsiniz. Çıktıyı güzelleştirmek istiyorsanız, JSON’un tarayıcınızda güzel görünmesini sağlayan JSON sanatçısı uzantısını kullanabilirsiniz. Ekranınızda görüntülenen veriler temel olarak içerik ve meta bilgiler JSON formatında. Burada yaptığınız şey rotayı belirlemek ve tarayıcınızdan sizin için veri almasını istemektir.
Rota ile ne demek istiyoruz? Rota, belirli bir yönteme eşlenmiş bir URL’dir. Çekirdek WordPress rotayı okur ve her ‘/’ nin takip edilmesi gereken belirli bir yolu veya parametreyi temsil ettiğini anlar. Örneğin, bitiş noktası ‘/wp-json/wp/v2/direkler/1’ şeklinde olabilir, burada 1’e eşdeğer bir kimlik olan bir gönderi istersiniz. WordPress API’sı oldukça geniş olduğu için kullanışlıdır. Bu, web sitenizden herhangi bir veri alma ve son noktaya dönüştürme yeteneği anlamına gelir. WordPress’teki neredeyse tüm temel işlevler desteklenir ve gelecekteki tüm özellikler de desteklenecektir. Aşağıda, bu öğreticiyi yazarken desteklenen WordPress API’lerinin bir listesidir: Temel Rota Kaynakları
etiket
/wp/v2/tag
> taksonomi
medya
/wp/v2/medya
>
Gönderi durumu
/wp/v2/durum
>>> >> /Wp/v2/ayarlar
Tema geliştiricileri ve eklenti geliştiricileri, uygulamaları için özel bir bitiş noktası yapabilir. Mevcut tüm sonsuz noktaları kontrol etmek istiyorsanız, Postman gibi uygulamaları indirebilirsiniz. Bu size ateşi keşfetmeniz için özel bir GUI verecektir. Ayrıca, eklentiye güvenmek zorunda kalmadan hemen üçüncü taraf bir başvuruya yangın çağrısı yapabilirsiniz.
Örneği alalım.Dosyaları yüklemek ve çeşitli sürümleri korumak, herhangi bir modern web uygulaması için ayrılmaz bir gereksinimdir.Bu özellikle bir medya dosyası için geçerlidir.WordPress'te, bunu sizin için yapabilecek çok sayıda eklenti var;Ancak, kullanmak için WordPress sunucusuna arama yapmanız gerekebilir.WP API ile, medya işleme mantığı WordPress'ten soyutlanabilir.Üçüncü taraflı yangın çağrılarını sorunun ayrılması açısından doğrudan çok iyi ön uçtan yapabilirsiniz.Görüntüleri ve diğer medya dosyalarını hızlı bir şekilde manipüle etmek için Cloudiny gibi bir kütüphaneyi kullanabilir ve ardından buluta yükleyebilirsiniz.Yüklendikten sonra, görüntüye URL arka uç WP'de saklanabilir.Seçim sınırsızdır ve parçaları istediğiniz şekilde birleştirebilirsiniz.
Şimdi arka ucu WordPress'in React ile nasıl bağlanacağına bakalım. React React ile başlayarak, Web'de kullanıcı arayüzünü ve etkileşimli uygulamayı oluşturmak için bildirici bir ön uç kitaplığıdır. React ile, bileşen olarak bilinen yeniden kullanılabilecek daha küçük bir bağımsız kod parçası yapabilirsiniz. React projesi yaparak ilk bileşenimizi yapalım. React projesi oluşturmanın en popüler yolu, Create-React-uygulamasını çalıştırmaktır. CRA, React'i öğrenmek için rahat bir ortam sunar ve yeni başlayan iseniz yeni bir sayfa uygulaması oluşturmaya başlamanın en iyi yoludur. Bu, ES6 ve WebPack gibi en son JavaScript özelliklerini kullanabilmeniz için geliştirme ortamınızı düzenler. Buna ek olarak, Create-React-App iyi bir geliştirici deneyimi sağlar ve üretim uygulamanızı optimize eder. Makinenizde> = 8.x ve npm> = 5.2 düğümüne sahip olmanız gerekir. Bir proje oluşturmak için aşağıdaki komutu çalıştırın: NPX Create React-App WP-React-DEMO Yukarıdaki komut, WP-React-Demo adını verdiğimiz reaksiyon uygulamamız için bir daha kazanç şablonu oluşturur. WP-React-DEMO NPM CD'si her şey yolunda giderse başlar, Http: // Localhost: 3000///geliştirme sunucusunda yeni oluşturulan uygulamaları sunabilmelidir. Create-React-App tarafından üretilen dizin yapısını görmeyi merak ediyorsanız, görünüşe göre budur: ├ve ReadMe.md ├ve PAKET.JSON ├³³ genel │ ├ ├ ├ ├ ├ ├ ├ └ └ └ └ └ └ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├
Genel Dizini, uygulamayı başlatmak için gereken tüm varlıkları içerir. SRC dizini, yapacağımız tüm JavaScript dosyalarından oluşur ve orada çok zaman harcayacaksınız. LocalHost: 3000'i ziyaret ettiğinizde, index.html dosyası yüklenir. Bir kamu dosyası/index.html açarsanız, orada pek çok şey yoktur. Ancak bu satırı ortada bir yerde bulacaksınız:
Bu, React'in bileşen ağaçlarını uygulamanın köküne tepki verdiği başlangıç noktasıdır.
Bunun anlamı ne? SRC dizinini açın ve index.js'i açın. 'React' den ithalat reaksiyonu;
'./App' den uygulamayı içe aktarın;
Reactdom.render (, document.getElementById ('kök'));
React, belgedeki "kök" kimliği ile öğeler bulmaya çalışır ve daha sonra bileşenleri kök içine enjekte eder. Aslında, uygulama bileşeni oluşturulur ve dönen React logosunun geldiği yerdir. SRC/App.js dosyasını açarak doğrulayabilirsiniz.
"React" den {bileşen} ithalat reaksiyonu;
``/logo.svg '' den logo içe aktarın;
İthal './app.css';
Sınıf uygulaması bileşeni genişletir {
Render () {
dönüş (
Reaction'a Hoş Geldiniz
Başlamak için src/app.js düzenleyin ve yeniden yüklemek için kaydedin.
);
}
}
Varsayılan uygulamayı dışa aktarın;
Temelde bir bileşene benzeyen şey budur. Her bileşen kullanıcı arayüzünüzün parçalarını oluşturur. Başka bir bileşende bir bileşeni yapabilirsiniz ve böyle bir bileşen ağacının yapısını böyle elde edersiniz: HTML'yi neden render () 'da kullanabileceğimizi merak ediyorsanız, bu JSX'in büyüsüdür. JSX, JavaScript için bir sözdizimi uzantısıdır ve JavaScript dosyalarında sıradan HTML kullanmanıza olanak tanır. Resmi belgelerde daha fazla bilgi edinebilirsiniz. Tüm HTML içeriğini sileceğim ve ardından bir
Şöyle işaretleyin:
WordPress blogu
Bileşenler ve reaksiyon durumu bileşenler reaksiyonda yapı taşlarıdır. Her bileşenin sahip olması
Giriş (veya birkaç giriş) yaygın olarak sahne olarak bilinir.Bileşenler için yerel koşullar
Bir şey oluşturan yöntemler (örneğin: rending ()) veya bazı iş mantığını taşıyan yöntemler
Mevcut tüm yayınları alacak ve bunları kullanıcıya gösterecek bileşenler oluşturacağız. Bunu yapmak için önce sınıf için bir yapıcı yazacağız ve yapıcıdaki durumu başlatacağız: yapıcı (sahne) {
süper (sahne);
this.state = {
Başlık: {},
Tarih: "",
İçerik: {}
};
}
Durum JSON'un nesnesidir. Yapıcıdaki içeriğin başlığını, tarihini ve mülkünü beyan ettik. Başlık ve içerik nesnelerdir. Verileri alın ve geçerli durumu güncelleyin, bileşen yüklendiğinde, API'dan veri gönderimi alması ve durumda depolaması gerekir. Post verileri aşağıdaki URL'de mevcuttur: http: // localhost/wp-json/wp/v2/direkler/öyleyse, bu mantığı nereye koyuyoruz? Yapıcı iyi bir seçim gibi gelebilir, çünkü bileşen yapıldığında çağrılır, ancak en iyi seçim değildir. Bunun yerine, yaşam döngüsü yöntemi olarak bilinen bir şey kullanacağız. ComponentDidMount () Yaşam döngüsü yöntemi, bileşen takıldıktan sonra çağrılır. ComponentDidMount () {return Fetch (`http: // wordpress.com/wp-json/wp/v2/direkler/`)
.that ((yanıt) => preppe.json ())
.Htat ((ResponseJson) => {
// Durumu güncelleyin buradan
})
.Catch ((hata) => {
Console.error (hata);
});
}
Yangın çağrısı yapmak için JavaScript'te facto standart olan Getch'i kullanıyoruz. Fetch () parametresi almak istediğimiz URL'dir. Getir, .that () zinciriyle değerlendirebileceğimiz sözü döndürür. İlk blok daha sonra, statüye yerleştirebilmemiz için JSON formatına verilen yanıtı değiştirir. const {başlık, tarih, içerik} = ResponseJson;
this.setState ({başlık, tarih, içerik});
Peki, burada ne oldu? Önce ResponsJson nesnesinin alanını, tarihini ve içeriğini çıkarırız. Burada gördüğünüz garip sözdizimi, yıkım ödevinin sözdizimi olarak bilinir. Bildiğiniz gibi, WP API ihtiyacımız olmayan çok fazla bilgi döndürür. Yıkma görevlerinin sözdizimi, nesnelerin değerini farklı değişkenlere sökmeyi mümkün kılar. Ardından, bileşen durumunu güncellemek için this.setState () kullanıyoruz. SetState () yöntemi nesneyi güncellenmiş bir durum olacak bir parametre olarak alır. WordPress'imizi daha önce tartıştığımız JSX'i geri yüklemek için oluşturma yöntemini yayınlar. Pure HTML'nin aksine, aslında JSX'e bir ifade yerleştirebilirsiniz. Örneğin, alınan yayın başlığını ve başka bir şey yapmamanız gerekiyorsa, bunu yapabilirsiniz: render () {return (
{this.state.title.rendered}
);
}
}
Denemek! Aynı şekilde, {this.state.date} 'ı sabitleyerek tarihi oluşturabilirsiniz. Ancak, durumda depolanan içerik gerçek HTML'den oluşur. HTML sunucudan döndürüldüğünden, onu oluşturmada hiçbir tehlike olmadığını varsaymak güvenlidir. Bu nedenle, içerik oluşturmak için, HazaralarTinnerHtml özniteliğini aşağıdaki gibi yapmanız gerekir: <Div
ClassName = "İçerik"
Tehlikeli setinnerHtml = {{__html: this.state.content.rendered}}
Aşağıda, eylemdeki oluşturma yöntemi (). Render () {
dönüş (
{this.state.title.rendered}
{this.state.date}
);
}
}
Düzenleme için bir dizi ek etiket ve sınıf ekledim. Tüm stillerinizi SRC dizinindeki dosyalara yazabilir ve bunları uygulamanıza aktarabilirsiniz. Bu proje için SRC/APP.CSS'de bir stil bulabilirsiniz. Bir içe aktarma ifadesi eklemeyi unutmayın, eğer değilse, kuvvet çalışmaz. İthal './app.css';
İşte burada. React kullanarak WordPress arka uç ateşiniz için temel bir ön uç yaptınız. Bu, uygulamamızda Hello World'in varsayılanının görünümüdür:
Fiuh özeti! Bir gün içinde çok fazla toprak kapalı. WordPress Rest Ateşi ile başladık ve sonra ateşin sonuna alıştık. Daha sonra, temel olarak WordPress yayınlarını gösteren React uygulamasını en baştan oluşturmaya başladık. WordPress ile React kullanmak, diğer arka uç yangınlarıyla React kullanılarak aynıdır. WordPress ile veri bulmak daha kolaydır ve tam olarak nerede arayacağınızı biliyorsunuz. React'i keşfetmeye yeni başladıysanız, React dokümanlarını başlamak için iyi bir yer olarak tavsiye ederim. Bir sorunuz varsa, yorumlarda sormaktan çekinmeyin.
