React'e Giriş, 2. Kısım

Bu teknolojinin nasıl çalıştığını anlamanız ve böylece daha iyi kod yazmanız ve daha iyi kullanıcı arayüzleri oluşturmanız için size temel bilgileri öğrettiğimiz React girişimize tekrar hoş geldiniz. Bir önceki gönderide, React bileşenlerini basit saf fonksiyonlar olarak nasıl oluşturabileceğinizden bahsetmiştik. Defalarca tekrarladığım mantra, "Bir React bileşeni, bir dizi özellik ( props ) alan ve bir miktar HTML üreten basit bir işlevdir" idi.

React hakkında en son konuştuğumuzda şu soruyla bitirmiştik: eğer bir bileşen bu kadar basit bir fonksiyonsa, onunla nasıl faydalı bir şey yapabiliriz? Pekala, bugün React'in dinamik kısmı hakkında konuşacağız: yani, bir bileşenin kullanıcı olaylarına nasıl tepki vermesini sağlayabiliriz .

Ortamın Ayarlanması

Bu öğreticinin ilk kısmı biraz teori içeriyordu ancak herhangi bir örnek içermiyordu ve bunun için özür dilerim; Bence öğrenmenin en iyi yolu yapmaktır, hadi bunu düzeltelim! Şu andan itibaren size öğreteceğim her şey üzerinde çalışacağımız bir örneğe dayalı olacak, o halde önce kullanacağımız ortamı kuralım.

Üzerinde çalışabileceğiniz bir WordPress sitenizin yanı sıra geliştirme araçları node ve npm . Durum böyle değilse, bu yazıda yerel bir WordPress kurulumu oluşturmak için Lando'yu nasıl kullanabileceğinizi açıkladım ve npm belgelerinde node ve npm kurmak için bilmeniz gereken her şey var.

İlk olarak, React bileşenlerine sahip olacağımız basit bir WordPress eklentisi oluşturalım. Bunu yapmak için wp-content/plugins içinde react-example adlı bir klasör oluşturun ve aşağıdaki içerikle react-example.php dosyasını içine koyun:

 <?php /** * Plugin Name: React Example * Description: Example. * Version: 1.0.0 */ namespace React_Example; defined( 'ABSPATH' ) or die(); function add_page() { add_menu_page( 'React Example', 'React Example', 'read', 'react-example', function () { echo '<div></div>'; } ); } add_action( 'admin_menu', __NAMESPACE__ . '\add_page' ); function enqueue_scripts() { $screen = get_current_screen(); if ( 'toplevel_page_react-example' !== $screen->id ) { return; } $dir = untrailingslashit( plugin_dir_path( __FILE__ ) ); $url = untrailingslashit( plugin_dir_url( __FILE__ ) ); if ( ! file_exists( "{$dir}/build/index.asset.php" ) ) { return; } $asset = include "{$dir}/build/index.asset.php"; wp_enqueue_script( 'react-example', "{$url}/build/index.js", $asset['dependencies'], $asset['version'], true ); } add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\enqueue_scripts' );

Eklenti, WordPress Kontrol Panelinize React Example adlı yeni bir sayfa ekler ve içine bir JavaScript dosyası yükler. Şimdilik sonuç boş bir sayfa olmalıdır:

JavaScript'te henüz hiçbir şey uygulamadığımız için bu sürpriz olmamalı.

Gutenberg'e nasıl buton ekleneceğine dair önceki gönderide gördüğümüz gibi, terminalinizde aşağıdaki komutları çalıştırmalısınız (oluşturduğumuz eklenti klasöründe):

 npm init npm install --save-dev @wordpress/scripts

React bileşenlerini yazabilmek ve JavaScript'i aktarabilmek istiyorsanız, ekrandaki talimatları izlemeniz yeterlidir. Oh, ayrıca package.json dosyanızı @wordpress/scripts için gerekli olan tüm ilgili scripts içerecek şekilde güncellemeyi unutmayın.

Son olarak, aşağıdaki index.js dosyasıyla bir src klasörü oluşturun:

 // Import dependencies import { render } from '@wordpress/element'; // Create component const HelloWorld = () => <div>Hello World</div>; // Render component in DOM const wrapper = document.getElementById( 'react-example-wrapper' ); render( <HelloWorld />, wrapper );

npm run build (veya kaynak dosyalarınızı her değiştirdiğinizde kodun otomatik olarak aktarılmasını istiyorsanız npm run start ), sayfayı yenileyin ve işte her şey hazır:

React'te Reaktif Fonksiyonel Bileşen Oluşturma

Şimdi kullanıcı olaylarına tepki veren bir bileşen oluşturalım. Birlikte uygulamamızı istediğim örnek şudur:

+ ve - düğmelerini kullanarak değerini birer birer artırmanıza veya azaltmanıza izin veren basit bir sayaç. Son derece basit olduğunu biliyorum, ancak "veri modeli" ile "kullanıcı arabirimi" arasındaki farkı anlamanıza yardımcı olacağını ve dinamik bileşenlerin uygulanmasında size rehberlik edeceğini umuyorum.

Daha İyi Kod Organizasyonu

Kodumuzun organizasyonunu geliştirerek başlayalım. Bugünkü örnek o kadar basit ki bu adımı atlamak isteyebilirsiniz, ancak en baştan organize olmanın faydalı olduğunu düşünüyorum.

src içinde, uygulamamız tarafından kullanılan tüm bileşenleri içerecek yeni bir klasör components oluşturun. Bugünkü örneğin tek bir bileşeni olan Counter olduğundan, tek yapmamız gereken tek bir dosya, counter.js oluşturmak:

 export function Counter() => ( <p>Counter</p> );

bu, gördüğünüz gibi, bileşenimizi oluşturmaktan sorumlu işlevi dışa aktarır. Ardından, src/index.js örneğini HelloWorld örneğini oluşturmak yerine yeni Counter bileşenimizi içe aktaracak ve kullanacak şekilde değiştirin:

 // Import dependencies import { render } from '@wordpress/element'; import { Counter } from './components/counter'; // Render component in DOM const wrapper = document.getElementById( 'react-example-wrapper' ); render( <Counter />, wrapper );

Ve bu kadar!

Bir Sayaç Bileşeni Uygulamak

Bugünün amacı, bir sayacın değerini takip eden ve birkaç butona tıklayarak arttırabileceğimiz veya azaltabileceğimiz bir bileşen uygulamaktır. Bu, bileşenimizin üç şeye sahip olması gerektiği anlamına gelir:

• Geçerli değeri görüntülemek için bir öğe
• Söz konusu değeri artırmak için A + düğmesi
• A - düğmeyi azaltmak için

Bu bileşeni uygulamak oldukça basittir:

 export const Counter = ( { value } ) => ( <div> <div>Counter: <strong>{ value }</strong></div> <button>+</button> <button>-</button> </div> );

çünkü bileşeninizin desteklerinden biri olarak bir value aldığını ve iki düğme içermesi gerektiğini biliyorsunuz. Ne yazık ki, bu düğmelerin değeri değiştirmesini istiyorsanız, bundan sonra ne yapacağınızı bilemeyebilirsiniz, özellikle de bunu hesaba katarsak, geçen sefer size “bileşenler özelliklerini değiştiremezler” demiştim.

Destek ve Sorumluluk Ayrımı Olarak İşlevler

Unutmayın: Bir React bileşeni, özellikleri alan ve HTML oluşturan bir işlevdir. Bu, bu işlevi kim çağırırsa (veya başka bir deyişle, bu bileşeni kim kullanırsa) ona ihtiyaç duyduğu tüm parametreleri (özellikleri) vermesi gerektiği anlamına gelir.

Sezginiz size zaten sayacın değerinin ihtiyaç duyduğu özelliklerden biri olduğunu söyledi . Bu değerin nereden geldiğini bilmiyoruz (ve umursamıyoruz), ancak bileşenimize bu değerin verileceğini biliyoruz. Ayrıca Counter bileşenimizin bu değeri bir şekilde değiştirebilmesi gerektiğini de biliyorsunuz. Başka bir deyişle, bileşen öyle olmalıdır ki, kullanıcı + veya - öğesine tıkladığında değer güncellenmelidir.

Bu ifade hakkında bir an düşünürseniz, Counter bileşeninin yalnızca bir value ( numara türünden) beklemediğini, aynı zamanda iki ek işlev türüne ihtiyaç duyduğunu hemen fark edeceksiniz: biri söz konusu değeri artıran, diğeri azaltan biri. Başka bir deyişle, Counter'ın üç farklı props ihtiyacı var:

• value : bu bir sayı ve sayacın değeri (hah!)
• onIncrease : çağrıldığında sayacın değerini artıran bir fonksiyondur
• onDecrease : çağrıldığında sayacın değerini azaltan başka bir işlevdir

Bileşenimize bu üç desteğin verileceği varsayımıyla çalışırsak, bileşenin kendisi son derece basit hale gelir:

 export const Counter = ( { value, onIncrease, onDecrease } ) => ( <div> <div>Counter: <strong>{ value }</strong></div> <button onClick={ onIncrease }>+</button> <button onClick={ onDecrease }>-</button> </div> );

Bileşenimizin aldığı işlevleri nasıl yürütmediğine dikkat edin (bu, daha önce de söylediğimiz gibi, bir yan etkiyi tetikleyeceğinden “yasaktır”). Tek yaptığı onları butonlarımızın click olayına bağlamak. Bu, saf bir işlevi başarıyla uyguladığımız anlamına gelir (tüm bileşenlerin olması gerektiği gibi), çünkü aynı üç aksesuar verildiğinde, sonuç her zaman aynı "bağlantılara" sahip aynı HTML olacaktır.

Ne yazık ki, bileşeni kullanmaya çalışırsanız hiçbir şeyin işe yaramadığını göreceksiniz.

Bileşene ihtiyaç duyduğu TÜM aksesuarları vermek

Ve işe yaramadığına şaşmamalı! Bu bileşeni kullandığımızda, sözleşmesine uymadık ve düzgün çalışması için gereken malzemeleri eklemedik. Sadece index.js bakın:

 render( <Counter />, wrapper );

Sayacın bir value yoktur ve onIncrease veya onDecrease işlevleri de yoktur!

Pekala, hadi bunu çabucak düzeltelim. Tek yapmamız gereken, sayacın değerini depolayan bir değişken oluşturmak ve onu güncelleyen bir işlev uygulamak, böylece bunları bileşenimizde kullanabiliriz:

 // Import dependencies import { render } from '@wordpress/element'; import { Counter } from './components/counter'; // Store value let value = 0; function setValue( newValue ) { value = newValue; } // Render component in DOM const wrapper = document.getElementById( 'react-example-wrapper' ); render( <Counter value={ value } onIncrease={ () => setValue( value + 1 ) } onDecrease={ () => setValue( value - 1 ) } />, wrapper );

Bu mimari sayesinde kullanıcı arayüzünü (bileşen olan) veri yönetiminden tamamen ayırmayı başardık. Bileşen, değerin kim veya nasıl depolandığı konusunda tamamen agnostiktir; tek umursadığı şey, ihtiyaç duyduğu sahne malzemelerini alması.

Sayfayı bir kez daha yenilersek, şimdi sayacın varsayılan bir sayaç değeri gösterdiğini (yani 0 ), ancak + ve - üzerine tıklamanın henüz çalışmadığını göreceksiniz…

Güncellemede Bileşeni Yeniden Oluşturma

Bir önceki parçaya bakarsanız, şimdi her şeyin yolunda gitmesi gerektiğini düşünebilirsiniz. Ama açıkçası yapmıyorlar… o halde yanlış olan ne? Peki, küçük bir test yapalım. setValue işlevini, yeni değeri value öğesine atamanın yanı sıra konsolda günlüğe kaydetmesi için değiştirin:

 function setValue( newValue ) { value = newValue; console.log( 'Value is', value ); }

ve işlerin beklendiği gibi çalışıp çalışmadığını tekrar kontrol edin. Tarayıcınızın geliştirici araçlarını açın ve düğmelerinizi tıklayın:

İlginç, değil mi? Kullanıcı bir düğmeye her tıkladığında value düzgün bir şekilde güncelleniyor gibi görünüyor, ancak bileşen hiçbir zaman güncellenmiyor.

Bir bileşeni oluşturmak istiyorsanız, gerekli aksesuarlarla onun saf işlevini çağırmanız gerekir. Bir pervane değiştiğinde, yeni HTML'nin oluşturulabilmesi için saf işlevi yeni değerle yeniden çağırmanız gerekir. Bu nedenle, kullanıcı arayüzümüzün en son value göstermesini istiyorsak, value her güncellendiğinde bileşeni manuel olarak yeniden oluşturmamız gerekir:

 // Import dependencies import { render } from '@wordpress/element'; import { Counter } from './components/counter'; // Store value let value = 0; function setValue( newValue ) { value = newValue; refreshComponent(); } // Render component in DOM const wrapper = document.getElementById( 'react-example-wrapper' ); function refreshComponent() { render( <Counter value={ value } onIncrease={ () => setValue( value + 1 ) } onDecrease={ () => setValue( value - 1 ) } />, wrapper ); } refreshComponent();

Gördüğünüz gibi, bileşeni ilk kez ve setValue aracılığıyla value her güncellendiğinde oluşturmak için kullandığımız refreshComponent adında yeni bir işlev oluşturduk. Bu, beklenen davranışla sonuçlanır:

Yok canım? Rendering Bileşenleri Berbat Görünüyor!

Bugünkü öğreticiyi izleyerek bu noktaya geldiyseniz, muhtemelen React bileşenlerini yeniden oluşturma şeklimizden biraz hayal kırıklığına uğradınız. Ve seni suçlamıyorum – bu eğitimin son bölümü gerçekten de oldukça berbattı. Ancak bunun nedeni, "verileri" "Kullanıcı Arayüzü"nden nasıl ayırabileceğinizi gösteren basit bir örnek olmasıydı.

Bugün çok önemli iki ders öğrendiniz:

1. Bir bileşenin ihtiyaç duyabileceği aksesuarlar yalnızca “veri” (sayılar, diziler, diziler, nesneler… gibi) değil, aynı zamanda “fonksiyonlar” da olabilir. Bu, bu işlevleri DOM olaylarına bağlayabileceğimiz anlamına gelir, böylece kullanıcı belirli eylemleri gerçekleştirdiğinde "otomatik olarak" çalışırlar ve böylece uygulamamızın durumunu güncellerler.
2. Bileşenler (UI) ve kullandığımız veriler birbirinden tamamen bağımsızdır. Bir React bileşeni, ihtiyaç duyduğu donanımların kimin veya nasıl yönetildiği ile ilgilenmez. Bu, sayacımızın value yönetmek ve güncellemek için berbat bir çözüm uygulayabileceğimiz ve her şeyin "işe yarayacağı" anlamına geliyor.

Bir sonraki gönderide bu çözümü geliştireceğiz ve uygulama durumunu yönetmek için WordPress mağazalarını (Redux tabanlı) kullanacağız. Kaçırma!

Unsplash'ta Hermes Rivera'nın öne çıkan görüntüsü .